Bar chart

Integration with Google Charts

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<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>
<br />
<div id="googlechart-container" style="height:250px;"></div>

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      data: getJSONData()
    },
    slice: {
      rows: [
        {uniqueName: "Category"}
      ],
      columns: [
        {uniqueName: "[Measures]"}
      ],
      measures: [
        {uniqueName: "Price"},
        {uniqueName: "Quantity"},
        {uniqueName: "Discount"}
      ]
    },
    options: {
      grid: {
        showHeaders: false
      }
    }
  },
  height: 280,
  toolbar: true,
  reportcomplete: function() {
    pivot.off("reportcomplete");
    pivotTableReportComplete = true;
    createGoogleChart();
  }
});
var pivotTableReportComplete = false;
var googleChartsLoaded = false;

google.charts.load('current', {'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(_data) {
  var data = google.visualization.arrayToDataTable(_data.data);

  var options = {
  	title: "Values by Categories",
    legend: { position: 'top' }
  };

  var chart = new google.visualization.BarChart(document.getElementById('googlechart-container'));
  chart.draw(data, options);
}
    
function getJSONData() {
	return [
  {
    "Category": "Accessories",
    "Color": "red",
    "Business Type": "Specialty Bike Shop",
    "Region": "Center",
    "Price": 174,
    "Quantity": 225,
    "Discount": 23,
    "Date": "1/12/2011"
  },
  {
    "Category": "Accessories",
    "Color": "yellow",
    "Business Type": "Specialty Bike Shop",
    "Region": "East",
    "Price": 502,
    "Quantity": 90,
    "Discount": 17,
    "Date": "1/13/2011"
  },
  {
 ...