JavaScript Pivot Table with Google Charts

Flexmonster Pivot Table & Charts seamlessly integrates with Google Charts — a web service for data visualization. Using these tools together, you can create a well-designed interactive dashboard and embed it into any application.

Dashboard analytics is a perfect instrument to assist in making data-driven decisions. With its help, end-users can highlight specific metrics, answer complex business questions, and communicate insights to the audience.

Income, Expenses, and Profit

Dashboards with Flexmonster and Google Charts can be interactive: changes applied to the pivot table’s report are reflected in charts in an instant. Thankfully to this real-time behavior, end-users can look at the data from different angles on the fly.

Top 5 Countries by Sales

Edit in JSfiddle Get Free Trial

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  width: "100%",
  height: 350,
  toolbar: true,
  report: {
    "dataSource": {
      "type": "json",
      "filename": "data/demos/googlecharts-demo-data.json",
    },
    "slice": {
      "rows": [{
        "uniqueName": "Date.Month"
      }],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
          "uniqueName": "Income",
          "formula": "sum(\"Sales\") * sum(\"Unit Price\")",
          "individual": true,
          "caption": "Income",
          "format": "currency"
        },
        {
          "uniqueName": "Sales",
          "active": false,
          "format": "currency"
        },
        {
          "uniqueName": "Expenses",
          "format": "currency"
        },
        {
          "uniqueName": "Profit",
          "formula": "sum(\"Income\") - sum(\"Expenses\")",
          "individual": true,
          "caption": "Profit",
          "format": "currency"
        }
      ]
    },
    "formats": [{
        "name": "",
        "maxDecimalPlaces": 2
      },
      {
        "name": "currency",
        "decimalPlaces": 1,
        "currencySymbol": "$"
      }
    ],
    "options": {
      "grid": {
        "showHeaders": false
      },
      "showAggregationLabels": false
    }
  },

  reportcomplete: function() {
    pivot.off("reportcomplete");
    pivotTableReportComplete = true;
    createGoogleChart();
    createPieChart();

  }
});
var pivotTableReportComplete = false;
var googleChartsLoaded = false;

google.charts.load('current', {
  'packages': ['corechart', 'bar']
});
google.charts.setOnLoadCallback(onGoogleChartsLoaded);

function onGoogleChartsLoaded() {
  googleChartsLoaded = true;
  if (pivotTableReportComplete) {
    createGoogleChart();
    createPieChart();
  }
}

function createGoogleChart() {
  if (googleChartsLoaded) {
    pivot.googlecharts.getData({
        type: "column"
      },
      drawChart,
      drawChart
    );
  }
}

function drawChart(_data) {
  var data = google.visualization.arrayToDataTable(_data.data);
  var formatter = new google.visualization.NumberFormat({
    fractionDigits: 2,
    prefix: '$'
  });
  formatter.format(data, 1);
  formatter.format(data, 2);
  formatter.format(data, 3);

  var options = {
    fontName: 'SERIF TYPEFACE',
    chartArea: {
      height: '100%'
    },
    height: 300,
    colors: ["#00a45a", "#df3800", "#6d3bd8", "#ffb800", 
     "#0075ff", "#db0069", "#ffb800", "#00c2ff"],
    titleTextStyle: {
      fontName: "SERIF TYPEFACE",
      italic: false,
      fontSize: 18
    }
  };
  var chart = new google.charts.Bar(document.getElementById('googlechart-container-1'));
  chart.draw(data, options);
}


function createPieChart() {
  if (googleChartsLoaded) {
    pivot.googlecharts.getData({
        type: "pie",
        "slice": {
          "rows": [{
            "uniqueName": "Country",
            "filter": {
              "measure": {
                "uniqueName": "Sales"
              },
              "query": {
                "top": 5
              }
            }
          }],
          "columns": [{
            "uniqueName": "[Measures]"
          }],
          "measures": [{
            "uniqueName": "Sales"
          }]
        }

      },
      drawPieChart,
      drawPieChart
    );
  }
}

function drawPieChart(_data) {
  var data = google.visualization.arrayToDataTable(_data.data);
  var options = {
    legend: {
      position: 'bottom'
    },
    height: 300,
    pieSliceText: 'none', // remove text from pie slices
    pieHole: 0.35,
    chartArea: {
      height: '85%',
      top: 0
    },
    pieSliceBorderColor: "none",
    colors: ["#00a45a", "#df3800", "#6d3bd8", "#ffb800", 
    "#0075ff", "#db0069", "#ffb800", "#00c2ff"]
  };

  var pieChartContainer = document.getElementById('googlechart-container-2');
  var chart = new google.visualization.PieChart(pieChartContainer);
  chart.draw(data, options);
}

<div id="pivot-container" style="margin-bottom:50px;"></div>
<h2>
  Income, Expenses, and Profit
</h2>
<div id="googlechart-container-1" style="height:350px; margin-bottom:50px;"></div>

<h2>
  Top 5 Countries by Sales
</h2>

<div id="googlechart-container-2" style="height:350px;"></div>

@import url('https://fonts.googleapis.com/css?family=Poppins');

h2 {
    position: relative;
    font-style: normal;
    font-weight: normal;
    color: #000;
    left: 10px;
    bottom: 11px;
}

With our Integration with Google Charts guide, you can learn how to configure a dashboard with Flexmonster and Google Charts.

The entire process is straightforward: add the pivot table and charts to the web page and make both components communicate via the specially prepared charting connector.

JavaScript Pivot Table with Google Charts

See our live examples