Apply Flexmonster’s number formatting to Google Charts

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 apply Flexmonster's number formatting to Google Charts</h2>
  <p>
    When integrating with Google Charts, you can apply Flexmonster's number
    formatting to the created chart. It's possible with our Connector for Google
    Charts and the
    <a
      href="https://www.flexmonster.com/doc/integration-with-google-charts/#number-formatting"
      target="_blank"
    >methods it provides</a>. These methods convert the component's number format 
    to a Google Charts' format string.
  </p>
  <p>
    Switch to the JavaScript box and see how number formatting is applied to
    Google Charts:
  </p>
  <ul>
    <li>
      Lines 74-76 - setting the number format for <code>Price</code> and
      <code>Discount</code> fields.
    </li>
    <li>Line 89 - setting the number format for hAxis number labels.</li>
  </ul>
  <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",
  toolbar: true,
  height: 290,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
          uniqueName: "Price",
          format: "currency"
        },
        {
          uniqueName: "Discount",
          format: "currency"
        }
      ]
    },
    formats: [{
      name: "currency",
      thousandsSeparator: " ",
      decimalSeparator: ".",
      decimalPlaces: 2,
      maxDecimalPlaces: -1,
      maxSymbols: 20,
      currencySymbol: "$",
    }]
  },
  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: "bar"
      },
      drawChart,
      drawChart
    );
  }
}

function drawChart(chartConfig, rawData) {
	let gridLineColor = "#e7e7e7"
  let data = google.visualization.arrayToDataTable(chartConfig.data);
  let formatter = new google.visualization.NumberFormat(pivot.googlecharts.getNumberFormat(rawData.meta.formats[0]));
  formatter.format(data, 1);
  formatter.format(data, 2);

  let options = {
    title: chartConfig.options.title,
    chartArea: { width: '75%', height: '90%' },
    colors: ['#082E6C', '#Ed7377', '#f4b400'],
    fontSize: 15,
   ...