JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id="chart"></div>

JavaScript

var data = [{"Value":"13.2","EffectiveTime":"\/Date(1363096200000)\/","Unit":"g/dl"},{"Value":"13.5","EffectiveTime":"\/Date(1365771000000)\/","Unit":"g/dl"},{"Value":"13.1","EffectiveTime":"\/Date(1368363000000)\/","Unit":"g/dl"}];

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/echo/json/",
            dataType: "json",
            type: "POST",
            data: { //using jsFiddle's echo service to simulate Json request
                json: JSON.stringify(data),
                delay: 1
            },   
        }
    },
    schema: {
        model: {
            fields: {
                Value: { type: "number" },
                EffectiveTime: { type: "date" },
                Unit: { type: "string" }
            }
        }
    }
});

$("#chart").kendoChart({
    dataSource: dataSource,
    title: {
        text: "Historical"
    },
    legend: {
        position: "bottom"
    },
    chartArea: {
        background: ""
    },
    seriesDefaults: {
        type: "line"
    },
    series: [{
        field: "Value",
        name: "Values"
    }],
    valueAxis: {
        labels: {
            format: "{0}"
        },
        line: {
            visible: true
        }
    },
    categoryAxis: {
        field: "EffectiveTime",
        majorGridLines: {
            visible: true
        }
    },
    tooltip: {
        visible: true,
        format: "{0}"
    }
});