JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>
<div id="container">
        <div class="topBar">
            <!-- These need to be separate because the chart will otherwise make a table out of all of them killing the layout -->
            <div id='firstLegend'></div>
            <div id='secLegend'></div>
            <div id='areaLegend' style="display: none;"></div>
             <select id="series">
                <option value="Rating" selected="selected" data-path="RAT">Rating</option>
                <option value="Completion Percentage" data-path="Comp">Completions</option>
                <option value="Interception Percentage" data-path="Int">Interceptions</option>
                <option value="Touchdown Percentage" data-path="TD">Touchdown</option>
                <option value="Touchdowns cumulated" data-path="TDcm">Touchdowns cumulated</option>
                <option value="Total Yards cumulated" data-path="Ydscm">Total Yards cumulated</option>
                <option value="Yards per Game cumulated" data-path="YGcm">Yards per Game cumulated</option>
                <option value="Yards per Attempt cumulated" data-path="YAcm">Yards per Attempt cumulated</option>
            </select>
        </div>
    </div>
    <div id="chartContainer">
        <div class="topLabel">
                <p id="unit">
                    rating
                </p>
        </div>
        <div id="chart"></div>
    </div>

CSS

html,body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: Segoe UI, Tahoma, Verdana, Arial, sans-serif;
}
.topLabel > p{
    float: left;
    margin: 0;
    font-size: smaller;
}
.topBar, .topLabel{
    overflow: auto;
    padding: 0.2em;
}
.topBar > div{
    float: left;
    /* override border from ui-corner-all*/
    border: none;
}
.topBar > select{
    float: right;
    right: 2em;
    height: 100%
}

#chartContainer{
    height: 80%;
    background-color: #f3f1ea;
}
#chart_chart_container{
    border-top: none;
}
#container{
    background-color: #f3f1ea;
}
.ui-widget-content{
    background-color: #f3f1ea !important;
}
.ui-corner-all{
    border-radius: 0px !important;
}

JavaScript

var width;
var height;
var lastWidth = width;
var lastHeight = height;
var columnSeriesGap = 10;
 /* brushes */
var transperantBrush = "rgba(0,0,0,0)", leagueLineBrush = "#5e7086", joeLineBrush = "#2d2e35", percentSeriesBrush = "#ca3525", leagueComparisonBrush = 'rgba(255, 0, 0, 0.5)', plotAreaBrush = "#f3f1ea";
 
$(window).resize(function() {
        var width = $("#chartContainer").width();
        var height = $("#chartContainer").height();

        if (width != lastWidth || height != lastHeight) {
            $("#chart").igDataChart("option", "size", {
                width: width,
                height: height
            });
            $("#chart").igDataChart("flush");
            lastWidth = width;
            lastHeight = height;
        }
    });
$.ig.loader({
    scriptPath: "http://cdn-na.infragistics.com/jquery/20122/latest/js",
    cssPath: "http://cdn-na.infragistics.com/jquery/20122/latest/css",
    resources: "igDataChart.Category"
});
$.ig.loader(function() {
    width = $("#chartContainer").width();
    height = $("#chartContainer").height();
    
    $("#chart").igDataChart({
        width: width + "px",
        height: height + "px",
        dataSource: data,
        dataSourceType: "array",
        horizontalZoomable: true,
        verticalZoomable: true,
        transitionDuration: 500,
        plotAreaBackground: plotAreaBrush,
        axes: [
            {
            name: "xAxis",
            type: "categoryX",
            label: "Year",
            formatLabel: function (item) {
                var ret = '- ' + item.Year ;
                return ret;
            },
            gap: columnSeriesGap,
             majorStrokeThickness: 1,
            interval: 0,
            labelExtent : 50,
            labelAngle: 90},
        
        {
            name: "yAxis",
            type: "numericY",
            maximumValue: 150,
            majorStrokeThickness: 1,
            interval: 10,
            minimumValue: 0
        }
        ],
 ...