
# Pivot RealChart

This is an example linking RealPivot and RealChart. When you click on the body area of ​​the pivot screen, the sales performance for the manufacturer and model is displayed as a RealChart graph.


<GridView demo='pivotguides/12-pivotRealChart/01' height={1000}/>

#### Linking RealGrid and RealChart

RealChart can be found on the [https://www.realchart.co.kr/](https://www.realchart.co.kr/) page.

#### Import pivot data and label values

When the focus moves, the [onCurrentChanged](http://help.realgrid.com/pivotApi/RealPivot/onCurrentChanged/) event occurs and the [getAllValues](http://help.realgrid.com/pivotApi/RealPivot/getAllValues/) event occurs.
You can get the value with [getRowValues](http://help.realgrid.com/pivotApi/RealPivot/getRowValues/).

The imported data can be processed and used in the desired form according to the purpose of use.

```js
pivot.onCurrentChanged = function (grid, index) {

     var attrs = Object.keys(index.columns);
     var level = attrs.filter(function (item) { return item == "__sum" || item == "valueField" ? false : true; }).length;

     var columnLabels = pivot.getColumnLabels();
     var columnList = getLevelLabels(columnLabels, 1, level)

     var vals = []
     var len = Object.keys(pivot.getRowValues("Sales", index.rows).descendants).length;
     for (var i = 0; i < len; i++){
         if(Object.keys(pivot.getRowValues("Sales", index.rows).descendants)[i].split(":::").length == level){
             var key = Object.keys(pivot.getRowValues("Sales", index.rows).descendants)[i];
             vals.push(pivot.getRowValues("Sales", index.rows).descendants[key])
         }
     }

     setHighChart(dataProvider, vals, index, columnList);
}

function getLevelLabels(columnChilds, level, targetLevel) {
     var list = [];
     for (var i = 0, len = columnChilds.length; i < len; i++) {
         if(level == targetLevel){
             list.push(columnChilds[i].label)
         } else if(level < targetLevel && columnChilds[i].hasOwnProperty("childrens")) {
             var levelLabels = getLevelLabels(columnChilds[i].childrens, level + 1, targetLevel)
             list.push.apply(list, levelLabels);
         }
     }
     return list;
}
```


#### Chart creation function

```js
function setHighChart(provider, vals, index, columnLabels) {
     var subtitle;

     if(Object.keys(index.rows)[0] == "__sum"){
         subtitle = "Full Summary"
     } else if(index.rows.model){
         subtitle = index.rows.model
     } else {
         subtitle = index.rows.manufacturer
     }

     var categories = provider.getFieldValues("Sale Date");
     var diVal = provider.getFieldValues("Sales Volume");
     $.each(diVal, function (k, v) {
         if (v == undefined)
             diVal[k] = null;
     });
 
     $('#container').highcharts({
         title: {
             text: 'Vehicle sales performance',
             x: -20
         },
         subtitle: {
             text:subtitle,
             x: -20
         },
         xAxis: {
             categories: columnLabels,
             crosshair: true
         },
         yAxis: [{
             title: {
                 text: 'Unit (unit)'
             },
             labels: {
                 format: '{value}'
             }
         }],
         tooltip: {
             shared: true // Display values from multiple columns in one row
         },
         legend: {
             enabled : false
         },
         series: [{
             name: "Sales",
             data: vals,
             tooltip: {
                 valueSuffix: "large"
             }
         }],
         chart: {
             type: 'column',
             events: {
             }
         }
     });
}
```