Demo - Pivot Chart Export

by Joel Parks

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.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.olap.min.js"></script>
<div class="container">

  <h1>
    Pivot Chart Export
  </h1>
  <p>
  Sample testing PivotChart's export functionality with the newest release.
  </p>
  <div id="pivotChart"></div>
  <div id="export">
    Export to
    <button class="btn btn-default">PNG</button>
    <button class="btn btn-default">JPEG</button>
    <button class="btn btn-default">SVG</button>
  </div>
</div>

CSS

.wj-pivotchart {
  margin: auto;
  max-width: 600px;
}
.wj-pivotchart .wj-flexchart {
  border: none;
  height: 300px;
}

body {
  margin-bottom: 48pt;
}

JavaScript

onload = function() {

  // initialize pivot engine
  var ngChart = new wijmo.olap.PivotEngine({
    itemsSource: getData(), // raw data
    valueFields: ['Amount'], // summarize amounts
    rowFields: ['Buyer', 'Type'], // by buyer and type
  });
  ngChart.fields.getField('Amount').format = 'c0'; // customize field

  // show the chart
  var pivotChart = new wijmo.olap.PivotChart('#pivotChart', {
    itemsSource: ngChart,
    showTitle: true,
    showLegend: 'Auto'
  });
  
  // export the chart to an image
	document.getElementById('export').addEventListener('click', function(e) {
		if (e.target instanceof HTMLButtonElement) {
    	var ext = e.target.textContent.trim();
    	pivotChart.saveImageToFile('FlexChart.' + ext);  
    }
  });
  
  // get the raw data
  function getData() {
    var yr = new Date().getFullYear();
    return [{
        date: new Date(yr, 0, 1),
        buyer: 'Mom',
        type: 'Fuel',
        amount: 74
      },
      {
        date: new Date(yr, 0, 15),
        buyer: 'Mom',
        type: 'Food',
        amount: 235
      },
      {
        date: new Date(yr, 0, 17),
        buyer: 'Dad',
        type: 'Sports',
        amount: 20
      },
      {
        date: new Date(yr, 0, 21),
        buyer: 'Kelly',
        type: 'Books',
        amount: 125
      },
      {
        date: new Date(yr, 1, 2),
        buyer: 'Mom',
        type: 'Food',
        amount: 235
      },
      {
        date: new Date(yr, 1, 20),
        buyer: 'Kelly',
        type: 'Music',
        amount: 20
      },
      {
        date: new Date(yr, 1, 25),
        buyer: 'Kelly',
        type: 'Tickets',
        amount: 125
      },
    ];
  }

}