# PivotPanel

Learn about Wijmo's OLAP PivotPanel in this documentation topic

## Content


The __PivotPanel__ control provides a drag-drop UI for editing a __PivotEngine__'s fields and field lists.

You can drag fields among field lists to build views, and use each fields context menu to customize the field properties, including format, aggregate, etc.

![alt text](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/olap/pivot-panel.png)


## Create a PivotPanel control

Set the __PivotPanel.itemsSource__ property to an instance of a __PivotEngine__ in order to connect the two components.

First, create a host element for the panel

```html
<div id="panel"></div>
```

Then instantiate the __PivotPanel__ control and bind the __PivotEngine__ to it.

```javascript 
let engine = new wjOlap.PivotEngine();
engine.itemsSource = rawData;

let panel = new wjOlap.PivotPanel('#panel');
panel.itemsSource = engine;
```

## Fields

The __PivotEngine__ has several field collections exposed as properties:

- __fields__: Contains all the fields available in the data source.
- __valueFields__: Contains fields used as "measures", typically numeric values that are summarized by the engine.
- __rowFields__ and __columnFields__: Contain fields used as "dimensions", typically strings or dates that are used to break up data into groups.
- __filterFields__: Contain fields that are used only for filtering the data (they are not included in the output summary).


### Value Fields (Measures)

The __PivotPanel__ allows you to drag multiple copies of fields into the __valueFields__ collection. When you do that, the panel creates clones that have their own properties.

This allows you to summarize fields using different aggregates and calculations. For example, you can show a column with sums and another with averages, running totals or percentages.

### Row and Column Fields

The __PivotEngine__ ensures each dimension field appears only once in the view. If you drag the "Buyer" field into the columnFields area, it will automatically be removed from the rowFields area.

The __PivotEngine__ uses the dimension fields to break up the data into groups. It does this using formatted values, so if you format a date field as year (yyyy) or quarter (q) the data will be summarized by year or quarter.

If you want to be able to summarize the data by year and by quarter, create two copies of the date fields, each with a different format and header.

### Filter Fields

The __filterFields__ list allows you to apply filters based on fields that are not being used as measures or dimensions.

For example, you may want to show expenses by __Buyer__ and __Type__ for a certain year only.

To do that, follow these steps:

1. Drag the "Date" field into the Filters area.
2. Right-click the field and select the "Field Settings..." option.
3. In the filter editor dialog, click the "Edit..." button next to "Filter".
4. In the filter editor dialog, check the years you are interested in.
5. Click "OK" to close the editors.

## Edit Fields

You can edit fields from the PivotPanel's context menu. To do so, right-click a field on the panel and select the "Field Settings..." option. This will bring up a dialog where you can edit the field's properties, including the filter (you can also do this from the PivotGrid on the right):

## Create Views with PivotPanel

Now that the __PivotPanel__ is bound to a __PivotEngine__ object containing the data, you can manipulate the views without code. Most of your users will interact with the tool in this manner.

Start by selecting a field and adding it to a field list.