Area 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 id="pivot-container"></div>

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

CSS

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

#googlechart-container {
  margin-top: 20px;
}

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  toolbar: true,
  height: 400,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
          uniqueName: "Price"
        },
        {
          uniqueName: "Quantity"
        }
      ]
    }
  },
  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({
        type: "area"
      },
      drawChart,
      drawChart
    );
  }
}

function drawChart(chartConfig) {
	let gridLineColor = "#e7e7e7";
  let data = google.visualization.arrayToDataTable(chartConfig.data);

  let options = {
    chartArea: { width: "75%", height: "85%" },
    fontSize: 15,
    fontName: "sans-serif",
    pointSize: 7,
    areaOpacity: 0.5,
    legend: {
      position: "bottom"
    },
    vAxis: {
    	gridlines: {
      	count: 6,
        color: gridLineColor
      },
      baselineColor: gridLineColor
    },
    hAxis: {
      textPosition: "none"
    },
    colors: ["#ffb800", "#df3800", "#66b9bf", "#eeaa7b", "#eee47b"],
    height: 400
  };

  let chart = new google.visualization.AreaChart(document.getElementById('googlechart-container'));
  chart.draw(data, options);
}