JSFiddle - React, Tailwind, and code Playground

by brainsengineering

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css">
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<input id="BtnRedraw" type="button" value="redraw"/>    
<div class="demo-section k-content">
        <div id="stock-chart" style="background: center no-repeat url('http://demos.telerik.com/kendo-ui/content/shared/styles/world-map.png');"></div>
      <div class="chart-loading"></div>
    </div>

CSS

#stock-chart circle {
        display: none !important;
    }

JavaScript

var dataSource;
        var tmp1;


        function ReBindDataSource() {
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://vamoss.brainsen.com/API/Get.aspx?mkt=271&cm=84&pt=15",
                        cache: false,
                        dataType: "json"
                    }
                }
            });

            dataSource.fetch(function () {
                if (dataSource._data.length > 0) {
                    tmp1 = dataSource._data;
                    var tmp = dataSource._data[20];
                    //console.log(tmp);
                    //var keys = Object.keys(dataSource._data[0]);
                    ReDrawChart(tmp1);
                }
            });
        }


        function redraw() {
            ReBindDataSource();
        }


        $(document).ready(function () {

            $("#BtnRedraw").bind("click", redraw);

            $("#stock-chart").kendoStockChart({
                theme: "blueOpal",
                chartArea: {
                    background: "transparent"
                },
                title: {
                    text: "xxx",
                    font: "bold italic 12px Arial,Helvetica,sans-serif"
                },
                dateField: "Date",
                legend: { background: "#ddd", position: "bottom", visible: true },
                panes: [{
                    title: "Value"
                }],
                categoryAxis: [{
                    name: "labelAxis",
                    type: "date",
                    field: "Date",
                    baseUnit: "fit"
                }, {
                    name: "dataAxis",
                    baseUnit: "months",
                    baseUnitStep: 1,
                    visible: false,
                    crosshair: {
                        visible: true
                    }
                }],
                seriesDefaults: {
                ...