FusionCharts - Gallery Example - Marimekko Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

by handsoncode

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=8232"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js?cacheBust=8232"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=8232"></script>
<!-- 
Marimekko chart example
-->

<div id="chart-container">FusionCharts will render here</div>

CSS

body {
  padding: 0;
  margin: 0;
  background: white;
}

JavaScript

FusionCharts.ready(function() {
  var salesByBrandChart = new FusionCharts({
    type: 'marimekko',
    renderAt: 'chart-container',
    width: '757',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Top 3 Electronic Brands in Top 3 Revenue Earning States",
        "subcaption": "Last month",
        "aligncaptiontocanvas": "0",
        "yaxisname": "Statewise Sales (in %)",
        "xaxisname": "Brand",
        "numberprefix": "$",
        "valueBgColor": "#FFFFFF",
        "valueBgAlpha": "60",
        "showPlotBorder": "1",
        "plotBorderThickness": "0.25",
        "showxaxispercentvalues": "1",
        "showsum": "1",
        //Custom tool-text string built using a combination of HTML and chart macro variables
        "plottooltext": "<div id='nameDiv' style='font-size: 14px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block;'>$label :</div>{br}State: <b>$seriesName</b>{br}Sales : <b>$dataValue</b>{br}Market share in $seriesName : <b>$percentValue</b>",
        "theme": "fint"
      },
      "categories": [{
        "category": [{
          "label": "Bose"
        }, {
          "label": "Dell"
        }, {
          "label": "Apple"
        }]
      }],
      "dataset": [{
        "seriesname": "California",
        "data": [{
          "value": "335000"
        }, {
          "value": "225100"
        }, {
          "value": "164200"
        }]
      }, {
        "seriesname": "Washington",
        "data": [{
          "value": "215000"
        }, {
          "value": "198000"
        }, {
          "value": "120000"
        }]
      }, {
        "seriesname": "Nevada",
        "data": [{
          "value": "298000"
        }, {
          "value": "109300"
        }, {
          "value": "153600"
        }]
      }]
    }
  }).render();

});