Sankey chart (using prepareDataFunction)

Integration with Highcharts

by Flexmonster Pivot Table

HTML

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

<div id="pivotContainer"></div>
<div id="chartContainer"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

#pivotContainer {
  margin-bottom: 20px;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: 300,
  report: {
    dataSource: {
      data: getData()
    },
    options: {
      grid: {
        type: "flat"
      }
    },
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createChart();
  }
});


function applyConfigs(config) {
  config.chart.style = {
    fontSize: "18px",
    fontFamily: "Arial, sans-serif"
  };
  config.legend =  {
    enabled: false
  }
}

function prepareDataFunction(rawData) {
  let data = [];
  for (let i = 0; i < rawData.data.length; i++) {
    let record = rawData.data[i];
    if (record.r0 == undefined || record.c0 == undefined) continue;
    let from = record.r0;
    let to = record.c0;
    let value = record.v0;
    data.push([from, to, value]);
  }
  return data;
}

function createChart() {
  
  pivot.highcharts.getData({
    slice: {
      rows: [
        {
          uniqueName: "from"
        },
      ],
      columns: [
        {
          uniqueName: "to"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "value",
          aggregation: "sum"
        },
      ]
    },
    prepareDataFunction: function(data, options) {
      let output = {
        chart: {
          type: "sankey"
        },
        title: {
          text: "Sankey Chart"
        },
        series: [
          {
            type: "sankey",
            name: "Sankey demo series",
            nodes: [
              {
                id: data.data[1].r0,
                color: "#ff595e"
              },
              {
                id: data.data[2].r0,
                color: "#ff924c"
              },
              {
                id: data.data[3].r0,
                color:...