Chart Export

Chart Export Overview

ZingChart offers the ability to export HTML5 charts into various formats (e.g. png, jpg, pdf). However, the process to accomplish the export is different for each rendering technology used. Some cases require nothing but the browser itself, while other cases require the use of an "export server", which is an online resource used to convert the chart into static formats.

Support and Technologies

RenderFormatsMethod

FLASH

png, jpg, bmp, pdf

Intrinsic Flash API

CANVAS

png, jpg, pdf

Intrinsic Browser API for png and jpg; Export Server for pdf

SVG

png, jpg, pdf

Intrinsic Browser API for png and jpg; Export Server for pdf

VML

png, jpg, pdf

Export Server

Export Server

By default ZingChart uses export.zingchart.com as the export server. The export server is basically a LAMP (or similar, but with PHP installed) stack running in addition the Batik Toolkit, a software which is able (among others) to convert SVG documents into static images or PDF files. When the image export call is issued in ZingChart (via context menu or API calls) the SVG (as string) representation of the chart is being sent to the export server and this returns the static image.

ZingChart can be configured to use other servers with the same configuration as the default Export Server. In case of sensitive data or for better speed and responsiveness, users can setup & configure their own personal Export Server and then use:

zingchart.EXPORTURL = 'http://my.server.com/path/to/index.php';
zingchart.render({
...
});

The PHP code needed to run the Batik convertor can be downloaded from here.

There is another zingchart property that impacts how the library interacts with the Export Server (via one way HTTP POST or an AJAX call, see more in the API Considerations section below):

zingchart.AJAXEXPORT = true | [false];

API Considerations

The ZingChart library implements the getimagedata API to get the base64 encoded string version of the chart's image representation.

SVG Rendering

The SVG render must use the callback function to retrieve the imagedata.

https://app.zingsoft.com/demos/embed/I9JFJ01Ahttps://app.zingsoft.com/demos/embed/I9JFJ01A
document.getElementById('test_export').addEventListener('click', function() {
   zingchart.exec('myChart', 'getimagedata', {
       filetype : 'png',
       callback : function(imagedata) {
           console.log(imagedata);
           document.getElementById('output_image').src = imagedata;
       }
   });  
});
 Copy

Canvas Rendering

https://app.zingsoft.com/demos/embed/ELQ7RTD9https://app.zingsoft.com/demos/embed/ELQ7RTD9
zingchart.render({
    id : 'zc-demo-1',
    width : 400,
    height : 200,
    output : 'canvas',
    data : {type:'bar',title:{text:'Canvas render'},series:[{values:[3,5,8,4,2,6]}]}
});
$('#zc-btn-1').click(function() {
    var sImageData = zingchart.exec('zc-demo-1', 'getimagedata', {
        format : 'png'
    });
    $('#zc-static-1').append('<img src="' + sImageData + '">');
});

When render mode VML (for old IE's), getimagedata will return -1 when called. This happens because, even if we can get the image from the Export Server, due to cross domain security we cannot receive a response from it containing the data image, all the server can do is to "push" it to the browser. This makes the SVG rendering unsuited for projects that require image exporting.

https://app.zingsoft.com/demos/embed/TJ3BTJ76https://app.zingsoft.com/demos/embed/TJ3BTJ76
zingchart.render({
    id : 'zc-demo-2',
    width : 400,
    height : 200,
    output : 'svg',
    data : {
      type:'bar',
      title:{
        text:'SVG/VML render'
      },
      series:[
        {
          values:[3,5,8,4,2,6]
        }
      ]
    }
});
$('#zc-btn-2').click(function() {
    var sImageData = zingchart.exec('zc-demo-2', 'getimagedata', {
        format : 'png'
    });
    alert(sImageData);
});

However, if a dedicated Export Server is installed on same domain as the chart's pages and if zingchart.AJAXEXPORT is set to true, the ZingChart library will perform an AJAX call and the getimagedata API will return the base64 encoded string representing the image. The difference is that because of the AJAX request/response cycle, the result has to be processed via a callback function.

zingchart.EXPORTURL = 'http://my.server.com/'; // this will work only when the example will run under my.server.com
zingchart.AJAXEXPORT = true;
zingchart.exec('zc-demo-3', 'getimagedata', {
    format : 'png',
    callback : function(sImageData) {
        $('#zc-static-3').append('img src="' + sImageData + '"');
    }
});

Summary

JavaScript chart export is a great feature of ZingChart, and can be easily implemented for any of your charts. Remember, you can always right-click to bring up the chart's context menu and save the chart as an image as well!

Don't forget, a comprehensive list of available attributes and objects can be found on our JSON Syntax page.