ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  realtime charting
Posted by Jason Snyder on Feb-03-2011 09:21
I read in the documentation that it was easy to implement client-side javascript to refresh an image without refreshing the whole page, but I didn't find an example of such an implementation.  My scenario requires that I send request parameters to draw the chart.

Which approach is right?  Posting with xmlhttp object and stripping out the img tag, or something else?

  Re: realtime charting
Posted by Peter Kwan on Feb-03-2011 23:46
Hi Jason,

It is like:

document.getElementById("id_of_img_tag").src="aaa.php?xxx=yyy";

The above code sets a new URL to the <IMG> tag. You may use any URL you like, including URL that includes query parameters. For more information, you may refer to HTML/Javascript documentation.

Hope this can help.

Regards
Peter Kwan

  Re: realtime charting
Posted by Jason Snyder on Feb-04-2011 00:15
That's good thanks, but I cannot find an example in the samples or documentation showing what the server-side code would be.  Do I draw the chart and then write the url of the image to the Response?  If so, what is the object.property/method to get the url of the image?

Thanks,
Jason

  Re: realtime charting
Posted by Peter Kwan on Feb-04-2011 23:42
Hi Jason,

In the server side, you may draw the chart and send the chart to the browser as an image (not as an URL of the image). The exact code depends on your programming language and development framework.

Since you mention the word "Response", are you using the ASP or ASP.NET framework? (Response is a keyword in these two frameworks.)

In ASP/VBScript, the code is like:

... create chart as usual ....

'output chart image in memory
chartImage = c.makeChart2(cd.PNG)

'send image to browser
Response.ContentType = "image/png"
Response.BinaryWrite chartImage
Response.End

The code in ASP.NET/VB.NET is similar:

'output chart image in memory
Dim chartImage As Byte() = c.makeChart2(Chart.PNG)

'send image to browser
Response.ContentType = "image/png"
Response.BinaryWrite(chartImage)
Response.End

Hope this can help.

Regards
Peter Kwan

  Re: realtime charting
Posted by Jason Snyder on Feb-04-2011 23:46
That's awesome.  That's alot for your help!

  Re: realtime charting
Posted by Jason Snyder on Feb-05-2011 01:17
I have run into one last problem.  How do I send the imagemap for the tooltips along with the chart image itself?

  Re: realtime charting
Posted by Peter Kwan on Feb-05-2011 23:56
Hi Jason,

Updating the image map (tooltips) without refreshing the web page is slightly more difficult than updating the chart image. If you are not sure how to do it, I suggest you may just use the ChartDirector AJAX framework. See the followings for an example:

http://www.chartdir.com/forum/download_thread.php?bn=chartdir_support&thread=1157439541#N1157477192

Like any AJAX framework, if you use the framework, your code must be structured to meet the requirements of the framework. For the ChartDirector AJAX framework, if you need to pass any parameters from the browser to the server during update, you would need to pass them using custom attributes (see JsChartViewer.setCustomAttr and WebChartViewer.GetCustomAttr). There is also some information in the following thread:

http://www.chartdir.com/forum/download_thread.php?bn=chartdir_support&thread=1251798926

Hope this can help.

Regards
Peter Kwan

  Re: realtime charting
Posted by Jason Snyder on Feb-08-2011 03:40
I can follow the other conversations you showed me to a point, but there are some differences between that code and my version of ChartDirector.  For instance IsPartialUpdateRequest() is only a static method for me, but is an instance method in the other messages.  I've tried to duplicate the code, but the custom attributes are not making it to the server.

Client:
      var viewer = JsChartViewer.get('<%=WebChartViewer1.ClientID%>');
      viewer.setCustomAttr("xroot", xroot.value.toString());
      viewer.setCustomAttr("catg", catg.value.toString());
      viewer.setCustomAttr("dt", dt.toString());
      viewer.partialUpdate();

Server (ASP.NET C#)
      viewroot = viewer.GetCustomAttr("xroot");
      category = viewer.GetCustomAttr("catg");
      dtParam = viewer.GetCustomAttr("dt");

The CustomJsAttrs array is emtpy, so all values are null.  Can you help me?

  Re: realtime charting
Posted by Peter Kwan on Feb-09-2011 03:56
Attachments:
Hi Jason,

Sorry for not clarifying the differences between the .NET and the Java editions of ChartDirector.

In the .NET edition of ChartDirector, the code structure for partialUpdate is slightly different from the Java edition of ChartDirector. The examples on how to use the "partialUpdate" method are in the "Zoomable and Scrollable Charts" section.

Basically, you would need to use "WebChartViewer1.LoadViewerState();" first on the server side to make the Javascript custom attributes available to the server.

I have attached a working example for your reference.

Hope this can help.

Regards
Peter Kwan
realtimedemo_tooltips_param.aspx
realtimedemo_tooltips_param.aspx

8.02 Kb