Pivot Chart Export

The PivotChart can be exported to a file as well. Use the chart's saveImageToFile method to export the chart to an image file. This example shows how to export the PivotChart to PNG, JPEG and SVG file formats.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; import { getData } from './data'; import '@grapecity/wijmo.chart.render'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // initialize pivot engine var ngChart = new wjOlap.PivotEngine({ itemsSource: getData(), valueFields: ['Amount'], rowFields: ['Buyer', 'Type'], }); ngChart.fields.getField('Amount').format = 'c0'; // customize field // // show the chart var pivotChart = new wjOlap.PivotChart('#pivotChart', { itemsSource: ngChart, showTitle: true, showLegend: 'Auto' }); // // toggle chart title document.getElementById('chartTitle').addEventListener('click', function (e) { pivotChart.showTitle = e.target.checked; }); // // 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); } }); // } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Chart Export</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="pivotChart"></div> <label> Show Chart Title <input id="chartTitle" type="checkbox" checked="checked"> </label> <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> </body> </html> // get the raw data export 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 }, ]; } .wj-pivotchart { margin: auto; max-width: 600px; } .wj-pivotchart .wj-flexchart { border: none; height: 300px; } body { margin-bottom: 48pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; import * as wjInput from '@grapecity/wijmo.input'; import '@grapecity/wijmo.chart.render'; // import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjOlapModule } from '@grapecity/wijmo.angular2.olap'; import { DataService } from './app.data'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('pivotChart') pivotChart: wjOlap.PivotChart; ngChart: wjOlap.PivotEngine; // constructor(@Inject(DataService) private dataService: DataService) { this.ngChart = new wjOlap.PivotEngine({ itemsSource: dataService.getData(), // raw data valueFields: ['Amount'], // summarize amounts rowFields: ['Buyer', 'Type'], // by buyer and type }); this.ngChart.fields.getField('Amount').format = 'c0'; } // onChartTitleClick(e: MouseEvent) { this.pivotChart.showTitle = (e.target as HTMLInputElement).checked; } // onExportClick(e: MouseEvent) { if (e.target instanceof HTMLButtonElement) { this.pivotChart.saveImageToFile('FlexChart.' + e.target.textContent.trim()); } } } // @NgModule({ imports: [WjOlapModule, WjInputModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Chart Export</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <wj-pivot-chart #pivotChart [itemsSource]="ngChart" [showTitle]=true [showLegend]="'Auto'"></wj-pivot-chart> <label> Show Chart Title <input id="chartTitle" type="checkbox" checked="checked" (click)="onChartTitleClick($event)"> </label> <div id="export" (click)="onExportClick($event)"> 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> import { Injectable } from '@angular/core'; export interface DataItem { date: Date; buyer: string; type: string; amount: number; } @Injectable() export class DataService { getData(): DataItem[] { 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 }, ]; } } .wj-pivotchart { margin: auto; max-width: 600px; } .wj-pivotchart .wj-flexchart { border: none; height: 300px; } body { margin-bottom: 48pt; } <template> <div class="container-fluid"> <wj-pivot-chart control="pivotChart" :items-source="ngChart" :show-title="true" show-legend="Auto" :initialized="initializePivotChart"></wj-pivot-chart> <label> Show Chart Title <input id="chartTitle" type="checkbox" checked="checked" v-on:click="onChartTitleClick"> </label> <div id="export" v-on:click="onExportClick"> 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> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.olap'; import * as wjcOlap from '@grapecity/wijmo.olap'; import { getData } from './data' import '@grapecity/wijmo.chart.render'; let App = Vue.extend({ name: "app", data: function() { return { ngChart: new wjcOlap.PivotEngine({ itemsSource: getData(), // raw data valueFields: ['Amount'], // summarize amounts rowFields: ['Buyer', 'Type'], // by buyer and type }), chartTypes: 'Column,Bar,Line,Area,Pie'.split(',') }; }, methods: { initializePivotChart: (pivotChart) => { this.pivotChart = pivotChart; this.pivotChart.engine.fields.getField('Amount').format = 'c0'; }, onChartTitleClick(e) { this.pivotChart.showTitle = e.target.checked; }, onExportClick(e) { if (e.target instanceof HTMLButtonElement) { this.pivotChart.saveImageToFile('FlexChart.' + e.target.textContent.trim()); } } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-pivotchart { margin: auto; } .wj-pivotchart .wj-flexchart { border: none; height: 300px; } body { margin-bottom: 48pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Chart Export</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export 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 }, ]; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as Olap from '@grapecity/wijmo.react.olap'; import * as wjcOlap from '@grapecity/wijmo.olap'; import { getData } from './data'; import '@grapecity/wijmo.chart.render'; // class App extends React.Component { constructor(props) { super(props); this.state = { ngChart: new wjcOlap.PivotEngine({ itemsSource: getData(), valueFields: ['Amount'], rowFields: ['Buyer', 'Type'], }), showTitle: true }; } render() { return <div className="container-fluid"> <Olap.PivotChart showTitle={this.state.showTitle} itemsSource={this.state.ngChart} initialized={this.initializePivotChart.bind(this)} showLegend="Auto"> </Olap.PivotChart> <br /> <label> Show Chart Title <input id="chartTitle" type="checkbox" defaultChecked onChange={this.handleInputChange.bind(this)}/> </label> <div className="btn-container" onClick={this.onExportClick.bind(this)}> Export to <button className="btn btn-default">PNG</button> <button className="btn btn-default">JPEG</button> <button className="btn btn-default">SVG</button> </div> </div>; } handleInputChange(input) { this.setState({ showTitle: input.target.checked }); } initializePivotChart(pivotChart) { this.pivotChart = pivotChart; this.pivotChart.engine.fields.getField('Amount').format = 'c0'; } onExportClick(e) { if (e.target instanceof HTMLButtonElement) { this.pivotChart.saveImageToFile('FlexChart.' + e.target.textContent.trim()); } } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Chart Export</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-pivotchart { margin: auto; } .wj-pivotchart .wj-flexchart { border: none; height: 300px; } .wj-combobox { margin-left: 10px; } .btn-default { margin-left: 3px; } body { margin-bottom: 48pt; } // list of country GDP and populations // https://en.wikipedia.org/wiki/List_of_IMF_ranked_countries_by_GDP export 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 }, ]; }