JSFiddle - React, Tailwind, and code Playground

by jatinder_singh02

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>

<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>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>

Bar Chart
    <table>
        <tr>
            <td id="barChart" class="chartElement">
                
            </td>
            <td id="barLegend" style="float: left">
            </td>
        </tr>

    </table>

    Column Chart
    <table>
        <tr>
            <td id="columnChart" class="chartElement">
                
            </td>
            <td id="columnLegend" style="float: left">
            </td>
        </tr>

    </table>

    <div class="EIA-attribution">
    Energy data from:<br />
    <a href="http://www.eia.gov" target="_blank">U.S. Energy Information Administration (September 2012) </a>
    </div>

CSS

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

JavaScript

$(function () {
var data = [
    {
        "Year": 1995,
        "Bermuda": 16.8331,
        "SaudiArabia": 20.6591,
        "Russia": 41.4181,
        "UnitedStates": 71.1744,
        "China": 33.5387,
    },
    {
        "Year": 1996,
        "Canada": 17.2262,
        "SaudiArabia": 20.8153,
        "Russia": 39.9461,
        "UnitedStates": 72.4860,
        "China": 35.1037,
    },    
    {
        "Year": 1997,
        "Canada": 17.4787,
        "SaudiArabia": 21.2433,
        "Russia": 38.7414,
        "UnitedStates": 72.4715,
        "China": 38.4407,
    },
    {
        "Year": 1998,
        "Canada": 17.4377,
        "SaudiArabia": 21.4151,
        "Russia": 39.0652,
        "UnitedStates": 72.8764,
        "China": 38.8876,
    },
    {
        "Year": 1999,
        "Canada": 17.6813,
        "SaudiArabia": 20.1783,
        "Russia": 40.8088,
        "UnitedStates": 71.7420,
        "China": 37.5003,
    },
    {
        "Year": 2000,
        "Canada": 18.1283,
        "SaudiArabia": 21.5931,
        "Russia": 41.6954,
        "UnitedStates": 71.3322,
        "China": 38.7841,
    },
    {
        "Year": 2001,
        "Canada": 18.0215,
        "SaudiArabia": 20.9456,
        "Russia": 42.6263,
        "UnitedStates": 71.7343,
        "China": 41.6730,
    },
    {
        "Year": 2002,
        "Canada": 18.3578,
        "SaudiArabia": 20.2696,
        "Russia": 44.1627,
        "UnitedStates": 70.7132,
        "China": 46.2297,
    },
    {
        "Year": 2003,
        "Canada": 18.3074,
        "SaudiArabia": 23.0489,
        "Russia": 47.1823,
        "UnitedStates": 69.9627,
        "China": 51.2491,
    },
    {
        "Year": 2004,
        "Canada": 18.6642,
        "SaudiArabia": 24.1590,
        "Russia": 49.8648,
        "UnitedStates": 70.2224,
        "China": 55.9233,
    },
    {
        "Year": 2005,
        "Canada": 18.8932,
        "SaudiArabia": 25.4401,
        "Russia": 51.0796,
        "UnitedStates": 69.4437,
        "China":...