Flexmonster - Integration with Highcharts

Demos

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/4.2.2/highcharts.js"></script>
<div id="pivot-container"></div>
<div id="highcharts-container" style="width: 100%; height: 300px; display: inline-block;padding-top:20px;"></div>

JavaScript

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

function createHighchartWithTwoYAxis() {
  pivot.highcharts.getData({
    type: "column",
    slice: {
      rows: [{uniqueName: "Region"}],
      columns: [{uniqueName: "[Measures]"}],
      measures: [{uniqueName: "Price"}, {uniqueName: "Quantity"}],
      sorting: {
        column: {
          type: "desc",
          tuple: [],
          measure: "Price"
        }
      }
    }
  }, function(data) {
    if (data.series != undefined) {
      data.series[data.series.length - 1].type = "spline";
    }
    Highcharts.chart('highcharts-container', data);
  }, function(data) {
    if (data.series != undefined) {
      data.series[data.series.length - 1].type = "spline";
    }
    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",
   ...