Bar chart: withDrilldown option

Integration with Highcharts

by abufiddle

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.highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<table cellpadding="10">
	<tr>
		<td>
			<div id="pivot-container"></div>
		</td>
	</tr>
	<tr>
		<td>
			<div id="highcharts-container" style="width: 100%; height: 300px; display: inline-block;"></div>
		</td>
	</tr>
</table>

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getJSONData()
    },
    slice: {
      rows: [{
        uniqueName: "Region"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Quantity"
      }, {
        uniqueName: "Price"
      }, {
        uniqueName: "Discount"
      }],
    },
    options: {
      viewType: "grid",
      configuratorActive: false,
      grid: {
        type: "compact",
        showHeaders: false
      }
    }
  },
  height: 280,
  toolbar: true,
  reportcomplete: function(args1, args2) {
  debugger;
    pivot.off("reportcomplete");
    createBarWithDrilldown();
  }
});

function createBarWithDrilldown() {

  pivot.highcharts.getData(
    {
      type: "bar", 
      withDrilldown: true,
      slice: {
        rows: [{uniqueName: "Region"}],
        columns: [{uniqueName: "[Measures]"}, {uniqueName: "Color"}],
        measures: [{uniqueName: "Price"}]
      }
    },
    createAndUpdateChart,
    createAndUpdateChart
  );
}

function createAndUpdateChart(data) {
  data.title.text = "With Drilldown";
  Highcharts.chart('highcharts-container', data);
}

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"
  },
  {
    "Category": "Accessories",
    "Color": "white",
    "Business Type": "Specialty Bike Shop",
    "Region": "North",
    "Price": 242,
    "Quantity": 855,
    "Discount": 37,
    "Date": "1/14/2011"
  },
  {
    "Category": "Accessories",
   ...