Hi,
This is my first attempt to set up a server (on an arduino Yun). I have managed to host a webpage with the examples of canvasJS charts using static data embedded in the page as a javascript var.
Can you give a simple demo of calling an external file containing datapoints to update the chart.
I can have the data in the external file as a text string of the format [{x1:y1,x2:y2,x3:y3}].
I have the following script that uses XMLHHTTP to call in the text string
[{1:5,2:10,3:7,4:23}]
It is displayed in the paragraph “demo” but no chart is rendered.
Any help you can give on this would be much appreciated by a newbee
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var myvar;
if (window.XMLHttpRequest) {
// code for modern browsers
myvar = new XMLHttpRequest();
} else {
// code for IE6, IE5
myvar = new ActiveXObject("Microsoft.XMLHTTP");
}
myvar.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
myvar.open("GET", "test1.txt", true);
myvar.send();
}
</script>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script type="text/javascript">
var dataPoints=[];
for(key in myvar){
dataPoints.push({label: key, y: myvar[key]});
}
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "My First Chart in CanvasJS"
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "line",
dataPoints: dataPoints
}
]
});
chart.render();
}
</script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
.
