Skip to content

Instantly share code, notes, and snippets.

@hiteshsahu

hiteshsahu/LiveGraph.html

Created March 29, 2017 09:53
Show Gist options
  • Save hiteshsahu/2b1333282f33f2c78fc5941e876b22f7 to your computer and use it in GitHub Desktop.
Save hiteshsahu/2b1333282f33f2c78fc5941e876b22f7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hiteshsahu created this gist Mar 29, 2017.
    189 changes: 189 additions & 0 deletions LiveGraph.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,189 @@
    <html>
    <head>
    <base href="http://demos.telerik.com/kendo-ui/radar-charts/radar-area">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
    </head>
    <body>
    <div id="example">
    <div class="demo-section k-content wide">

    <input type="checkbox" id="chkproperty" class="k-checkbox" checked="checked" name="checkAddress" onclick="toggleLiveData(this)">
    <label class="k-checkbox-label" for="chkproperty"><b>Display Only Live Data</b></label>

    <h4 style="margin-top: 2em;">Live Data Window Size</h4>
    <select id="size" style="width: 100%;" >
    <option value="5" >S - 5 item</option>
    <option value="10" >M - 10 item</option>
    <option value="50" >L - 50 item</option>
    <option value="100" >XL - 100 item</option>
    </select>

    <div id="chart"></div>


    </div>
    <script>
    //Variable to show Live Live Data
    var showLiveData = true;

    //Variable to show Live Live Data
    var windowSize = 5;

    function toggleLiveData(checkbox){
    showLiveData = checkbox.checked;
    }

    function createChart() {

    // create DropDownList from select HTML element
    $("#size").kendoDropDownList(
    {
    change: onChange
    });

    function onChange() {
    var size = $("#size").data("kendoDropDownList");
    // alert('Window Size updated to : //'+size.value());

    windowSize = size.value();
    };

    var internetUsers = [{

    "year": "2005",
    "value": 67.96
    }, {

    "year": "2006",
    "value": 68.93
    }, {

    "year": "2007",
    "value": 75
    }, {
    "year": "2008",
    "value": 74
    }, {

    "year": "2009",
    "value": 78
    }];


    $("#chart").kendoChart({
    theme: $(document).data("kendoSkin") || "default",
    renderAs: "canvas",
    dataSource: {
    data: internetUsers
    },
    title: {
    text: "Power Usage"
    },
    legend: {
    position: "bottom"
    },
    seriesDefaults: {
    type: "column"
    },
    series: [{
    type: "area",
    line: {
    color: "red",
    opacity: 0.5,
    width: 1,
    style: "step"
    },
    field: "value",
    name: "Power (Watts)"


    }],
    valueAxis: {

    majorGridLines: {
    visible: false
    },
    labels: {
    format: "{0}"
    }
    },
    categoryAxis: {

    majorGridLines: {
    visible: false
    },

    line: {
    visible: false
    },

    field: "year",
    labels: {
    rotation: "auto"
    },
    visible: false,
    },
    pannable: {
    lock: "y"
    },
    zoomable: {
    mousewheel: {
    lock: "y"
    },
    selection: {
    lock: "y"
    }
    },
    tooltip: {
    visible: true,
    template: " #= value # w"
    },
    transitions: false
    });



    setInterval(function() {
    // Update Chart;
    var randomnumber = Math.floor(Math.random() * (100 - 20 + 1)) + 20;

    if(showLiveData)
    {
    //old data
    var oldData = $("#chart").data("kendoChart").dataSource.data();

    if(oldData.length > windowSize){

    //clear all historic values
    for(var i =0 ;i<=( oldData.length - windowSize -1 );i++)
    { $("#chart").data("kendoChart").dataSource.remove(oldData[i]);
    }
    } else if(oldData.length == windowSize) {
    // remove first item
    $("#chart").data("kendoChart").dataSource.remove(oldData[0]);
    }
    }

    //add new data
    $("#chart").data("kendoChart").dataSource.add({
    "year": "2010",
    "value": randomnumber
    });
    }, 400);
    }
    $(document).ready(
    createChart);
    $(document).bind("kendo:skinChange", createChart);
    </script>
    </div>


    </body>
    </html>