Sankey chart

Integration with Google Charts

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.googlecharts.js"></script>

<script src="https://www.gstatic.com/charts/loader.js"></script>

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

<div id="googlechart-container" style="height:250px;"></div>

CSS

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

#googlechart-container {
  margin-top: 20px;
}

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  toolbar: true,
  height: 400,
  report: {
    data: getData(),
    slice: {
      columns: [
        {
          uniqueName: "[Measures]",
        },
        {
          uniqueName: "to",
        },
      ],
      measures: [
        {
          aggregation: "sum",
          uniqueName: "value",
        },
      ],
      rows: [
        {
          uniqueName: "from",
        },
      ],
    },
    options: {
      grid: {
        showHeaders: false,
      },
    },
  },
  reportcomplete: function () {
    pivot.off("reportcomplete");
    pivotTableReportComplete = true;
    createGoogleChart();
  },
});

let pivotTableReportComplete = false;
let googleChartsLoaded = false;

google.charts.load("52", {
  packages: ["sankey", "corechart"]
});
google.charts.setOnLoadCallback(onGoogleChartsLoaded);

function onGoogleChartsLoaded() {
  googleChartsLoaded = true;
  if (pivotTableReportComplete) {
    createGoogleChart();
  }
}

function createGoogleChart() {
  if (googleChartsLoaded) {
    pivot.googlecharts.getData({}, drawSankeyChart, drawSankeyChart);
  }
}

function drawSankeyChart(chartConfig) {
  let data = google.visualization.arrayToDataTable(chartConfig.data);

  const colors = [
    "#a6cee3",
    "#b2df8a",
    "#fb9a99",
    "#fdbf6f",
    "#cab2d6",
    "#ffff99",
    "#1f78b4",
    "#33a02c",
  ];

  let options = {
    height: 400,
    sankey: {
      node: {
        colors: colors,
        label: {
          fontName: "sans-serif",
          fontSize: 14,
        },
      },
      link: {
        colorMode: "gradient",
        colors: colors,
      },
    },
  };

  let chart = new google.visualization.Sankey(
    document.getElementById("googlechart-container"),
  );
 ...