Integration with d3.js chart

Other charting libraries

by juvian

HTML

<script src="https://s3.amazonaws.com/flexmonster/2.3/flexmonster.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="//d3js.org/d3.v4.min.js"></script>

<table>
  <tr>
    <td>
      <div id="pivot-container"></div>
    </td>
  </tr>
  <tr>
    <td>
      <svg id="d3Chart" width="650" height="230"></svg>
    </td>
  </tr>
</table>

CSS

table {
  width: 100%;
  border-collapse: collapse;
}
.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis--x path {
  display: none;
}

JavaScript

let pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    dataSource: {
      dataSourceType: "csv",
      filename: "data/data.csv"
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price"
      }],
      sorting: {
        column: {
          type: "desc",
          tuple: [],
          measure: "Price"
        }
      }
    },
    options: {
      grid: {
        showHeaders: false
      }
    }
  },
  height: 300,
  toolbar: true,
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createChart();
  }
});

function createChart() {
  pivot.getData(
  	{
      slice: {
        columns: [
          {uniqueName: "Country"}
        ]
      }
    }, 
    drawChart, 
    updateChart
  );		
}

function prepareDataFunction(rawData) {
  let data = [];
  for (let i = 0; i < rawData.data.length; i++) {
    let record = rawData.data[i];
    if (record["r0"] == undefined || record["v0"] == undefined) continue; //taking only facts for this sample
    let _record = {
      member: record["r0"],
      value: !isNaN(record["v0"]) ? record["v0"] : 0
    };
    data.push(_record);
  }			
  return data;
}
    
function drawChart(rawData) {
  console.log(rawData)
}

function updateChart(rawData) {
  d3.select("#d3Chart").select("g").remove();
  drawChart(rawData);
}