Html5 Chart

Invoke the saveAsPNG method of the jqxChart. Author: http://jqwidgets.com

by Stéphane Cabaret

HTML

<script src="http:\\jqwidgets.com\public\jqwidgets\jqxcore.js"></script>
<script src="http:\\jqwidgets.com\public\jqwidgets\jqxdata.js"></script>
<script src="http:\\jqwidgets.com\public\jqwidgets\jqxchart.js"></script>
<link rel="stylesheet" href="http:\\jqwidgets.com\public\jqwidgets\styles\jqx.base.css">
<script src="http:\\jqwidgets.com\public\jqwidgets\jqxbuttons.js"></script>
<link rel="stylesheet" href="http:\\jqwidgets.com\public\jqwidgets\styles\jqx.energyblue.css">
<div id='jqxChart' style="width:680px; height:400px; position: relative; left: 0px; top: 0px;"></div>
<div style='margin-top: 10px;'>
    <input style='float: left;' id="jpegButton" type="button" value="Save As JPEG" />
    <input style='float: left; margin-left: 5px;' id="pngButton" type="button" value="Save As PNG" />
</div>

JavaScript

var sampleData = [

  {
      Country: 'China',
      Population: 1347350000,
      Percent: 19.18
  }, {
      Country: 'India',
      Population: 1210193422,
      Percent: 17.22
  }, {
      Country: 'USA',
      Population: 313912000,
      Percent: 4.47
  }, {
      Country: 'Indonesia',
      Population: 237641326,
      Percent: 3.38
  }, {
      Country: 'Brazil',
      Population: 192376496,
      Percent: 2.74
  }];
  // prepare jqxChart settings

  var settings = {
      title: "Top 5 most populated countries",
      description: "Statistics for 2011",
      showLegend: true,
      enableAnimations: true,
      padding: {
          left: 20,
          top: 5,
          right: 20,
          bottom: 5
      },
      titlePadding: {
          left: 90,
          top: 0,
          right: 0,
          bottom: 10
      },
      source: sampleData,
      categoryAxis: {
          dataField: 'Country',
          showGridLines: true,
          flip: false
      },
      colorScheme: 'scheme01',
      seriesGroups: [{
          type: 'column',
          orientation: 'horizontal',
          columnsGapPercent: 100,
          toolTipFormatSettings: {
              thousandsSeparator: ','
          },
          valueAxis: {
              flip: true,
              unitInterval: 100000000,
              maxValue: 1500000000,
              displayValueAxis: true,
              description: '',
              formatFunction: function (value) {
                  return parseInt(value / 1000000);
              }
          },
          series: [{
              dataField: 'Population',
              displayText: 'Population (millions)'
          }]
      }]
  };
  // setup the chart
  $('#jqxChart').jqxChart(settings);
  $("#jpegButton").jqxButton({
      theme: 'energyblue'
  });
  $("#pngButton").jqxButton({
      theme: 'energyblue'
  });
  $("#jpegButton").click(function () {
      // call the export server to create a JPEG image
     ...