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.

Linking RealGrid and RealChart

RealChart can be found on the https://www.realchart.co.kr/ (opens in a new tab) page.

Import pivot data and label values

When the focus moves, the onCurrentChanged (opens in a new tab) event occurs and the getAllValues (opens in a new tab) event occurs. You can get the value with getRowValues (opens in a new tab).

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

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

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: {
             }
         }
     });
}

Pivot regions Pivot data details