|
 Realtime demo |
| Posted by Bas on Sep-01-2009 17:55 |
|
Hi Peter
Question re: realtime demo and realtime chart. I implemented your example with the JSP file calling the chart using the following streamupdate:
.............. some code here
<td align = "center">
<div>
<!-- ****** Here is the image tag for the chart image ****** -->
<img id="ChartImage1" src="aseportal-chart.jsp?chartId=demoChart1&COMMODITY=<%=strCommodity%>&etcetcetc">
</div>
</td>
.............. some more code here
function updateDisplay()
{
JsChartViewer.get('ChartImage1').streamUpdate();
}
window.setInterval("updateDisplay()", 5000);
</script>
Inside the <div> tag I call the image JSP called aseportal-chart.jsp. Towards the end of that file I use the following:
try
{
// stream the chart to the browser and terminate immediately
out.clear();
if (WebChartViewer.streamChart(response, c.makeChart2(Chart.PNG)))
return;
}
The streaming works like a dream, however now I am reading on the support pages that this capability doesnt support image maps. I do very much want to create an image map for tooltips on the chart. I understand that this is possible using the partial update. The question is: Can I leave the current JSP structure intact and just add the partial update? If yes, can you help me where to put what?
Thanks a million
Bas |
| Re: Realtime demo |
| Posted by Bas on Sep-03-2009 22:41 |
|
Hi Peter, I cant get it to work. Would you be so kind to look at my question again? I am wondering if my structure (one JSP calling the other one with the chart inside an <img> tag ) is going to work for the partialUpdate as well? The examples you mention are to use either <div> tag or <jsp:include......> but I'd rather keep my structure intact if I can....
Thx
Bas |
| Re: Realtime demo |
| Posted by Peter Kwan on Sep-04-2009 01:57 |
|
Hi Bas,
As according to the HTML/HTTP standard, it is not possible to use the <IMG> tag only to update an image with image maps.
As according tothe HTML/HTTP standard, the image and the image map must be sent to the browser using two separate HTTP connections. The <IMG> tag is capable of one connection only, and that connection must be an image, not an image map.
So your code somehow must create a separate HTTP connection in addition to the <IMG> tag, and you must add some code to dynamically receive the image map on the browser side and update the HTML part of the web page.
One easy way to do so professionally (flicker free update) is to use the ChartDirector partialUpdate framework, in which the <IMG> tag is replaced by the code generated by ChartDirector that can update both the image and the image map in two HTTP requests.
I am afraid the structure of your code has to be modified somewhat.
(Many people has the impression the image and the image map are part of the same thing, and can be considered as one unit. In practice, in HTML/HTTP, the image and the image map are two completely separated units and must be delivered in two separate HTTP connections. So code that produces both an image and its image map are structurally somewhat different from code that produces only an image.)
Hope this can help.
Regards
Peter Kwan |
| Re: Realtime demo |
| Posted by Bas on Sep-04-2009 16:03 |
|
Okay Peter
I am now trying to restructure the chart into a 1 page solution using the <div> tag and the partialupdate function.
It seems to work, but a nasty thing has been introduced now (it also happens in your zipped example of the realtimedemo with partialupdate). For every refresh there is a flicker with a red cross as if an image cannot be found, together with the word "Updating". What is it caused by and can it be repaired? See attached picture....
Thx
Bas
|
| Re: Realtime demo |
| Posted by Bas on Sep-04-2009 21:33 |
|
Hi
I looked a bit further, and found the reference in the documentation to the wait.gif icon which was not found by the java script.
I am reading that I should copy the file to the same directory where the JS file is. Still, after copying, the red cross appears with the word "Updating"
Can I modify this so that the GIF file is not needed? How & where do I use the updatingMsg option in a JSP?
And one additional question: Now that I have the viewer inside the <%! code %> declaration tag, can I still pass parameters to it from the surrounding JSP code? How do I add them?
Thanks
Bas |
| Re: Realtime demo |
| Posted by Bas on Sep-04-2009 22:59 |
|
Hi Peter. Another update, sorry to clog your support forum 
I had renamed the cdjcv.js file to something else for clarity. Now I named it back to cdjcv.js and the wait.gif starts to appear. Funny reason but must be hardcoded somewhere.... ?
Anyway, back to my last question. Now that the actual chart is called with the following statement instead of using the <img> tag:
<div style="padding:0px 5px 0px 10px">
<!-- ****** Here is the chart image ****** -->
<%=viewer.renderHTML(response)%>
</div>
How can I now pass parameters to my query? Normally I would just append them to the image url. How can I do that now? I need to have the parameters to feed my where clause which is now inside the declaration of the viewer....
Thanks |
| Re: Realtime demo |
| Posted by Peter Kwan on Sep-05-2009 00:10 |
|
Hi Bas,
I am glad to hear that the wait.gif finally appears.
Your are correct the cdjcv.js is hard coded inside cdjcv.js itself. In Javascript, there is no way a script can know which directory it comes from. There is a way to know which directory a script comes from given its file name, but there is no way for a script to know its own file name. So we need to hard code the file name into the script.
If the file name cannot be found, ChartDirector will just use "wait.gif" as the URL of the rotating clock icon. The exact path will be browser dependent and depend on the structure of your page. Some browsers will load it from the directory of the script. Some browsers will load if from the directory of the HTML web page, etc..
Anyway, you can disable the updating message by using JsChartViewer.updatingMsg. The code is:
JsChartViewer.updatingMsg = null;
or
JsChartViewer.updatingMsg = "";
You can put the above line just before the "window.setInterval" line.
To pass parameters to the AJAX query, you would need to use custom attributes. It is because the AJAX query is not necessarily a HTTP GET request. ChartDirector may use a HTTP POST request if a browser cannot support HTTP GET for AJAX data (HTTP POST cannot have query parameters in the URL). It depends on the browser brand and version, browser configuration, and the amount of AJAX data.
To allow the application to pass data back to the server without worrying about the exact nature of the AJAX request, we have included a custom attribute feature in the JsChartViewer.
In your case, before you call partialUpdate, you may add a call to JsChartViewer.setCustomAttr. For example:
if ((updatePeriodObj.timeLeft <= 0) && window.JsChartViewer)
{
var myViewer = JsChartViewer.get('ChartImage1');
myViewer.setCustomAttr("myData", "xxx_yyy_zzz_111222");
myViewer.partialUpdate();
}
On the server side, you can get back the data using WebChartViewer.getCustomAttr. For example:
if (viewer.isPartialUpdateRequest()) {
String mySpecialData = viewer.getCustomAttr("myData");
..........
}
Hope this can help.
Regards
Peter Kwan |
| Re: Realtime demo |
| Posted by Bas on Sep-05-2009 15:54 |
|
It helps a lot indeed, thanks Peter!!!
I hope this is the last question on converting from <img> to partialupdate:
The image is in the middle of a HTML table which has some form elements on the left. There is a submit button which changes some of the query parameters. The parameters are now sent to the viewer using the custom attribute function (thanks for that!!)
I am calling the "updatedisplay" function from the submit button:
<form name="selections" style="display:inline" action="aseportal.jsp" method="post" onSubmit="updateDisplay()" >
However now that I am using the partialupdate, I have to wait still for the next update before the chart is generated with the new parameters. As I don't want to stress the traffic with the database I have set the update to 10 seconds but now the users have to wait maximum 10 seconds before they see the change in parameters reflected in their chart.
Is this something I have to live with because of the delayed nature of partialupdate, or is there a way to force an update immediately when the submit button is pressed?
Thanks for your great support
Bass |
| Re: Realtime demo |
| Posted by Peter Kwan on Sep-05-2009 23:21 |
|
Hi Bas,
There is no delay at all in partialUpdate (except the network delay which occurs in all HTTP requests). When you call partialUpdate, it occurs immediately.
If there is any delay, it must be cause by the other code you use in the updateDisplay function. To solve the problem, you may modify the code in updateDisplay so as not to introduce any delay if it is called by your submit button, or you can just write another update method that does not call delay.
For example, if your updateDisplay function is copied from the sample code, it should be like:
// The followings is executed once every second
function updateDisplay()
{
// Utility to get an object by id that works with most browsers
var getObj = function(id) { return document.getElementById ? document.getElementById(id) : document.all[id]; }
// Get the configured update period
var updatePeriodObj = getObj("UpdatePeriod");
var updatePeriod = parseInt(updatePeriodObj.value);
// Subtract 1 second for the remaining time - reload the counter if remaining time is 0
if (!updatePeriodObj.timeLeft || (updatePeriodObj.timeLeft <= 0))
updatePeriodObj.timeLeft = updatePeriod - 1;
else
updatePeriodObj.timeLeft = Math.min(updatePeriod, updatePeriodObj.timeLeft) - 1;
// Update the chart if configured time has elasped
if ((updatePeriodObj.timeLeft <= 0) && window.JsChartViewer)
JsChartViewer.get('ChartImage1').partialUpdate();
// Update the display to show remaining time
getObj("TimeRemaining").innerHTML = updatePeriodObj.timeLeft + ((updatePeriodObj.timeLeft > 1) ? " seconds" : " second");
}
You can add a flag so that it updates immediately:
// The followings is executed once every second
function updateDisplay(updateImmediately)
{
// Utility to get an object by id that works with most browsers
var getObj = function(id) { return document.getElementById ? document.getElementById(id) : document.all[id]; }
// Get the configured update period
var updatePeriodObj = getObj("UpdatePeriod");
var updatePeriod = parseInt(updatePeriodObj.value);
// Subtract 1 second for the remaining time - reload the counter if remaining time is 0
if (!updatePeriodObj.timeLeft || (updatePeriodObj.timeLeft <= 0) || updateImmediately)
updatePeriodObj.timeLeft = updatePeriod - 1;
else
updatePeriodObj.timeLeft = Math.min(updatePeriod, updatePeriodObj.timeLeft) - 1;
// Update the chart if configured time has elasped
if ((updateImmediately || (updatePeriodObj.timeLeft <= 0)) && window.JsChartViewer)
JsChartViewer.get('ChartImage1').partialUpdate();
// Update the display to show remaining time
getObj("TimeRemaining").innerHTML = updatePeriodObj.timeLeft + ((updatePeriodObj.timeLeft > 1) ? " seconds" : " second");
}
Then in your submit button, you can call "updateDisplay(true)" to update immediately.
Hope this can help.
Regards
Peter Kwan |
| Re: Realtime demo |
| Posted by Bas on Sep-07-2009 16:20 |
|
Hi Peter, thanks for your suggestion but I'm not sure that this is my issue.
I had actually already stripped down the updateDisplay() function to the following:
<script>
// The followings is executed once 5 seconds
function updateDisplay()
{
var myViewer = JsChartViewer.get('ChartImage1');
myViewer.setCustomAttr("strFacility", '<%=strFacility%>');
myViewer.partialUpdate();
}
window.setInterval("updateDisplay()", 5000);
</script>
What seems to happen that the custom Attribute is only given to the viewer object at the first update, but not when initially creating the image.
When I hit my submit button, I do see the "updating" message and icon, but only the next time it auto-refreshes is when the new chart is shown with the parameter as shown above. If I hit my submit button twice it also works....
I tried adding the parameter to the following section as well, but the effect is not good. At first it seems good but when the auto-refresh comes, the value of the custom attribute is lost:
<%
// Create the WebChartViewer object
WebChartViewer viewer = new WebChartViewer(request, "ChartImage1");
viewer.setCustomAttr("strFacility", strFacility);
drawChart(viewer);
if (viewer.isPartialUpdateRequest()) {
// Since it is a partial update, there is no need to output the entire web page. We stream the
// chart and then terminate the script immediately.
out.clear();
viewer.partialUpdateChart(response);
return;
}
%>
I hope you have an idea where I need to look
Bas |
| Re: Realtime demo |
| Posted by Peter Kwan on Sep-07-2009 20:00 |
|
Hi Bas,
In your code, the setCustomAttr is executed everytime.
However, everytime the strFacility is set to the same constant value. It is because in your code, the <%=strFacility%> is a constant. (It may be a variable on the server side, but it is a constant on the browser side, and your code is executed on the browser side.) If you use "View Source" to view the HTML source on the browser side, you can see the strFacility is in fact a constant.
Because the strFacility is a constant, it is normal the server will see the same value everytime.
Would you mind to clarify what you would like to achieve using setCustomAttr? In your existing code, you are pass a value <%=strFacility%> from the browser to the server. However, the value comes from the server in the first place (which becomes a constant in the browser). So you are passing something the server already knows back to the server.
Originally, I though you would like a method to pass data from the browser to the server (because you mention about query parameters). So the data should be a Javascript variable (something originates from the browser side).
Regards
Peter Kwan |
| Re: Realtime demo |
| Posted by Bas on Sep-07-2009 20:20 |
|
Hi Peter (first of all please note I'm not a professional developer so forgive me if I explain myself badly
Please take a look at the attached code. Beofre I worried about the Imagemap, I had used the "old" realtime demo example (with realtimedemo.jsp calling realtimechart.jsp in an <img> tag) for my portal. This worked really great and the only unfortunate thing was that it didnt support the imagemap thingy.
Now I have restructured my JSP as you instructed (code attached) so that I don't call the "chart JSP" anymore. It is replaced with the viewer object inside the main jsp.
The intention of the function is to have some form elements on the left (see picture). The submit button should refresh the chart with the new query parameters (and the autorefresh just continues to retrieve fresh data with the same query until you hit submit again). In the picture I am still using your realtime chart example for the time being, just passing one parameter to it using the CustomAttribute function to see if it works. (which FYI does send the value of strFacility to the chart, I checked in the browser source but anyway). My problem is that the chart refreshes itself with the new parameters at the scheduled update, not when clicking the Submit button.
Hope you can make some spaghetti from my code. As stated before I am not a programmer, just a guy who needs charts....
thanks
Bas
|
| Re: Realtime demo |
| Posted by Peter Kwan on Sep-08-2009 00:29 |
|
Hi Bas,
I may have some misunderstand on how you would like your system to work. My guess is that when the user press the "Update Chart" button (the submit button), you would like to entire web page to get reloaded. (I guess this would be how your original <IMG> tag code was working. Is this correct? Originally, I thought you want to reload only the chart, but not the entire web page.)
If this is the case, please remove the onSubmit="updateDisplay()" in your <FORM> tag. In this way, when the user press the "Update Chart" button, the entire page should reload immediately, and so the chart and the page will update immediately.
Also, in your code, I cannot find the closing form tag "</form>". I suggest you define the FORM so that it includes only your input fields. Put the <form ...> tag immediately before the <div class = "boxselector"> line, like:
<form name="selections" style="display:inline" action="aseportal.jsp?ORGANIZATION=<%=strOrganization%>" method="post" >
<div class = "boxselector">
............
and put the </form> tag immediately after the block that contains the submit button, like:
.....
<div class = "boxselector">
<input type="submit" style="width:190px" value="Update chart" >
</div>
</form>
For the strFacility, I suggest to use the following code, which initialize the setCustomAttr only when it is the first chart.
// Create the WebChartViewer object
WebChartViewer viewer = new WebChartViewer(request, "ChartImage1");
if (viewer.isPartialUpdateRequest()) {
drawChart(viewer);
// Since it is a partial update, there is no need to output the entire web page. We stream the
// chart and then terminate the script immediately.
out.clear();
viewer.partialUpdateChart(response);
return;
}
else {
// this is the initial chart - set the custom attribute because the drawChart function needs it
viewer.setCustomAttr("strFacility", strFacility);
drawChart(viewer);
}
Hope this can help.
Regards
Peter Kwan |
| Re: Realtime demo |
| Posted by Bas on Sep-08-2009 01:23 |
|
Peter you're a STAR
Thanks a lot, this is EXACTLY what I meant. Thanks for your support, buying the chartdirector license was the wisest decision we have taken in years, the top quality support makes the difference!!!
Regards,
Bas |
|
Forum Home
Search
Message List
Post Message
(Bas)