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

    const pivot = new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      height: 300,
      licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
      report: {
        dataSource: {
          type: "json",
          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");
        setGlobalChartsOptions();
        createLineChart();
        createColumnChart();
        createPieChart();
      },
    });
    
    function setGlobalChartsOptions() {
      Highcharts.setOptions({
        colors: [
          "#4cbf8b",
          "#e8734c",
          "#ffcd4c",
          "#9875e3",
          "#4c9eff",
          "#8acfc3",
          "#cd97e6",
          "#f1d34c",
          "#65d2e7",
        ],
        chart: {
          plotBackgroundColor: "#fafafa",
          backgroundColor: "#fafafa",
          style: {
            fontFamily: "Serif Typeface",
          },
        },
      });
    }
    
    function createLineChart() {
      pivot.highcharts.getData(
        {
          type: "line",
        },
        drawLineChart,
        updateLineChart
      );
    }
    
    function drawLineChart(chartData) {
      chartData.xAxis.title.enabled = false;
      chartData.xAxis.type = "datetime";
      Highcharts.chart("highcharts-container", chartData);
    }
    
    function updateLineChart(chartData) {
      drawLineChart(chartData);
    }
    
    function createColumnChart() {
      pivot.highcharts.getData(
        {
          type: "column",
          slice: {
            rows: [
              {
                uniqueName: "Date.Month",
              },
            ],
            columns: [
              {
                uniqueName: "[Measures]",
              },
            ],
            measures: [
              {
                uniqueName: "Revenue",
                aggregation: "sum",
              },
              {
                uniqueName: "Support Cost",
                aggregation: "sum",
              },
            ],
          },
        },
        drawColumnChart,
        updateColumnChart
      );
    }
    
    function drawColumnChart(chartData) {
      chartData.xAxis.title.enabled = false;
      chartData.legend = {
        enabled: false,
      };
      chartData.xAxis.type = "datetime";
      Highcharts.chart("highcharts-column-container", chartData);
    }
    
    function updateColumnChart(chartData) {
      // Here you can add your own logic for updating the chart
    }
    
    function createPieChart() {
      pivot.highcharts.getData(
        {
          type: "pie",
          slice: {
            rows: [
              {
                uniqueName: "Customer Satisfaction",
              },
            ],
            columns: [
              {
                uniqueName: "[Measures]",
              },
            ],
            measures: [
              {
                uniqueName: "Answered Calls",
                aggregation: "sum",
              },
            ],
          },
        },
        drawPieChart,
        updatePieChart
      );
    }
    
    function drawPieChart(chartData) {
      Highcharts.chart("highcharts-pie-container", chartData);
    }
    
    function updatePieChart(chartData) {
      // Here you can add your own logic for updating the chart
    }
    
    <div id="pivot-container"></div>
    
    <div class="demo-box">
      <div class="demo-title"><strong>Requests vs Answered Calls</strong></div>
      <div id="highcharts-container"></div>
    </div>
    
    <div class="demo-box">
      <div class="demo-title"><strong>Revenue vs Support Cost</strong></div>
      <div id="highcharts-column-container"></div>
    </div>
    
    <div class="demo-box">
      <div class="demo-title"><strong>Customer Satisfaction</strong></div>
      <div id="highcharts-pie-container"></div>
    </div>
    
    .demo-box {
      background-color: #fafafa;
      position: relative;
      padding: 40px 30px 30px 30px;
      border: 1px solid #e9e9e9;
      margin-bottom: 20px;
      margin-top: 40px;
    }
    
    .demo-title {
      font-size: 18px;
      margin-bottom: 30px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #555;
    }
    

    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.