|
 Update an image via ajax |
| Posted by Adrian on Oct-09-2014 00:53 |
|
Hi, I'm hoping yuo can guide me with this issue. Please see my small explanation below.
<!-- Currently working JSP page -->
<%
XYChart c = (XYChart)request.getSession().getAttribute("MyChart");
String chrt = c.makeSession(request, "chart1");
%>
<html>
<body>
<img src='<%=response.encodeURL("trans.jsp?"+chrt)%>' id="chrt_id" />
</body>
</html>
Under the image tag, I need to add 3 links : Bar, Line, Area
When the user clicks a link, the chart image needs to call the server and show the new
chart type. Now, I can get this done simply by calling the code that generated the original
chart image. But I need to avoid updating the whole jsp. I just want the image tag to
update with the new image with a new chart type and not update the whole jsp.
Do you have any ideas or examples that could help me out.
Thanks |
| Re: Update an image via ajax |
| Posted by Peter Kwan on Oct-10-2014 03:17 |
|
Hi Adrian,
There are several examples in ChartDirector in which the chart is updated without
refreshing the web page. They are described in the "Realtime Charts" session and the
"Zoomable and Scrollable Charts" session of the ChartDirector documentation.
If what you need is just as described in your message (just update the chart, but does
not need to support user interactions like track cursor, tooltips, zooming, scrolling,
clickable hot spots, etc), the simplest sample code is the "Simple Realtime Chart (Web)".
In that example, the chart is updated by a timer. In your case, you can use the 3 links to
update the chart. In brief, it is like:
<!-- A separate HTML or JSP page -->
<html>
<body>
<img id="abc" src="createbarchart.jsp" />
<br />
<a href="javascript:;"
onclick="document.getElementById('abc').src='createlinechart.jsp';">Line Chart</a>
</body>
</html>
<!-- createbarchart.jsp -->
<%
XYChart c = .... create a bar chart ....;
.....
//
// Output using direct streaming, which is suitable for updating the <IMG> tag
//
try
{
// stream the chart to the browser and terminate immediately
out.clear();
if (WebChartViewer.streamChart(response, c.makeChart2(Chart.PNG)))
return;
}
catch (IllegalStateException e)
{
// Some very old servers may not support streaming. So we are forced to redirect
// to the browser to use the traditional method.
response.sendRedirect(response.encodeRedirectURL("getchart.jsp?" +
c.makeSession(request, "chart1")));
return;
}
%>
... similar code for createlinechart.jsp ....
Hope this can help.
Regards
Peter Kwan |
| Re: Update an image via ajax |
| Posted by Adrian on Oct-14-2014 02:57 |
|
Thanks for your answer, it worked great.
One final question. As mentioned, I'm converting from one XYChart to another. I'd like to
avoid recreating my whole chart since XYCHarts (Area, Line & Bar) share a lot of
properties. In my code, only the layer is different between them.
My XYChart object is being stored in a session, so I'd like to simply take my XYChart
Object, and remove its current layer & add a new one.
So assume I have XYChart Bar. Now I need to convert it to a XYChart Line. Can I simply
remove the BarLayer from the XYChart Object and add LineLayer? Or do I really need to
create the XYChart from the start?
Thanks |
| Re: Update an image via ajax |
| Posted by Peter Kwan on Oct-15-2014 02:18 |
|
Hi Adrian,
For your case, the only method is to recreate the XYChart. Note that you should not
need to write extra code, as you can essentially use the same code to create all kinds of
chart. For your case, it is like:
XYChart createMyChart(int flags)
{
....... Code to create an XYChat, and add either a BarLayer, LineLayer
....... or AreaLayer based on the flag
}
In my opinion, recreating the chart is more desirable than storing the chart in a session
variable.
(a) The code to re-create the chart can be simplier, as you do not actually need to
rewrite the code.
(b) The XYChart object is a rather large object, containing large amounts of
uncompressed pixels, not to mention many other book-keeping information. Objects
stored in session variables can only be freed when the session ends, but the server
cannot know when a browser session ends. Even if the server does not receive requests
from the browser for sometime, it still cannot know for sure if the session can be closed.
So the server can only use timeout, typically around 20 minutes, to close the session. It
means the memory would be tied up for at least 20 minutes for a single user with a single
chart, even if the session variable is never used (that is, the user does not switch to
another chart). If there are a lot of users and each user ties up large amount of memory
for at least 20 minutes, it would be stressful for the server.
(c) When comparing to storing the chart, recreating the chart only needs slightly more
CPU. In creating a chart for web usage, the majority of the CPU is used for compressing
the pixels in realtime into PNG or JPEG, not in drawing the chart itself, and compressing
the pixels is required no matter that chart is recreated or not. On the other hand, storing
the chart ties up a lot of memory for a long period, even if the user never uses the
session variable. This is wasteful not only in memory, but also wasteful in CPU, as CPU is
needed in managing and garbage collecting the memory.
Regards
Peter Kwan |
| Re: Update an image via ajax |
| Posted by Adrian on Oct-17-2014 00:46 |
|
| Thank you very much for the info. |
|
Forum Home
Search
Message List
Post Message