You are viewing documentation for an older version. For current documentation - click here.
Opening links in pop-up windows

FusionWidgets XT also allows you to open your links in pop-up windows. To open a link in pop-up window, you need to define the link as under:

<set .. value='235' link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan" />

Here, we've done the following:

  1. Prefixed the link with P- so as to denote that the link is to be opened in a new pop-up window.
  2. Specified a name for the new window. In this case it's detailsWin. If you want all the links to open in the same pop-up, use the same window name across all links. However, if you want each link to open in a new pop-up, specify a different window name for each link.
  3. Defined the list of attributes for the new window. In this case, it's width=400,height=300,toolbar=no,scrollbars=no, resizable=no. The list of attributes are separated by comma. Possible list of attributes is defined below.
  4. Separated the name for the new window and the list of attributes for the new window with a comma (detailsWin,width=400...) .
  5. Provided the actual link (ShowDetails.asp%3FMonth%3DJan) to be invoked after a dash (-). The link is URL Encoded.
Possible attributes for new window

  • height
    Specifies the height of the window in pixels.
    Value = number
  • width
    Specifies the width of the window in pixels.
    Value = number
  • resizable
    When enabled, allows the user to manually resize the window by dragging its edges or corners.
    Value = yes or no, 1 or 0.
  • scrollbars
    Specifies whether or not to display the horizontal and vertical scrollbars that normally appear when the page content is larger than the screen.
    Value = yes or no, 1 or 0.
  • menubar
    Specifies whether or not to display a menu bar at the top of the window.
    Value = yes or no, 1 or 0.
  • toolbar
    Specifies whether or not to display the main toolbar (with the back, forward, stop etc. buttons).
    Value = yes or no, 1 or 0.
  • location
    Specifies whether or not to display the location bar (the Address Bar in Internet Explorer) - where URLs are typed and displayed.
    Value = yes or no, 1 or 0.
  • directories
    Specifies whether or not to display any additional toolbar (e.g., the Links Bar in Internet Explorer).
    Value = yes or no, 1 or 0.
  • status
    Specifies whether or not to display the status bar at the foot of the window.
    Value = yes or no, 1 or 0.
  • left
    Specifies the distance in pixels of the new window from the left edge of the screen. (This applies to Internet Explorer. For Netscape Navigator use screenX).
    Value = number
  • top
    Specifies the distance in pixels of the new window from the top edge of the screen. (This applies to Internet Explorer. For Netscape Navigator use screenY).
    Value = number
  • fullscreen
    When enabled, causes the window to open in full-screen mode (Internet Explorer only.)
    Value = yes or no, 1 or 0.

Sample XML/JSON:

 
<chart caption="Monthly Sales Summary" subcaption="For the year 2006" xAxisName="Month" yAxisName="Sales" numberPrefix="$">
  <set label="Jan" value="17400" link="P-detailsPopUp,width=400,height=300,toolbar=no, 
      scrollbars=no,resizable=no-DemoLinkPages/DemoLink1.html"/>
  <set label="Feb" value="19800" link="P-detailsPopUp,width=400,height=300,toolbar=no, 
      scrollbars=no,resizable=no-DemoLinkPages/DemoLink2.html"/>
  <set label="Mar" value="21800" link="P-detailsPopUp,width=400,height=300,toolbar=no, 
      scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html"/>
  <set label="Apr" value="23800" link="P-detailsPopUp,width=400,height=300,toolbar=no, 
      scrollbars=no,resizable=no-DemoLinkPages/DemoLink4.html"/>
  <set label="May" value="29600" link="P-detailsPopUp,width=400,height=300,toolbar=no, 
         scrollbars=no,resizable=no-DemoLinkPages/DemoLink5.html"/>
  <set label="Jun" value="27600" link="P-detailsPopUp,width=400,height=300,toolbar=no, 
      scrollbars=no,resizable=no-DemoLinkPages/DemoLink6.html"/>
</chart>
{
  "chart": {
    "caption": "Monthly Sales Summary",
    "subcaption": "For the year 2006",
    "xaxisname": "Month",
    "yaxisname": "Sales",
    "numberprefix": "$"
  },
  "data": [
    {
      "label": "Jan",
      "value": "17400",
      "link": "P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink1.html"
    },
    {
      "label": "Feb",
      "value": "19800",
      "link": "P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink2.html"
    },
    {
      "label": "Mar",
      "value": "21800",
      "link": "P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html"
    },
    {
      "label": "Apr",
      "value": "23800",
      "link": "P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink4.html"
    },
    {
      "label": "May",
      "value": "29600",
      "link": "P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink5.html"
    },
    {
      "label": "Jun",
      "value": "27600",
      "link": "P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink6.html"
    }
  ]
}

See it live!

Note: Internally the chart decodes a URL that you set as link. Before invoking the link it again encodes the URL. If you are passing multilingual characters via a URL or do not want this decode-encode mechanism to be handled by chart you can set unescapeLinks='0' in <chart> element of the chart's XML data. If you are using JSON data, you need to use { "chart" : { "unescapeLinks" : "0" ... } ... } .