Chart map: worldwithcountries

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.candy.js"></script>

<div>
  <h2>How to create a chart map: worldwithcountries</h2>
  <p>
    Flexmonster Connector for FusionCharts can prepare your data for the world
    map with countries. To create a chart of this type, you need to:
  </p>
  <ul>
    <li>
      Define country names in your dataset according to the
      <a
        href="https://www.fusioncharts.com/dev/maps/spec-sheets/worldwithcountries/#list-of-entities"
        target="_blank"
      >FusionCharts documentation</a> (the <strong>Label</strong> column). Then 
      FusionCharts will be able to recognize countries and display them on the map chart.
    </li>
    <li>
      Set the <code>options.type</code> parameter of
      <a
        href="https://www.flexmonster.com/doc/integration-with-fusioncharts/#!fusioncharts-connector"
        target="_blank"
      >fusioncharts.getData()</a> to <code>maps/worldwithcountries</code> 
      (lines 36 and 44 in the JavaScript box).
    </li>
  </ul>
  <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="fusionchart-container"></div>

CSS

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

JavaScript

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

let map;

function createFusionMap() {
  map = new FusionCharts({
    type: "maps/worldwithcountries",
    renderAt: "fusionchart-container",
    width: "100%",
    height: 500
  });
  
  pivot.fusioncharts.getData(
  	{
    	type: "maps/" + map.chartType()
  	}, 
    (chartConfig) => {
      drawChart(chartConfig);
      map.render();
    }, 
    drawChart
  );
}

function drawChart(chartConfig) {
	chartConfig.chart.legendPosition = "top";
  chartConfig.chart.theme = "candy";
  chartConfig.chart.entityFillHoverColor = "#212a33",
  chartConfig.chart.nullEntityColor = "#C2C2D6";
  chartConfig.chart.nullEntityAlpha = "50";
  chartConfig.colorrange = {
    minvalue: chartConfig.extradata.minValue,
    startlabel: "Low",
    endlabel: "High",
    code: "#8acfc3",
   	gradient: "1",
    color: [
        {
          minvalue: chartConfig.extradata.minValue,
          maxvalue: 800000,
          code: "#8acfc3",
        },
        {
          minvalue: 800000,
          maxvalue: 900000,
          code: "#4cbf8b",
        },
        {
          minvalue: 900000,
          maxvalue: 1000000,
          code: "#ffcd4c",
        },
        {
          minvalue: 1000000,
          maxvalue: 1100000,
          code: "#faa307",
        },
        {
          minvalue:...