Headlines
Objective :
This section will trait a real time chart display and even giving the command using a slider .
Technologies :
- Highcharts
- J Query slider
- Js
The Web Site :
Code Break Down :
HTML page :
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Displaying Data chart -- Real time</title>
Slider import :
<!-- slider -->
<link href="orange_theme/css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="orange_theme/js/jquery-1.10.2.js"></script>
<script src="orange_theme/js/jquery-ui-1.10.4.custom.js"></script>
<script src="slide.js"></script>
<!-- End slider -->
Data Arrays :
<script type="text/javascript">
window.onload = function () {
var dps = []; // dataPoints
var dps1 = []; // dataPoints
var dps_grn = []; // dataPoints
var data_nab = [0.1,0.2,0.3,0.1,0.2,0.3,0.1,0.2,0.3,0.1,0.2,0.3,0.1,0.5];
var data_sin1 =[ 1 ,1.099833417 ,1.198669331 ,1.295520207 ,1.389418342 ,1.479425539 ,1.564642473 ,1.644217687 ,1.717356091 ,1.78332691 ,1.841470985 ,1.89120736 ,1.932039086 ,1.963558185 ,1.98544973 ,1.997494987 ,1.999573603 ,1.99166481 ,1.973847631 ,1.946300088 ,1.909297427 ,1.863209367 ,1.808496404 ,1.745705212 ,1.675463181 ,1.598472144 ,1.515501372 ,1.42737988 ,1.33498815 ,1.239249329 ,1.141120008 ,1.041580662 ,0.941625857 ,0.842254306 ,0.744458898 ,0.649216772 ,0.557479557 ,0.470163859 ,0.388142109 ,0.312233841 , 1,2,3, 1,2,3, 1,2,3, 1,2,3, 1,2,3, 1,2,3, 1,2,3, 1,2,3, 1,2,3, 1,2,3, 1,2,3, 1,2,3];
Fetching Sine-wave data samples :
nab function, data_sin :
Generate each iteration the next value of data_sin array
//_______________::nab_fact() =>> Data_Serie1::____________________________
var data_sin =[ 1 ,1.099833417 ,1.198669331 ,1.295520207 ,1.389418342 ,1.479425539 ,1.564642473 ,1.644217687 ,1.717356091 ,1.78332691 ,1.841470985 ,1.89120736 ,1.932039086 ,1.963558185 ,1.98544973 ,1.997494987 ,1.999573603 ,1.99166481 ,1.973847631 ,1.946300088 ,1.909297427 ,1.863209367 ,1.808496404 ,1.745705212 ,1.675463181 ,1.598472144 ,1.515501372 ,1.42737988 ,1.33498815 ,1.239249329 ,1.141120008 ,1.041580662 ,0.941625857 ,0.842254306 ,0.744458898 ,0.649216772 ,0.557479557 ,0.470163859 ,0.388142109 ,0.312233841 ,0.243197505 ,0.181722889 ,0.128424228 ,0.083834063 ,0.048397926 ,0.022469882 ,0.006308996,0.003835391 ,0.017547387 ,0.041075725 ,0.074185318 ,0.116545344 ,0.167732558 ,0.227235512 ,0.294459674 ,0.368733362 ,0.449314457 ,0.535397821 ,0.626123335 ,0.720584502 ,0.817837496 ,0.916910597 ,1.0168139 ,1.116549205 ,1.215119988 ,1.311541364 ,1.404849921];
var i =0 ;
var nab_fct= function () {
document.getElementById('tes').innerHTML=i++; // index visibility
if (i == data_sin.length) i=0 ;
return data_sin[i]*100+300;
};
Chart structure :
var chart = new CanvasJS.Chart("chartContainer",{
title :{ text: "Nabil data Display" },
theme: "theme2",
axisY:{
includeZero: true, //try changing it to true
title:"Axis Y title",
titleFontColor : "black",//"steelBlue",
},
/*axisY2: {
title: "Secondary Y Axis",
titleFontColor : "steelBlue",
lineThickness:4}, */
axisX:{
title:"Axis X title",
titleFontColor : "black",
},
toolTip:{
shared: true,
enabled: true, //disable here
animationEnabled: true //disable here
},
legend: {
fontFamily: "aria",
verticalAlign: "bottom",
horizontalAlign: "left",
fontSize: 14,
fontWeight: "bold",
fontFamily: "calibri",
fontColor: "dimGrey"
},
data: [
{ legendText: "Numbers",
type: "line",
xValueType: "dateTime",
showInLegend: true,
name: "Data_Serie_1",
dataPoints: dps ,
//color : "blue"
},
{ type: "line",
xValueType: "dateTime",
showInLegend: true,
name: "Data_Serie_2",
dataPoints: dps1 ,
//color : "red"
},
{ type: "line",
xValueType: "dateTime",
showInLegend: true,
name: "Data_Serie_3",
dataPoints: dps_grn ,
color : "green"
}]
});
var updateInterval = 40 ; var dataLength = 500 ;//800; // number of dataPoints visible at any point var xVal = dataLength; var yVal = 100;
Data Series initialization :
//_____________::Initialisation_plot::_________________________________________
var vaa =0 ;
for (var j = 0; j < dataLength; j++) {
dps.push( { x: j, y: null });//----
dps1.push( { x: j, y: null });//----
dps_grn.push({ x: j, y: null });
};
if (dps.length > dataLength){ dps.shift() ;}
if (dps1.length > dataLength){ dps1.shift() ;}
if (dps_grn.length > dataLength){ dps_grn.shift();}
chart.render();
Dynamic function
to be called every second :
//_____________::Function updateChart()::______________
var updateChart = function () {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
var yVal2 =Math.round(yVal)+300 ; // get the random value
var yVal1 =Math.round(nab_fct()); // get the next sin value
var yVal3 = $( "#slider" ).slider( "value" ); // get the value from slider
dps.push({
x: xVal,
y: yVal1
});//----
dps1.push({
x: xVal,
y: yVal2
});//----slide
dps_grn.push({
x: xVal,
y: yVal3
});
xVal++;
if (dps.length > dataLength) dps.shift() ;
if (dps1.length > dataLength) dps1.shift() ;
if (dps_grn.length > dataLength) dps_grn.shift();
// legend ----------------------------------------------------
chart.options.data[0].legendText = " Data_Serie1 :" + yVal1 +" Unity";
chart.options.data[1].legendText = " Data_Serie2 :" + yVal2 +" Unity";
chart.options.data[2].legendText = " Data_Serie3 :" + yVal3 +" Unity";
chart.render();
};
Calling the update function :
// generates first set of dataPoints
//updateChart(dataLength);
// update chart after specified time.
setInterval(function(){updateChart()}, updateInterval);
Wrapping up:
} // End of window.onload fct </script> <script type="text/javascript" src="canvasjs.min.js.pagespeed.jm.7jDMSJhde2.js"></script> </head> <body> <div id="chartContainer" style="height: 300px; width:100%;"></div> <div id="tes" >bbe</div> <!-- slider --> <div id="slider"></div> <p> <label for="amount">Valeur de la Consigne:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <!-- End slider --> </body> </html>
Slider js code :
File name : slide.js
$(function() {
$( "#slider" ).slider({
range: "min",
value: 37,
min: 1,
max: 700,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + " Unity" );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + " Unity" );
});
The Whole Code :
File name : grrr_nabsimplifieslide.htm
Code Source :
Files :
Html file :
Js file :
Final Result – Front End :
