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

Message ListMessage List     Post MessagePost Message

  Reagrding Multiple chart on one page
Posted by Mikey on Nov-28-2014 19:53
| Reply | Monitor
Is there any mechanism in ChartDirector through which I can draw eight different charts on
one jsp page which gets all refreshed automatically after 10 second without any user
interaction .

Moreover I want to dispaly a table on the page which holds the values of y-axis.

Thanks in advance.

  Re: Reagrding Multiple chart on one page
Posted by Peter Kwan on Nov-28-2014 23:26
| Reply | Monitor
Hi Mikey,

You may refer to the "Realtime Charts" sample code for some examples of updating 1
chart periodically and automatically. To update 8 charts, there are two methods:

(a) Repeat the updating code to 8 charts. For example, in the "Simple Realtime Chart"
sample code, the chart is:

<img id="ChartImage1" src="realtimechart.jsp?chartId=demoChart1">

and the line that updates the chart is:

JsChartViewer.get('ChartImage1').streamUpdate();

For 8 charts, please use:

<img id="ChartImage1" src="realtimechart1.jsp?chartId=demoChart1">
<img id="ChartImage2" src="realtimechart2.jsp?chartId=demoChart1">
<img id="ChartImage3" src="realtimechart3.jsp?chartId=demoChart1">
<img id="ChartImage4" src="realtimechart4.jsp?chartId=demoChart1">
<img id="ChartImage5" src="realtimechart5.jsp?chartId=demoChart1">
<img id="ChartImage6" src="realtimechart6.jsp?chartId=demoChart1">
<img id="ChartImage7" src="realtimechart7.jsp?chartId=demoChart1">
<img id="ChartImage8" src="realtimechart8.jsp?chartId=demoChart1">

and for updating the chart, please use:

{
JsChartViewer.get('ChartImage1').streamUpdate();
JsChartViewer.get('ChartImage2').streamUpdate();
JsChartViewer.get('ChartImage3').streamUpdate();
JsChartViewer.get('ChartImage4').streamUpdate();
JsChartViewer.get('ChartImage5').streamUpdate();
JsChartViewer.get('ChartImage6').streamUpdate();
JsChartViewer.get('ChartImage7').streamUpdate();
JsChartViewer.get('ChartImage8').streamUpdate();
}

(b) Instead of updating 8 different charts, you can combine 8 chart objects into one
chart using the MultiChart object. In this way, you only need to update one chart (the
MultiChart, which contains 8 charts). Using the "Simiple Realtime Chart" example, you just
need to modify the "realtimechart.jsp" script. Instead of creating and outputting a single
chart, you can create 8 charts, then contain them into a MultiChart object, and output
the MultiChart object.

One drawback of the MultiChart method is that the 8 charts must be updated all at once.
For example, you cannot update one chart every 8 seconds, and another chart every 25
seconds. Another drawback is that the 8 charts must fit in a single image. For example,
you cannot have one chart at the top-left corner of your web page, and another chart
at the bottom-right corner, with some HTML in between, as this would mean there are
two separate images. The advantage of this method is that there is less network
overhead, as one HTTP connection is need to update 8 charts all at once.


For displaying a table which holds the "values of the y-axis", I am not sure exactly what
the "values of the y-axis" mean. The y-axis has a range (the min and max values), as
well as some labels. Note that the data values in general are not the values of the y-
axis. As the data values come from your code, so your code already have the data
values, and there is no need to ask ChartDirector for the data values.

For displaying a table which holds the "values of the y-axis", do you mean the display the
y-axis range or the y-axis labels on a table? By "table", do you mean an HTML table on
your web page, or a table that is docked to the axis (like in the Data Table (1)" sample
code)?

If you are referring to the axis table, you can use the same method as in the "Data Table
(1)" to create the table. If you are referring to HTML table, you would need to use your
own code for the HTML. ChartDirector can only generates the charts. The HTML part of
your web page would need to be generated by your own code. You can use
Axis.getMinValue, Axis.getMaxValue and Axis.getTicks and Axis.getLabel to obtain the
axis range and the axis labels.


Hope this can help.

Regards
Peter Kwan