JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="http://igniteui.com/js-data/uk-france-population"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div id="innerChart" class="chartElement"></div>
<div id="innerZoom"></div>
<div id="lineLegend" style="float: left"></div>
<div class="Quandl-attribution">
  Population data from:
  <a href="http://www.quandl.com/" target="_blank">Quandl</a>
</div>

CSS

.selectionOptions
        {
            margin-bottom: 10px;   
        }

        td { vertical-align: top; }
        .chartElement {
            padding-bottom: 20px;
        }

JavaScript

$(function () {

  var data = [
    { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
    { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2025": 1396 },
    { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
    { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
    { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
  ];

	var chartOpts = {
    width: "100%",
    height: "400px",
    legend: { element: "lineLegend" },
    title: "Population per Country",
    subtitle: "A comparison of population in 1995 and 2005",
    dataSource: data,
    horizontalZoomable: true,
    verticalZoomable: true,
    useInterpolation: true,
    windowResponse: "immediate",
    axes: [
      {
        name: "NameAxis",
        type: "categoryX",
        label: "CountryName"
      },
      {
        name: "PopulationAxis",
        type: "numericY",
        minimumValue: 0,
        title: "Millions of People",
      }
    ],
    series: [
      {
        name: "2005Population",
        type: "line",
        title: "2005",
        xAxis: "NameAxis",
        yAxis: "PopulationAxis",
        valueMemberPath: "Pop2005",
        isTransitionInEnabled: true,
        isHighlightingEnabled: true,
        thickness: 2,
        unknownValuePlotting: "linearInterpolate",
        markerType: "circle"
      },
      {
        name: "2015Population",
        type: "line",
        title: "2015",
        xAxis: "NameAxis",
        yAxis: "PopulationAxis",
        valueMemberPath: "Pop2015",
        isTransitionInEnabled: true,
        isHighlightingEnabled: true,
        thickness: 2,
        unknownValuePlotting: "linearInterpolate",
        markerType: "circle"
      }
    ]
  };
  
  var zoomBarOpts = {
  	width: "100%",
    height: "400px",
    dataSource: data,
    crosshairVisibility: "hidden",
   ...