JSFiddle - React, Tailwind, and code Playground

by burninromz

HTML

<script src="http://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.common.min.css">
<body>
    <div id="example">
        <div class="demo-section k-content">
            <div id="chart"></div>
        </div>
        <script>


        </script>
    </div>


</body>

JavaScript

var baseDate = new Date("2011/12/20");
    var stats = [];
    var currDate = baseDate;
    var total = (365 * 2);
    for (var day = 0; day < total; day++) {
        var newDate = new Date();
        newDate.setTime(currDate.getTime() + 1 * 86400000);
        var val = Math.round(Math.random() * 3000);
        stats.push({ value: val, date: newDate });
        currDate = newDate;
    }
    var dataSource = new kendo.data.DataSource({
        data: stats
    });


    function dataBound(e) {
        var chart = $("#chart").data("kendoChart");
     //   if (dataSource.view().length > 4) {
            chart.options.categoryAxis.labels.step = 5000;
     //   }
     //   else {
     //       chart.options.categoryAxis.labels.step = 1;
     //   }
    }
        function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Lead Referrals"
            },
            dataSource: dataSource,
            series: [
                {
                    type: "line",
                    color: "#32CD32",
                    field: "value",
                    categoryField: "date",
                    style: "smooth"
                }
            ],

            tooltip: {
                visible: true,
                template: "#=kendo.format( '{0:MMMM dd, yyyy}',category)  #<br />Lead Referrals: #= kendo.format('{0:N0}',dataItem.value) #"
            },
            dataBound: dataBound
        });
    }

    $(document).ready(createChart);
    $("#example").bind("kendo:skinChange", createChart);