Mscombidy2d chart

Integration with FusionCharts

by Flexmonster Pivot Table

HTML

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

<script src="https://cdn.fusioncharts.com/fusioncharts/3.19.0/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/3.19.0/themes/fusioncharts.theme.fusion.js"></script>

<div>
  <h2>How to create a mscombidy2d chart</h2>
  <p>
    Flexmonster Connector for FusionCharts can prepare your data for the
    <a
      href="https://www.flexmonster.com/doc/integration-with-fusioncharts/#!supported-charts"
      target="_blank"
    >predefined set of charts</a>. To create a chart that's not in this list, you 
    need to preprocess your data manually. It can be done using the
    <a
      href="https://www.flexmonster.com/doc/integration-with-fusioncharts/#!prepareDataFunction"
      target="_blank"
    >prepareDataFunction</a> from the Connector for FusionCharts.
  </p>
  <p>
    In this example, we've created an mscombidy2d chart. Check out lines 48-93
    in the JavaScript box to see how the <code>prepareDataFunction</code> is
    defined for this chart.
  </p>
  <p>
    <a
      href="https://www.flexmonster.com/doc/integration-with-fusioncharts/"
      target="_blank"
    >Visit our docs to learn more about the integration with FusionCharts</a>.
  </p>
</div>

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

CSS

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

#chartContainer {
  margin-top: 20px;
}

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: 300,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [
      	{
        	uniqueName: "Country"
      	}
      ],
      columns: [
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
      	{
        	uniqueName: "Price"
      	},
      	{
      		uniqueName: "Quantity"
      	}
      ],
    }
  },
  reportcomplete: () => {
    pivot.off("reportcomplete");
    createFusionChart();
  }
});

function createFusionChart() {
  let chart = new FusionCharts({
    type: "mscombidy2d",
    renderAt: "chartContainer",
    width: "100%",
    height: "500",
    dataFormat: "json"
  });
  
  pivot.fusioncharts.getData({
    type: chart.chartType(),
    prepareDataFunction: (data, options) => {
      let output = {
        chart: {
          caption: data.meta.caption,
          xAxisName: (data.meta.r0Name != undefined) ? data.meta.r0Name : ((data.meta.c0Name != undefined) ? data.meta.c0Name : ""),
          pYAxisName: data.meta.v0Name,
          sYAxisName: data.meta.v1Name,
          theme: "fusion",
          drawCrossLine: "0",
          thousandSeparator: " "
        },
        categories: [
        	{
          	category: []
        	}
        ],
        dataset: [
        	{
          	seriesname: data.meta.v0Name,
          	data: []
        	}, 
          {
          	seriesname: data.meta.v1Name,
          	parentYAxis: "S",
          	renderAs: "line",
          	showValues: "0",
          	data: []
        	}
        ]
      };
      
      for (let i = 0; i < data.data.length; i++) {
        let record = data.data[i];
        if (record.r0 == undefined || record.r1 != undefined || record.v0 == undefined || record.v1 ==...