You are viewing documentation for an older version. For current documentation - click here.

The data streaming charts allow you to feed data to the chart using JavaScript too, instead of real-time data provider page. The format of data feed, however, should be the same as that outputted by the real-time data provider page.

How to feed data using JavaScript?

You can use the feedData(strData) method to feed data to the chart. Here, strData is a string value which should contain the data in exactly the same format as that provided by the real-time data provider page.

Shown below is an example:

<html>
<head>
	<script type="text/javascript" src="../Charts/FusionCharts.js"></script>
	<script language="javascript">
		//This method is called when user clicks on the feed data button
		function feedDataToChart(){
			//Get reference to the chart using its ID
			var chartRef = FusionCharts("ChId1");
			//We need to create a querystring format incremental update, containing
			//label in hh:mm:ss format
			//and a value (random).
			var currDate = new Date();
			var label= currDate.getHours() + ":" + currDate.getMinutes() + ":" + currDate.getSeconds();
			//Get random number between 30 & 35 - rounded to 2 decimal places
			var randomValue = Math.floor(Math.random()*500)/100 + 30;
			//Build Data String in format &label=...&value=...
			var strData = "&label=" + label + "&value=" + randomValue;
			//Feed it to chart.
			chartRef.feedData(strData);
			return;
		}
	</script>
</head>
<body>
<center>
	<div id="chart1div">
	This text is replaced by the Flash movie.
	</div>
	<script type="text/javascript">
		var chart1 = new FusionCharts("../Charts/RealTimeLine.swf", "ChId1", "500", "350", "0", "1");
		chart1.setXMLUrl("Data.xml");
		chart1.render("chart1div");
	</script>
	<input type='button' value='Feed Random Data' onClick='javascript:feedDataToChart();' >
</center>
</body>
</html>

In the above code, we're doing the following:

  1. Instantiate our chart without any data and one single dataset.
  2. Define a custom function feedDataToChart() which gets invoked when the user clicks the Feed Random Data button.
    This function builds the data (in real-time data format) to be specified to the chart. It contains random value for demo purpose.
  3. We finally feed the data to chart using feedData(strData) method.

When you now view this example, you'll get something as under (image taken after button was clicked a few times):