JSFiddle - React, Tailwind, and code Playground

by buggermama

HTML

<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.css" rel="stylesheet" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>

<body>
    
        <div id="example" class="k-content">
            <div class="chart-wrapper">
                <div id="chart"></div>
            </div>
            <div class="configuration-horizontal">
                <div class="config-section">
                <span class="configHead">Base date unit</span>
                <ul class="options">
                    <li>
                        <input id="baseUnitAuto" name="baseUnit"
                                type="radio" value="" autocomplete="off" />
                        <label for="baseUnitAuto">Automatic (default)</label>
                    </li>
                    <li>
                        <input id="baseUnitYears" name="baseUnit"
                                type="radio" value="years" autocomplete="off" />
                        <label for="baseUnitYears">Years</label>
                    </li>
                    <li>
                        <input id="baseUnitMonths" name="baseUnit"
                                type="radio" value="months" autocomplete="off" />
                        <label for="baseUnitMonths">Months</label>
                    </li>
                    <li>
                        <input id="baseUnitWeeks" name="baseUnit"
                                type="radio" value="weeks" checked="checked" autocomplete="off" />
                        <label for="baseUnitWeeks">Weeks</label>
                ...

CSS

.chart-wrapper, .chart-wrapper .k-chart {
                    height: 300px;
                }

JavaScript

function getData() {
    
 return [{"time": "2006-04-05T00:27:00.000Z","value": "24.3411","value2": "21.3411","value3": "40"},{"time":"2006-04-05T01:28:00.000Z","value": "22.7544","value2": "20.3411","value3": "40"},{"time": "2006-04-05T02:28:00.000Z","value": "22.7544","value2": "25.3411","value3": "40"},{"time": "2006-04-05T03:28:00.000Z","value": "22.7544","value2": "31.3411","value3": "40"},{"time": "2006-04-05T04:28:00.000Z","value": "22.3578","value2": "51.3411","value3": "40"}];
}
var stats =getData();

                function createChart() {
                    $("#chart").kendoChart({
                        dataSource: {
                            data: stats
                        },
                        series: [{
                            type: "line",
                            aggregate: "avg",
                            field: "value3",
                            categoryField: "time"
                        },{
                            type: "column",
                            aggregate: "avg",
                            field: "value2",
                            categoryField: "time"
                        }],
                        categoryAxis: {
                            baseUnit: "hours",
                            majorGridLines: {
                                visible: false
                            }
                        },
                        valueAxis: {
                            line: {
                                visible: false
                            }
                        }
                    });
                }

                $(document).ready(createChart);
                $("#example").bind("kendo:skinChange", createChart);
                $(".configuration-horizontal").bind("change", refresh);

                function refresh() {
                    var chart = $("#chart").data("kendoChart"),
                        series = chart.options.series,
                       ...