Apply Flexmonster’s number formatting to FusionCharts

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 apply Flexmonster's number formatting to FusionCharts</h2>
  <p>
    When integrating with FusionCharts, you can apply Flexmonster's number
    formatting to the created chart. It's possible with the
    <a
      href="https://www.flexmonster.com/doc/integration-with-fusioncharts/#number-formatting"
      target="_blank"
    >fusioncharts.getNumberFormat()</a> method, which is provided by Flexmonster 
    FusionCharts Connector. This method converts Flexmonster's number format 
    to a FusionCharts format object.
  </p>
  <p>
    In this example, we've set the <code>"currency"</code> format for the
    <code>Discount</code> field in Flexmonster. Check out lines 71-74 in the
    JavaScript box to see how this format is applied to FusionCharts.
  </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: 20px;
}

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  toolbar: true,
  height: 400,
  report: {
    dataSource: {
      filename: "data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Discount",
          format: "currency",
        },
      ],
    },
    formats: [
      {
        name: "currency",
        thousandsSeparator: " ",
        decimalSeparator: ".",
        decimalPlaces: 2,
        currencySymbol: "$",
      },
    ],
  },
  reportcomplete: function () {
    pivot.off("reportcomplete");
    createFusionChart();
  },
});

let chart;

function createFusionChart() {
  chart = new FusionCharts({
    type: "column2d",
    renderAt: "chartContainer",
    width: "100%",
    height: 500,
  });

  pivot.fusioncharts.getData(
    { type: "column2d" },
    (chartConfig, rawData) => {
      applyNumberFormatting(chartConfig, rawData);
      chartConfig.chart.theme = "fusion";
      chart.setJSONData(chartConfig);
      chart.render();
    },
    (chartConfig, rawData) => {
      applyNumberFormatting(chartConfig, rawData);
      chart.setJSONData(chartConfig);
      chart.setChartAttribute("theme", "fusion")
    },
  );
}

function applyNumberFormatting(chartConfig, rawData) {
  let format = pivot.fusioncharts.getNumberFormat(rawData.meta.formats[0]);
        for (let prop in format) {
          chart[prop] = format[prop];
  }
  Object.assign(chartConfig.chart, format);
}