JSFiddle - React, Tailwind, and code Playground

by Swarnam Ramnarayanan

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var salesMap = new FusionCharts({
        type: 'boxandwhisker2d',
        renderAt: 'chart-container',
        width: '650',
        height: '250',
        dataFormat: 'json',
        dataSource: {
  "chart": {
    "caption": "Visits to a Website",
    "subcaption": "In three years"
  },
  "categories": [
    {
      "category": [
        {
          "label": "2008"
        },
        {
          "label": "2009"
        },
        {
          "label": "2010"
        }
      ]
    }
  ],
  "dataset": [
    {
      "seriesname": "January",
      "lowerboxcolor": "019FAA",
      "upperboxcolor": "D4DFFF",
      "data": [
        {
          "q1": "60",
          "q3": "137",
          "min": "35",
          "max": "259",
          "median": "89"
        },
        {
          "q1": "67",
          "q3": "191",
          "min": "39",
          "max": "197",
          "median": "139"
        },
        {
          "q1": "53",
          "q3": "200",
          "min": "26",
          "max": "239",
          "median": "107"
        }
      ]
    },
    {
      "seriesname": "February",
      "lowerboxcolor": "2A5F55",
      "upperboxcolor": "D47F00",
      "data": [
        {
          "q1": "69",
          "q3": "160",
          "min": "39",
          "max": "303",
          "median": "125"
        },
        {
          "q1": "74",
          "q3": "187",
          "min": "59",
          "max": "255",
          "median": "151"
        },
        {
          "q1": "126",
          "q3": "209",
          "min": "57",
          "max": "277",
          "median": "153"
        }
      ]
    }
  ]
}
    });
    
    salesMap.render();
 
});