Get Free Trial
List of all demos

JavaScript Pivot Table with Highcharts

Flexmonster Pivot Table & Charts seamlessly integrates with Highcharts — a software library for charting.

It is easy to open up new possibilities for smart business analytics and reporting with Flexmonster JS pivot grid and Highcharts. Create a data dashboard — an essential tool for monitoring business objectives and performance.

Requests vs Answered Calls

On the dashboard, you can see all the vital metrics and KPIs at a glance. To look at the data from another perspective, you can slice & dice it on the grid and display updated information in the charts.

Revenue vs Support Cost
Customer Satisfaction

    var pivot = new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
      height: 300,
      toolbar: true,
      report: {
        dataSource: {
          "filename": "data/demos/highcharts-demo-data.json",
        },
        slice: {
          "rows": [{
            "uniqueName": "Date.Month"
          }],
          "columns": [{
            "uniqueName": "[Measures]"
          }],
          "measures": [{
              "uniqueName": "Requests",
              "aggregation": "sum"
            },
            {
              "uniqueName": "Answered Calls",
              "aggregation": "sum"
            }
          ],
          "sorting": {
            "column": {
              "type": "desc",
              "tuple": [],
              "measure": {
                "uniqueName": "Answered Calls",
                "aggregation": "sum"
              }
            }
          }
        },
        "options": {
          "showHeaders": false
        }
      },
      reportcomplete: function() {
        pivot.off("reportcomplete");
        createComboChart();
        createBarChart();
        createPieChart();
      }
    });
    
    function createComboChart() {
      pivot.highcharts.getData({
          type: "line"
        },
        function(data) {
          data.xAxis.title.enabled = false;
          data.chart.style = {
            fontFamily: 'SERIF TYPEFACE'
          };
          data.title = {
            style: {
              fontSize: '16px',
              fontWeight: 'bold',
              textTransform: 'uppercase'
            }
          };
          data.xAxis.type = 'datetime';
          data.title.text = 'Requests vs Answered Calls';
          data.subtitle = {
            text: 'over months'
          };
          Highcharts.setOptions({
            colors: ['#ff3b1d', '#00b370', '#4f9da6', '#FF6B6B', 
            '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
          });
          Highcharts.chart('highcharts-container', data);
        },
        function(data) {
          data.xAxis.title.enabled = false;
          data.chart.style = {
            fontFamily: 'SERIF TYPEFACE'
          };
          data.title = {
            style: {
              fontSize: '16px',
              fontWeight: 'bold',
              textTransform: 'uppercase'
            }
          };
          data.xAxis.type = 'datetime';
          data.title.text = 'Requests vs Answered Calls';
          data.subtitle = {
            text: 'over months'
          };
          Highcharts.setOptions({
            colors: ['#ff3b1d', '#00b370', '#4f9da6', '#FF6B6B', 
            '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
          });
          Highcharts.chart('highcharts-container', data);
        }
      );
    }
    
    function createBarChart() {
      pivot.highcharts.getData({
          type: "column",
          slice: {
            "rows": [{
              "uniqueName": "Date.Month"
            }],
            "columns": [{
              "uniqueName": "[Measures]"
            }],
            "measures": [{
                "uniqueName": "Revenue",
                "aggregation": "sum"
              },
              {
                "uniqueName": "Support Cost",
                "aggregation": "sum"
              }
            ]
          }
        },
        function(data) {
          data.xAxis.title.enabled = false;
          data.legend = {
            enabled: false
          };
          data.chart.style = {
            fontFamily: 'SERIF TYPEFACE'
          };
          data.title = {
            style: {
              fontSize: '16px',
              fontWeight: 'bold',
              textTransform: 'uppercase'
            }
          };
          data.xAxis.type = 'datetime';
          data.title.text = 'Revenue vs Support Cost';
          data.subtitle = {
            text: 'over months'
          };
          Highcharts.setOptions({
            colors: ['#00983e', '#ff9000', '#4f9da6', '#FF6B6B', 
            '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
          });
    
          Highcharts.chart('highcharts-bar-container', data);
        },
        function(data) {
          data.xAxis.title.enabled = false;
          data.legend = {
            enabled: false
          };
          data.chart.style = {
            fontFamily: 'SERIF TYPEFACE'
          };
          data.title = {
            style: {
              fontSize: '16px',
              fontWeight: 'bold',
              textTransform: 'uppercase'
            }
          };
          data.xAxis.type = 'datetime';
          data.title.text = 'Revenue vs Support Cost';
          data.subtitle = {
            text: 'over months'
          };
          Highcharts.setOptions({
            colors: ['#00983e', '#ff9000', '#4f9da6', '#FF6B6B', 
            '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
          });
          Highcharts.chart('highcharts-bar-container', data);
        }
      );
    }
    
    function createPieChart() {
      pivot.highcharts.getData({
          type: "pie",
          slice: {
            "rows": [{
              "uniqueName": "Customer Satisfaction"
            }],
            "columns": [{
              "uniqueName": "[Measures]"
            }],
            "measures": [{
              "uniqueName": "Answered Calls",
              "aggregation": "sum"
            }]
          }
        },
        function(data) {
          data.chart.style = {
            fontFamily: 'SERIF TYPEFACE'
          };
          data.title = {
            style: {
              fontSize: '16px',
              fontWeight: 'bold',
              textTransform: 'uppercase'
            }
          };
          data.title.text = 'Customer Satisfaction';
          Highcharts.setOptions({
            colors: ['#a9aaaa', '#ffa836', '#ff3b1d', '#00b370', 
            '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
          });
    
          Highcharts.chart('highcharts-pie-container', data);
        },
        function(data) {
          data.chart.style = {
            fontFamily: 'SERIF TYPEFACE'
          };
          data.title = {
            style: {
              fontSize: '16px',
              fontWeight: 'bold',
              textTransform: 'uppercase'
            }
          };
          data.title.text = 'Customer Satisfaction';
          Highcharts.setOptions({
            colors: ['#a9aaaa', '#ffa836', '#ff3b1d', '#00b370', 
            '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
          });
          Highcharts.chart('highcharts-pie-container', data);
        }
      );
    }
    
    <div id="pivot-container"></div>
    
    <div style="margin-top: 50px;" id="highcharts-container"></div>
    <div style="margin-top: 30px;" id="highcharts-bar-container"></div>
    <div style="margin-top: 30px; padding-bottom: 25px;" id="highcharts-pie-container"></div>
    

    Learn how to create a ready-to-use dashboard equipped with interactive features of the pivot table and charts by following the step-by-step integration with Highcharts guide.