Flexmonster - Integration with Google Charts

Demos

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 class="demo-box">
  <div class="demo-title">Income, Expenses, and Profit</div>
  <div id="googlechart-column-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title">Top 5 Countries by Sales</div>
  <div id="googlechart-pie-container"></div>
</div>

CSS

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

.demo-box {
  background-color: #fafafa;
  position: relative;
  padding: 20px 20px 20px 20px;
  border: 1px solid #e9e9e9;
  margin-bottom: 20px;
}

.demo-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #555;
}

#pivot-container {
  margin-bottom: 20px;
}

/** For the background color of Google Charts 
 * (for material design charts, it can't be changed via options, only via CSS)
 */
#googlechart-column-container > div > div > svg > g:nth-child(2) > rect:nth-child(1) {
  fill: #fafafa !important;
}

#googlechart-pie-container > div > div:nth-child(1) > div > svg > rect {
  fill: #fafafa !important;
}

/* For the bottom line on the column chart */
#googlechart-column-container > div > div > svg > g:nth-child(3) > line:nth-child(1) {
  stroke: #e0e0e0;
}

/* For text on xAxis of the column chart */
#googlechart-column-container > div > div > svg > g:nth-child(6) > text:nth-child(10) {
  color: #555;
  fill: rgb(117, 117, 117);
  font-family: Roboto;
  font-size: 12px;
}

#googlechart-pie-container > div > div:nth-child(n) > div > svg > g:nth-child(n) > g:nth-child(n) > g > text {
  color: #555;
  fill: rgb(117, 117, 117);
  font-family: Roboto;
  font-size: 12px;
}

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 350,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  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: "Expenses",
          format: "currency",
        },
        {
          uniqueName: "Profit",
          formula: 'sum("Income") - sum("Expenses")',
          individual: true,
          caption: "Profit",
          format: "currency",
        },
      ],
    },
    formats: [{
      name: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 2,
    }, {
      name: "currency",
      currencySymbol: "$",
    }],
    options: {
      grid: {
        showHeaders: false,
      },
      showAggregationLabels: false,
    },
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    pivotTableReportComplete = true;
    createColumnChart();
    createPieChart();
  },
});

const colors = [
  "#4cbf8b",
  "#e8734c",
  "#ffcd4c",
  "#9875e3",
  "#4c9eff",
  "#8acfc3",
  "#cd97e6",
  "#f1d34c",
  "#65d2e7",
];

let pivotTableReportComplete = false;
let googleChartsLoaded = false;

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

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

function...