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

Edit in JSfiddle Get Free Trial

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",
        },
        {
          uniqueName: "Revenue",
          aggregation: "sum",
          format: "currency",
          active: false
        },
      ],
      sorting: {
        column: {
          type: "desc",
          tuple: [],
          measure: {
            uniqueName: "Answered Calls",
            aggregation: "sum",
          },
        },
      },
    },
    formats: [{
        name: "",
        thousandsSeparator: ","
      },
      {
        name: "currency",
        decimalSeparator: ".",
        decimalPlaces: 2,
        currencySymbol: "$",
      }
    ],
    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",
    ],
    lang: {
      thousandsSep: ','
    },
    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, rawData) {
  let currencyFormat = rawData.meta.formats.find(format => format.name == "currency");
  chartData.xAxis.title.enabled = false;
  chartData.legend = {
    enabled: false,
  };
  if (chartData.yAxis == undefined) chartData.yAxis = {};

  for (let i = 0; i < chartData.yAxis.length; i++) {
    chartData.yAxis[i].labels = {
      format: pivot.highcharts.getAxisFormat(currencyFormat)
    }
  }

  for (let i = 0; i < chartData.series.length; i++) {
    chartData.series[i].tooltip = {
      pointFormat: '{series.name}: <b>' + pivot.highcharts.getPointYFormat(currencyFormat) + '</b><br/>'
    }
  }

  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.

JavaScript Pivot Table with Highcharts

See our live examples