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.

Chart Type	value	description
Column	0	Shows vertical bars and allows you to compare values of items across categories
Bar	1	Shows horizontal bars
Line	2	Shows patterns within the data using X and Y coordinates
Scatter	3	Shows trends over a period of time or across categories
Area	4	Shows line chart with the area below the line filled with color
Pie	5	Shows pie chart

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