PivotChart

Pivot grids are great, but in some cases charts can be more effective at communicating summarized data.

The PivotChart is an extension of the FlexChart control, so it has similar properties.

To use the PivotChart, set the PivotChart.itemsSource property to an instance of a PivotEngine or PivotPanel in order to connect the two components.

Using PivotEngine:

var ng = new wjOlap.PivotEngine({
    itemsSource: getData(),
    valueFields: ['Amount'],
    rowFields: ['Buyer', 'Type'],
});

var pivotChart = new wjOlap.PivotChart('#pivotChart', {
    itemsSource: ng,
    showTitle: true,
    showLegend: 'Auto'
});

Using PivotPanel:

var ng = new wjOlap.PivotEngine({
    itemsSource: getData(),
    valueFields: ['Amount'],
    rowFields: ['Buyer', 'Type'],
});

var panel = new wjOlap.PivotPanel("#panel", {
    itemsSource: ng
});
var pivotChart = new wjOlap.PivotChart('#pivotChart', {
    itemsSource: panel,
    showTitle: true,
    showLegend: 'Auto'
});

Chart Types

The PivotChart supports 6 chart types. You can choose fom the PivotChartType enums below.

To use a specific chart, set the PivotChart's chartType property to one of these.

pivotChart.chartType = wjOlap.PivotChartType.Column
// or
pivotChart.chartType = 0;

Title

You can use the chart's showTitle property to determine whether the chart should include an automatically-generated title. By default this property is set to true, so the title will show if you omit the property setting.

Legend

You can use the chart's showLegend property to determine whether the chart should include an automatically-generated legend:

Use the wijmo.olap.LegendVisibility enum to determine the behavior | Options | value | description | |---|---|---|---|---| | Always | 0 | Always show the legend | | Never | 1 | Never show the legend | | Auto | 2 | Show the legend if the chart has more than one series |

pivotChart.showLegend = wjOlap.LegendVisibility.Column
// or
pivotChart.showLegend = 0;

Export

You can also export the PivotChart. Use the chart's saveImageToFile method to export the chart to an image file.

This example uses a button's event listener to perform the action.

// 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.png');  
    }
});