FusionCharts Logo
FusionCharts Suite v3.7.1

Loading

Exporting to Images or PDF

Harry is finding the dashboards that we’re building for him very useful. He now wants to be able to export specific charts in a dashboard as images or PDF, so that he can share it with his external vendors, without giving them access to the full dashboards.

FusionCharts Suite XT allows Harry’s developers to allow exporting for any chart, by simply switching the attribute exportEnabled to 1. Once done, an icon shows up on the top-right of the chart, allowing user to download the chart as image, SVG or PDF.

The actual conversion of chart to image or PDF is done at server-side using the hosted FusionCharts Suite XT export handler. When Harry clicks on the chart’s export icon and selects a format, the chart sends its visual data to the hosted FusionCharts Suite XT export server, which then returns an image or PDF file.

Let’s enable export for the revenue chart that we created for Harry, earlier. Once done, the export icon will show up as under:

FusionCharts will load here..

Notice the button on the top right corner of your screen. It lets you select a format for export of the chart.

The JSON code for this chart stays exactly the same as in first example. We just set exportEnabled attribute of chart object to 1.

This is the code needed to enable export on your charts.

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
  "type": "column2d",
  "renderAt": "chartContainer",
  "width": "500",
  "height": "300",
  "dataFormat": "json",
  "dataSource": {
  "chart": {
    "caption": "Monthly revenue for last year",
    "subCaption": "Harry's SuperMart",
    "xAxisName": "Month",
    "yAxisName": "Revenues (In USD)",
    "exportEnabled":"1",
    "theme": "fint"
  },
  "data": [
    {
       "label": "Jan",
       "value": "420000"
    },
    {
       "label": "Feb",
       "value": "810000"
    },
    {
       "label": "Mar",
       "value": "720000"
    },
    {
       "label": "Apr",
       "value": "550000"
    },
    {
       "label": "May",
       "value": "910000"
    },
    {
       "label": "Jun",
       "value": "510000"
    },
    {
       "label": "Jul",
       "value": "680000"
    },
    {
       "label": "Aug",
       "value": "620000"
    },
    {
       "label": "Sep",
       "value": "610000"
    },
    {
       "label": "Oct",
       "value": "490000"
    },
    {
       "label": "Nov",
       "value": "900000"
    },
    {
       "label": "Dec",
       "value": "730000"
    }
  ]
}
});

revenueChart.render();
})
</script>
</head>
<body>
  <div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

With this you know how to give users an option to export their charts as images or PDFs.

Was there a problem rendering the chart?

In case something went wrong and you are unable to see the chart, check for the following:

  • If you are getting a JavaScript error on your page, check your browser console for the exact error and fix accordingly.

  • If the chart does not show up at all, but there are no JavaScript errors, check if the FusionCharts Suite XT JavaScript library has loaded correctly. You can use developer tools within your browser to see if fusioncharts.js was loaded. Check if the path to fusioncharts.js file is correct, and whether the file exists in that location.

  • If you get a Loading Data or Error in loading data message, check whether your JSON data structure is correct, and there are no conflicts related to quotation marks in your code.

Click here for more information on Troubleshooting.

Top