Give Chart New Data With Date Picker

[RubendeVroome]

hi,

 

I want to give my MSCombi2D chart new data by picking a new date from a date picker.

I don't really know how to give the chart this new data and if it is possible to reload the chart without refreshing the whole page.

 

these are parts of my code, both in a .aspx file.

the function 'shwoGraph1(param)' needs the choosen date as a parameter.

It needs to look as in the picture.

I have succeeded so far as in the picture, now the graph needs the update as soon as I pick a date.

 

<script type="text/javascript">
	// BeginOAWidget_Instance_2137022: #datepicker

	$(function() 
	{
		$("#datepicker").datepicker({ showOtherMonths: false });
	});

	// EndOAWidget_Instance_2137022
 	</script>
 	<script type="text/javascript">
	function getDate(str)
	{
		if (window.XMLHttpRequest)
  		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
  		}
		else
  		{// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
		xmlhttp.onreadystatechange=function()
  		{
	  		if (xmlhttp.readyState==4 && xmlhttp.status==200)
				{
					document.getElementById("graph1").innerHTML=xmlhttp.responseText;
				}
  		}
		xmlhttp.open("GET","CPUDataGraph.aspx?op=loadGraph1&date="+str,true);
		xmlhttp.send();
	}
	</script>


 <div class="content">
<table width="740" border="0">
<tr>
 	<td width="280"><% showTank1();%></td>
 	<td width="450"><div id="datepicker"/></td>
</tr>
<tr>
 	<td colspan="2"><center><% showGraph1(""); %></span></center></td>
</tr>
 </table>

 

[Guest Sumedh]

Hi,

 

You would need to use jQuery event onselect.

 

onselect event allows you to define your own event when the datepicker is selected.

 

Inside onselect event, you would need to create a function for changing the chart data.

 

Please refer the following URL's for more information:

 

http://docs.fusioncharts.com/charts/contents/?JavaScript/JS_ChangeData.html

 

http://docs.fusioncharts.com/charts/Code/JavaScript/Basics/UpdateChartData.html

 

http://jqueryui.com/demos/datepicker/#event-onSelect

 

After changing or updating the chart data, the chart re-draws itself.