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/us-fao-gross-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>

<div class="chartContainer">
        <div class="chart">
            <h4>Scatter</h4>
            <div id="chartScatter"></div>
        </div>
        <div class="chart">
            <h4>Scatter Line</h4>
            <div id="chartScatterLine"></div>
        </div>
        <div class="chart">
            <h4>Scatter Spline</h4>
            <div id="chartScatterSpline"></div>
        </div>
        <div class="chart">
            <h4>Bubble Chart</h4>
            <div id="chartBubble"></div>
        </div>

    </div>

    <div class="UNdata-attribution">
    Agricultural data from:<br />
    <a href="http://data.un.org/" target="_blank">UNdata</a>
    </div>

CSS

h4 {
            width: 100%;
            text-align: center;
        }

        .chart {
            position: relative;
            float: left;
            margin-right: 10px;
        }

JavaScript

$(function () {
            function createScatterChart(selector, seriesType, dataSource) {
                $(selector).igDataChart({
                    width: "400px",
                    height: "400px",
                    dataSource: dataSource,
                    title: "U.S. Agricultural Production Per Year",
                    subtitle: "Data from 1961-2007",
                    axes: [{
                        name: "xAxis",
                        type: "numericX",
                        interval: 10,
                        title: "Year",
                    }, {
                        name: "yAxis",
                        type: "numericY",
                        title: "Billions of USD",
                        maximumValue: 200000,
                        formatLabel: function (val) {
                            var bVal = (val / 1000),
                            rounded = Math.round(bVal * 100) / 100;
                            return "$"+ rounded;
                        }
                    }],
                    series: [{
                        name: "scatter",
                        type: seriesType,
                        xAxis: "xAxis",
                        yAxis: "yAxis",
                        xMemberPath: "Year",
                        yMemberPath: "Value",
                        markerType: "circle"
                    }],
                    horizontalZoomable: true,
                    verticalZoomable: true,
                    windowResponse: "immediate"
                });
            }

            function createBubbleChart(selector, dataSource) {
                $(selector).igDataChart({
                    width: "400px",
                    height: "400px",
                    dataSource: dataSource,
                    title: "U.S. Agricultural Production Per Year",
                    subtitle: "Data from 1961-2007",
                    axes: [{
                        name: "xAxis",
                       ...