Demo - FlexChart Export

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<div class="container">

  <h1>
    FlexChart Export</h1>
  <p>
    Saving charts as images for inclusion in other documents
    is a common requirement. Some browsers support this as
    a context menu option, but not all.</p>
  <p>
    The FlexChart's <b>saveImageToFile</b> method makes this
    really easy:</p>    
  
  <p id="saveButtons">
    Save as:
    <button class="btn btn-default">PNG</button>
    <button class="btn btn-default">JPEG</button>
    <button class="btn btn-default">SVG</button>
  </p>

  <div id="theChart" style="padding: 0px"></div>
  
</div>

CSS

.wj-flexchart {
  height: 300px;
  margin: 10px 0;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // create the chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
    header: '',
    chartType: 'Scatter',
    axisX: {
      labels: false,
      majorGrid: false,
      axisLine: false,
    },
    axisY: {
      labels: false,
      majorGrid: false,
      axisLine: false,
    },
    legend: {
      position: "None",
    },
    series: [{
        name: 'Experiment 1',
        itemsSource: getData(50, 0, 3),
        bindingX: 'x',
        binding: 'y'
      },
      {
        name: 'Experiment 2',
        itemsSource: getData(40, 100, 12),
        bindingX: 'x',
        binding: 'y'
      },
      {
        name: 'Experiment 3',
        itemsSource: getData(30, -100, 24),
        bindingX: 'x',
        binding: 'y'
      },
    ]
  });

  // save chart image to file
  document.getElementById('saveButtons').addEventListener('click', function(e) {
    if (e.target instanceof HTMLButtonElement) {
      theChart.saveImageToFile('FlexChart.' + e.target.textContent);
    }
  })

  // data sources
  function getData(cnt, a, b) {
    var arr = [],
      x = 5 * cnt / 2;
    for (i = 0; i < cnt; i++) {
      var rnd = Math.random() * cnt - cnt / 2;
      arr.push({
        x: x,
        y: a + x * (b + rnd) + rnd
      });
      x += .5 + Math.random() * 10;
    }
    return arr;
  }
}