Trying to get this script to reload every one second with random variables. All I get is the first set of data, chart.render only seems to work when it isn't nested in a function. It's the function 'work' that seems to be broken. I tried canvasjs solution for line charts, it doesn't function either. Any ideas?
<!DOCTYPE HTML>
<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF8">
<script type="text/javascript" src="canvasjs.min.js"></script>
<script type="text/javascript">
var f86,f810,f814,f816,d96,d910,d914,d916,d86,d810,d814,d816,c46,c410,c414,c416;
f86 = Math.floor(Math.random() * 10) + 80 +1;
f810 = Math.floor(Math.random() * 10) + 80 +1;
f814 = Math.floor(Math.random() * 10) + 80 +1;
f818 = Math.floor(Math.random() * 10) + 80 +1;
d96 = Math.floor(Math.random() * 10) + 80 +1;;
d910 = Math.floor(Math.random() * 10) + 80 +1;
d914 = Math.floor(Math.random() * 10) + 80 +1;
d918 = Math.floor(Math.random() * 10) + 80 +1;
d86 = Math.floor(Math.random() * 10) + 80 +1;
d810 = Math.floor(Math.random() * 10) + 80 +1;
d814 = Math.floor(Math.random() * 10) + 80 +1;
d818 = Math.floor(Math.random() * 10) + 80 +1;
c46 = Math.floor(Math.random() * 10) + 80 +1;
c410 = Math.floor(Math.random() * 10) + 80 +1;
c414 = Math.floor(Math.random() * 10) + 80 +1;
c418 = Math.floor(Math.random() * 10) + 80 +1;
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
axisX:{tickThickness: 1,lineThickness: 1},
toolTip:{enabled: false},
axisY: {includeZero: false,suffix: "C",minimum: 0,maximum: 123,tickThickness: 1,lineThickness: 1,gridThickness: 1},
data:[
{
type: "bar",indexLabel: "{y} C ",showInLegend: true,name: "6'",color: "#8080E6",indexLabelPlacement: "inside",indexLabelFontColor: "white",
dataPoints: [{ y: c46, label: "C4"},{ y: d86, label: "D8"},{ y: d96, label: "D9"},{ y: f86, label: "F8"}]
},
{
type: "bar",indexLabel: "{y} C ",showInLegend: true,name: "10'",color: "#3333D6",indexLabelPlacement: "inside",indexLabelFontColor: "white",
dataPoints: [{ y: c410, label: "C4"},{ y: d810, label: "D8"},{ y: d910, label: "D9"},{ y: f810, label: "F8"}]
},
{
type: "bar",indexLabel: "{y} C ",showInLegend: true,name: "14'",color: "#0000B8",indexLabelPlacement: "inside",indexLabelFontColor: "white",
dataPoints: [{ y: c414, label: "C4"},{ y: d814, label: "D8"},{ y: d914, label: "D9"},{ y: f814, label: "F8"}]
},
{
type: "bar",indexLabel: "{y} C ",showInLegend: true,name: "18'",color: "#000066",indexLabelPlacement: "inside",indexLabelFontColor: "white",
dataPoints: [{ y: c418, label: "C4"},{ y: d818, label: "D8"},{ y: d918, label: "D9"},{ y: f818, label: "F8"}]
}
]
});
chart.render();
}
function work() {
f86++;
f810 = Math.floor(Math.random() * 10) + 80 +1;
f814 = Math.floor(Math.random() * 10) + 80 +1;
f818 = Math.floor(Math.random() * 10) + 80 +1;
d96 = Math.floor(Math.random() * 10) + 80 +1;;
d910 = Math.floor(Math.random() * 10) + 80 +1;
d914 = Math.floor(Math.random() * 10) + 80 +1;
d918 = Math.floor(Math.random() * 10) + 80 +1;
d86 = Math.floor(Math.random() * 10) + 80 +1;
d810 = Math.floor(Math.random() * 10) + 80 +1;
d814 = Math.floor(Math.random() * 10) + 80 +1;
d818 = Math.floor(Math.random() * 10) + 80 +1;
c46 = Math.floor(Math.random() * 10) + 80 +1;
c410 = Math.floor(Math.random() * 10) + 80 +1;
c414 = Math.floor(Math.random() * 10) + 80 +1;
c418 = Math.floor(Math.random() * 10) + 80 +1;
chart.render();
setTimeout('work()', 100);
}
work();
</script>
</head>
<body><br>
<div style="width: 850px; overflow: auto; padding: 1em; margin: auto; float:center">
<div id="chartContainer" style="height: 400px; width: 500px; float:left"></div>
</div>
</body>
</html>
I don't know much about CanvasJs I just took the tour after reading your question, but it seems that to redraw the chart, you need to create a new instance each time (please correct me if I'm wrong, as I may not be well informed).
Anyways I got some results by getting the code out from window.onload into a function that I called drawChart and reused it in the function work now the code looks like this
(function () {
'use strict';
var f86, f810, f814, f816, f818, d96, d910, d914, d916, d918, d86, d810, d814, d816, d818, c46, c410, c414, c416, c418;
f86 = Math.floor(Math.random() * 10) + 80 + 1;
f810 = Math.floor(Math.random() * 10) + 80 + 1;
f814 = Math.floor(Math.random() * 10) + 80 + 1;
f818 = Math.floor(Math.random() * 10) + 80 + 1;
d96 = Math.floor(Math.random() * 10) + 80 + 1;;
d910 = Math.floor(Math.random() * 10) + 80 + 1;
d914 = Math.floor(Math.random() * 10) + 80 + 1;
d918 = Math.floor(Math.random() * 10) + 80 + 1;
d86 = Math.floor(Math.random() * 10) + 80 + 1;
d810 = Math.floor(Math.random() * 10) + 80 + 1;
d814 = Math.floor(Math.random() * 10) + 80 + 1;
d818 = Math.floor(Math.random() * 10) + 80 + 1;
c46 = Math.floor(Math.random() * 10) + 80 + 1;
c410 = Math.floor(Math.random() * 10) + 80 + 1;
c414 = Math.floor(Math.random() * 10) + 80 + 1;
c418 = Math.floor(Math.random() * 10) + 80 + 1;
window.onload = function () {
drawChart();
}
function work() {
f86++;
f810 = Math.floor(Math.random() * 10) + 80 + 1;
f814 = Math.floor(Math.random() * 10) + 80 + 1;
f818 = Math.floor(Math.random() * 10) + 80 + 1;
d96 = Math.floor(Math.random() * 10) + 80 + 1;;
d910 = Math.floor(Math.random() * 10) + 80 + 1;
d914 = Math.floor(Math.random() * 10) + 80 + 1;
d918 = Math.floor(Math.random() * 10) + 80 + 1;
d86 = Math.floor(Math.random() * 10) + 80 + 1;
d810 = Math.floor(Math.random() * 10) + 80 + 1;
d814 = Math.floor(Math.random() * 10) + 80 + 1;
d818 = Math.floor(Math.random() * 10) + 80 + 1;
c46 = Math.floor(Math.random() * 10) + 80 + 1;
c410 = Math.floor(Math.random() * 10) + 80 + 1;
c414 = Math.floor(Math.random() * 10) + 80 + 1;
c418 = Math.floor(Math.random() * 10) + 80 + 1;
drawChart();
setTimeout(work, 100);
}
function drawChart() {
var chart = new CanvasJS.Chart("chartContainer", {
axisX: {
tickThickness: 1,
lineThickness: 1
},
toolTip: {
enabled: false
},
axisY: {
includeZero: false,
suffix: "C",
minimum: 0,
maximum: 123,
tickThickness: 1,
lineThickness: 1,
gridThickness: 1
},
data: [{
type: "bar",
indexLabel: "{y} C ",
showInLegend: true,
name: "6'",
color: "#8080E6",
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
dataPoints: [{
y: c46,
label: "C4"
}, {
y: d86,
label: "D8"
}, {
y: d96,
label: "D9"
}, {
y: f86,
label: "F8"
}]
}, {
type: "bar",
indexLabel: "{y} C ",
showInLegend: true,
name: "10'",
color: "#3333D6",
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
dataPoints: [{
y: c410,
label: "C4"
}, {
y: d810,
label: "D8"
}, {
y: d910,
label: "D9"
}, {
y: f810,
label: "F8"
}]
}, {
type: "bar",
indexLabel: "{y} C ",
showInLegend: true,
name: "14'",
color: "#0000B8",
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
dataPoints: [{
y: c414,
label: "C4"
}, {
y: d814,
label: "D8"
}, {
y: d914,
label: "D9"
}, {
y: f814,
label: "F8"
}]
}, {
type: "bar",
indexLabel: "{y} C ",
showInLegend: true,
name: "18'",
color: "#000066",
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
dataPoints: [{
y: c418,
label: "C4"
}, {
y: d818,
label: "D8"
}, {
y: d918,
label: "D9"
}, {
y: f818,
label: "F8"
}]
}]
});
chart.render();
}
work();
}());
It is generally a bad practice to let so many globals wandering even if those are numbers, which is why I wrapped it all in an IIFE. There is still some improvement to do, by refactoring the numbers assignment in a single place, but this is out of this question's scope.