Donut chart: with options.slice parameter

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>
  <p>
    By default,
    <a
      href="https://www.flexmonster.com/api/all-methods-google-charts/"
      target="_blank"
    >the Connector for Google Charts</a>
    prepares the data based on the current slice in Flexmonster Pivot. In this
    example, the data for the slice is specified using the
    <a
      href="https://www.flexmonster.com/api/googlecharts-getdata/#options-slice"
      target="_blank"
      >options.slice</a
    > parameter (lines 59-75 in the JavaScript box).
  </p>
  <p>
    If <code>options.slice</code> is defined, the chart will not respond to
    further slice changes on the grid, which means data shown on the chart will
    be static.
  </p>
</div>

<div id="pivot-container"></div>
<div id="googlechart-container" style="height:250px;"></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",
          filter: {
            exclude: ["Australia"],
          },
        },
      ],
      columns: [
        {
          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(
      {
        type: "pie",
        slice: {
          rows: [
            {
              uniqueName: "Category",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Size",
            },
          ],
        },
      },
      drawChart,
      drawChart,
    )
  }
}

function drawChart(chartConfig) {
  let data = google.visualization.arrayToDataTable(chartConfig.data)

  let options = {
    chartArea: { width: '70%', height: '90%' },
    colors: ['#97DFFC', '#858AE3', '#613DC1', '#4E148C', '#2C0735'],
    fontSize: 15,
    legend: {
      position: 'left'
    }, 
    fontName: "sans-serif",
   ...