JSFiddle - React, Tailwind, and code Playground

by KendoDev

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<div id="chart" ></div>

JavaScript

var data = [   { time: new Date("2014/09/07 06:00:00"), averageSpeed: 200 }, 
               { time: new Date("2014/09/07 06:05:00"), averageSpeed: 250 }, 
               { time: new Date("2014/09/07 06:10:00"), averageSpeed: 220 },
               { time: new Date("2014/09/07 06:20:00"), averageSpeed: 225 },
          { time: new Date("2014/09/07 06:21:00"), averageSpeed: 0 },
          { time: new Date("2014/09/07 07:44:00"), averageSpeed: 0 },
               { time: new Date("2014/09/07 07:45:00"), averageSpeed: 55 }, 
               { time: new Date("2014/09/07 07:50:00"), averageSpeed: 125 },
               { time: new Date("2014/09/07 07:55:00"), averageSpeed: 235 },
               { time: new Date("2014/09/07 08:00:00"), averageSpeed: 215 },
               { time: new Date("2014/09/07 08:05:00"), averageSpeed: 235 },
               { time: new Date("2014/09/07 08:10:00"), averageSpeed: 205 },
           ];

var dataSource = new kendo.data.DataSource({
    data:data,
    schema: {
        model: {            
            fields: {
                time: { type: "date" },
                averageSpeed: { type: "number" }               
            }
        }            
    }
});


$("#chart").kendoChart({
    title: {
        text: "Speed Chart"
    },
    dataSource: data,
    series: [{
        type: "line",
        field: "averageSpeed"
    }],
    categoryAxis: {
                    field: "time",
                    type: "Date", 
                   // baseUnit: "fit",
                   // baseUnitStep: "auto",
                   // maxDateGroups:"25",
                    line: {                     
                        visible: true,
                        width: 2
                    },
                    labels: {  
                        visible: true, 
                        format:"HH:mm",
                        dateFormats:
                               {
                                   minutes: "HH:mm",
                             ...