Skip to content

Instantly share code, notes, and snippets.

@hiteshsahu

hiteshsahu/LiveGraph.html

Created March 29, 2017 09:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • 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
Real Time Graph with KendoUI
Raw
LiveGraph.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment