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>
<script src="http://igniteui.com/js-data/world-energy-production"></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 lastFiveYears = [{
    "Year": "XL Re Bermuda",
    "Canada": 18.8932,
    "SaudiArabia": 25.4401,
    "Russia": 51.0796,
    "UnitedStates": 69.4437,
    "China": 63.9524,
  }, {
    "Year": "XL Re France",
    "Canada": 19.2273,
    "SaudiArabia": 24.6105,
    "Russia": 52.0557,
    "UnitedStates": 70.7539,
    "China": 68.2333,
  }, {
    "Year": "XL Re Ireland",
    "Canada": 19.5439,
    "SaudiArabia": 23.7326,
    "Russia": 52.5599,
    "UnitedStates": 71.4000,
    "China": 73.2809,
  }, {
    "Year": "XL Re Singapore",
    "Canada": 19.0196,
    "SaudiArabia": 25.1682,
    "Russia": 52.5460,
    "UnitedStates": 73.2178,
    "China": 78.3599,
  }, {
    "Year": "Xl Re UK",
    "Canada": 18.3249,
    "SaudiArabia": 22.837,
    "Russia": 50.4291,
    "UnitedStates": 72.6409,
    "China": 84.0643,
  }, {
    "Year": "NAPC",
    "Canada": 18.3358,
    "SaudiArabia": 24.7442,
    "Russia": 53.2232,
    "UnitedStates": 74.7951,
    "China": 90.3918,
  }];

  $("#columnChart").igDataChart({
    width: "98%",
    height: "350px",
    dataSource: lastFiveYears,
    legend: {
      element: "columnLegend"
    },
    title: "Actual Vs Budgeted",
    subtitle: "The top five Company's distribution",
    axes: [{
      name: "xAxis",
      type: "categoryX",
      label: "Year",
      labelTopMargin: 5
    }, {
      name: "yAxis",
      type: "numericY",
      title: "PML Points (in millions)",
    }],
    series: [{
      name: "series1",
      title: "Actual",
      type: "column",
      isHighlightingEnabled: true,
      isTransitionInEnabled: true,
      xAxis: "xAxis",
      yAxis: "yAxis",
      valueMemberPath: "Canada"
    }, {
      name: "series2",
      title: "Budgeted",
      type: "column",
      isHighlightingEnabled: true,
      isTransitionInEnabled: true,
      xAxis: "xAxis",
      yAxis: "yAxis",
      valueMemberPath: "SaudiArabia"
    }, ]
  });

  $("#barChart").igDataChart({
    width: "98%",
    height: "550px",
   ...