Column chart: prepareDataFunction

Integration with Highcharts

by Dongor7

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>

<div id="pivot-container"></div>

<button id="addPie">Add pie</button>
<button id="addPie2">Add pie 2</button>
<div style="margin-top: 30px; padding-bottom: 25px;" id="highcharts-pie-first-container"></div>
<div style="margin-top: 30px; padding-bottom: 25px;" id="highcharts-pie-second-container"></div>

</div>

CSS

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

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: 300,
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
      "rows": [{
        "uniqueName": "Date.Month"
      }],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "reportFilters": [{
        "uniqueName": "Customer Satisfaction",
        "filter": {
          "members": ["customer satisfaction"]
        }
      }],
      "measures": [{
          "uniqueName": "Requests",
          "aggregation": "sum"
        },
        {
          "uniqueName": "Answered Calls",
          "aggregation": "sum"
        }
      ],
      "sorting": {
        "column": {
          "type": "desc",
          "tuple": [],
          "measure": {
            "uniqueName": "Answered Calls",
            "aggregation": "sum"
          }
        }
      }
    },
    "options": {
      "showHeaders": false
    }
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
  }
});

let firstSlice = null

addPie.addEventListener('click', () => {
  firstSlice = pivot.getReport().slice  
  createPieChart('highcharts-pie-first-container', firstSlice)

})

addPie2.addEventListener('click', () => {
	createPieChart('highcharts-pie-first-container', firstSlice)
  createPieChart('highcharts-pie-second-container', pivot.getReport().slice)
})
  
function createPieChart(id, slice) {
  pivot.highcharts.getData({
      type: "pie",
      slice,
    },
    function(data) {
      data.chart.style = {
        fontFamily: 'SERIF TYPEFACE'
      };
      data.title = {
        style: {
          fontSize: '16px',
          fontWeight: 'bold',
          textTransform: 'uppercase'
        }
      };
      data.title.text = 'Customer Satisfaction';
      Highcharts.setOptions({
        colors: ['#a9aaaa', '#ffa836', '#ff3b1d', '#00b370', '#64E572',...