Get Free Trial
List of all demos

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

    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.