Stacked bar chart

Integration with Google Charts

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.googlecharts.js"></script>

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div>
  <h2>How to create a stacked bar chart</h2>
  <p>
    Flexmonster Connector for Google Charts can prepare your data for the
    <a
      href="https://www.flexmonster.com/doc/integration-with-google-charts/#!supported-charts"
      target="_blank"
    >predefined set of charts</a>. To create a chart that's not in this list, 
    you need to preprocess your data manually. It can be done using the
    <a
      href="https://www.flexmonster.com/doc/integration-with-google-charts/#!prepareDataFunction"
      target="_blank"
    >prepareDataFunction</a> from the Connector for Google Charts.
  </p>
  <p>
    In this example, we've created a stacked bar chart. For this type of chart,
    the data format should be an array of arrays. Check out lines 60-90 in the
    JavaScript box to see how the <code>prepareDataFunction</code> is defined
    for the stacked bar chart.
  </p>
  <p>
    <a
      href="https://www.flexmonster.com/doc/integration-with-google-charts/"
      target="_blank"
    >Visit our docs to learn more about the integration with Google Charts</a>.
  </p>
</div>

<div id="pivot-container"></div>

<div id="chartContainer"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

#chartContainer {
  margin-top: 20px;
}

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: 300,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
    	rows: [
      	{
      		uniqueName: "Color",
          filter: {
          	exclude: [ "purple", "yellow" ]
          }
      	}
     	],
      columns: [
     		{
      		uniqueName: "Category",
          filter: {
          	exclude: [ "category.[cars]" ]
          }
        },
        {
        	uniqueName: "[Measures]"
        }
      ],
     	measures: [{
      	uniqueName: "Price"
      }]
    }
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    pivotTableReportComplete = true;
    createGoogleChart();
  }
});

let pivotTableReportComplete = false;
let googleChartsLoaded = false;

google.charts.load("52", {
  packages: ["corechart"]
});
google.charts.setOnLoadCallback(onGoogleChartsLoaded);

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

function createGoogleChart() {
  if (googleChartsLoaded) {
    pivot.googlecharts.getData({
    	prepareDataFunction: (data, options) => {
      	let output = {};
        let table = [];
        for (let i = 0; i < data.data.length; i++) {
        	if (i == 0) {
         		let xAxisName = (data.meta.r0Name != undefined) ? data.meta.r0Name : "";
            let headerRow = [xAxisName];
           	table.push(headerRow);
          }

          let record = data.data[i];

          if (record.r0 == undefined && record.c0 != undefined && record.v0 != undefined) {
          	table[0].push(record.c0);
          }

          if (record.r0 == undefined || record.c0 == undefined || record.v0 == undefined) 
          	continue;

          let _record = table[table.length -...