1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
var dataPoints1 = [];
var dataPoints2 = [];
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
title: {
text: "Share Value of Two Companies"
},
axisX: {
title: "chart updates every 3 secs"
},
axisY:{
prefix: "$",
includeZero: false
},
toolTip: {
shared: true
},
legend: {
cursor:"pointer",
verticalAlign: "top",
fontSize: 22,
fontColor: "dimGrey",
itemclick : toggleDataSeries
},
data: [{
type: "line",
xValueType: "dateTime",
yValueFormatString: "$####.00",
xValueFormatString: "hh:mm:ss TT",
showInLegend: true,
name: "Company A",
dataPoints: dataPoints1
},
{
type: "line",
xValueType: "dateTime",
yValueFormatString: "$####.00",
showInLegend: true,
name: "Company B" ,
dataPoints: dataPoints2
}]
});
function toggleDataSeries(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
var updateInterval = 3000;
// initial value
var yValue1 = 600;
var yValue2 = 605;
var time = new Date;
// starting at 9.30 am
time.setHours(9);
time.setMinutes(30);
time.setSeconds(00);
time.setMilliseconds(00);
function updateChart(count) {
count = count || 1;
var deltaY1, deltaY2;
for (var i = 0; i < count; i++) {
time.setTime(time.getTime()+ updateInterval);
deltaY1 = .5 + Math.random() *(-.5-.5);
deltaY2 = .5 + Math.random() *(-.5-.5);
// adding random value and rounding it to two digits.
yValue1 = Math.round((yValue1 + deltaY1)*100)/100;
yValue2 = Math.round((yValue2 + deltaY2)*100)/100;
// pushing the new values
dataPoints1.push({
x: time.getTime(),
y: yValue1
});
dataPoints2.push({
x: time.getTime(),
y: yValue2
});
}
// updating legend text with updated with y Value
chart.options.data[0].legendText = " Company A $" + yValue1;
chart.options.data[1].legendText = " Company B $" + yValue2;
chart.render();
}
// generates first set of dataPoints
updateChart(100);
setInterval(function(){updateChart()}, updateInterval);
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<script src="../../asset/js/canvasjs/canvasjs.min.js"></script>
</body>
</html>