Integration with ECharts

Embedding Flexmonster

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script>
 <table>
	<tr>
		<td>
			<div id="pivot-container"></div>
		</td>
	</tr>
	<tr>
		<td>
			 <div id="main" style="height:400px;width:650px;"></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: "csv",
      filename: "data/data.csv"
    },
    slice: {
    	rows: [
            	{
                uniqueName: "Category"
              },
              {
                uniqueName: "Country"
              }
      ],
      measures: [
            {
                uniqueName: "Price",
                aggregation: "sum",
                active: true
            },
      ]
    },
    options: {
      grid: {
        showHeaders: false
      }
    }
  },
  height: 300,
  toolbar: true,
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createChart();
  }
});

function createChart() {
  pivot.getData(
  	{ }, 
    drawChart, 
    updateChart
  );		
}

function prepareDataFunction(rawData) {
  var data = [];
  for (var i = 0; i < rawData.data.length; i++) {
    var record = rawData.data[i];
    if (record.r0 == undefined || record.v0 == undefined) continue; //taking only facts for this sample
    var rNo = Object.keys(record).length - 2
    var _record = {
      member: record['r' + rNo],
      value: !isNaN(record.v0) ? record.v0 : 0
    };
    data.push(_record);
  }			
  return data;
}

function drawChart(rawData) {
// based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));
	var data = prepareDataFunction(rawData);
          // specify chart configuration item and data
        var option = {
            tooltip: {},
            xAxis: {
                data: data.map(function(d) { return d.member; })
            },
            yAxis: {},
            series: [{
                name: 'Category',
                type: 'bar',
                data: data.map(function(d) { return d.value; })
            }]
        };
				console.log(option, 'option');
        // use configuration item and data specified to show chart
       ...