FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Simple chart update using XMLHttp

Simple chart update using XMLHttp

Viewing 2 posts - 1 through 2 (of 2 total)

Tagged: , ,

  • September 14, 2017 at 6:26 pm #16046

    hknight

    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>
    September 15, 2017 at 10:46 am #16053

    Indranil

    @hknight,

    After parsing the data please update the dataPoints and render the chart.

    Please take a look at the sample given in this link.

    __________
    Indranil Deo,
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

Tagged: , ,

You must be logged in to reply to this topic.