JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<div id="container" style="position:relative;">
    <div id="chart">
    </div>
</div>

CSS

#loading 
{
    top:100px;
    left:600px;
    position:absolute;
    background-image: url('../../Content/LoadingProgress.gif');
    background-repeat:no-repeat;
    width:200px;
    height:200px;
    margin:0 auto;
}

JavaScript

$("#chart").kendoChart({
    dataSource: {
        transport: {
            read: {
                url: "/echo/json/",               
                dataType: "json",
                type: "POST",
                delay: 1000,
                data: {                   
                    json: JSON.stringify([
                    {
                        "year": "2008",
                        "unit": "GWh",
                        "solar": 2578,
                        "hydro": 26112,
                        "wind": 32203,
                        "nuclear": 58973
                    },                    
                        "year": "2007",
                        "unit": "GWh",
                        "solar": 508,
                        "hydro": 30522,
                        "wind": 27568,
                        "nuclear": 55103
                    },
                    {
                        "country": "Spain",
                        "year": "2006",
                        "unit": "GWh",
                        "solar": 119,
                        "hydro": 29831,
                        "wind": 23297,
                        "nuclear": 60126
                    }
                    ])
                }
            }
        },
        sort: {
            field: "year",
            dir: "asc"
        }
    },
    title: {
                text: "Spain electricity production (GWh)"
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "column"
            },
            series:
            [{
                field: "nuclear",
                name: "Nuclear"
            }, {
                field: "hydro",
                name: "Hydro"
            }, {
                field: "wind",
                name: "Wind"
            }],
            categoryAxis: {
                field: "year",
                labels: {
                    rotation: -90
                }
    ...