# PivotChart

Learn about Wijmo's OLAP PivotChart in this documentation topic

## Content


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__:

```javascript
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__:

```javascript
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.

```javascript
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  |

```javascript
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.

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