dekj Posted April 10, 2009 Report Share Posted April 10, 2009 I have three ChartFX charts in a webpage, named Chart1, Chart2, and Chart3, which are bound to rows in a SQL Server database. I want to have them update using UserCallback instead of a Postback, to have a quicker update with no flicker of the page. I found that a postback took about 10 seconds to update the page, while callbacks took about 3 seconds. I also wanted to have the updates run automatically every 10 seconds, once they are started. First, in the form in your webpage in the .aspx file, add a button and a textbox. The button is to start the automatic updates, and the textbox is to give you visual confirmation that the callbacks are executing. As the charts are updated, the textbox will show '1', '2', and then '3'. <input id="Button1" type="button" value="Start Constant Update" onclick="return Button1_onclick()" /> <input id="Text1" type="text" /> Next, just after the <head> and <title> tags in this same file, add the javascript. < script language="javascript" type="text/javascript">// <!CDATA[ var alertIDcb = null;var delaycb = 1;var alertIDmaster = null;var delaymaster = 10000var bConstantUpdate = false // uncomment this to have the updates begin automatically after 20 seconds //alertIDmaster = setTimeout("callbackAll()",20000); function callbackChart1() { SFX_onCallbackReadyDelegate = function (context, result) {SFX_processing = false;var resultObject = document.getElementById('Text1'); resultObject.value = result;alertIDcb = setTimeout("callbackChart2()",delaycb); }; SFX_processing = false;SFX_SendUserCallback('Chart1','1',false); } function callbackChart2() { SFX_onCallbackReadyDelegate = function (context, result) {SFX_processing = false;var resultObject = document.getElementById('Text1'); resultObject.value = result;alertIDcb = setTimeout("callbackChart3()",delaycb); }; SFX_processing = false;SFX_SendUserCallback('Chart2','2',false); } function callbackChart3() { SFX_onCallbackReadyDelegate = function (context, result) {SFX_processing = false;var resultObject = document.getElementById('Text1'); resultObject.value = result; if (alertIDcb) { clearTimeout(alertIDcb); }SFX_onCallbackReadyDelegate = null; };SFX_processing = false; SFX_SendUserCallback( 'Chart3','3',false);} function callbackAll() { callbackChart1();alertIDmaster = setTimeout("callbackAll()",delaymaster); } function Button1_onclick() {if (alertIDmaster) { clearTimeout(alertIDmaster); }; if (bConstantUpdate) { bConstantUpdate = false;var resultObject = document.getElementById('Button1'); resultObject.value = "Start Constant Update";var resultObject = document.getElementById('Text1'); resultObject.value = "";} else { bConstantUpdate = true;var resultObject = document.getElementById('Button1'); resultObject.value = "Stop Constant Update"; callbackAll(); }; } // ]]> </ script> Finally, in your aspx.vb file, add the following to the end of the file. Protected Sub Chart1_UserCallback(ByVal sender As Object, ByVal e As ChartFX.WebForms.UserCallbackEventArgs) Handles Chart1.UserCallback e.Result = e.Param sender.DataBind() End SubProtected Sub Chart2_UserCallback(ByVal sender As Object, ByVal e As ChartFX.WebForms.UserCallbackEventArgs) Handles Chart2.UserCallback e.Result = e.Param sender.DataBind() End SubProtected Sub Chart3_UserCallback(ByVal sender As Object, ByVal e As ChartFX.WebForms.UserCallbackEventArgs) Handles Chart3.UserCallback e.Result = e.Param sender.DataBind() End Sub First, some initial information. The calls to SFX_SendUserCallback and SFX_onCallbackReadyDelegate are not documented anywhere in the manuals I received with ChartFX. I only found out about them in the KnowledgeBase articles and forums, and the examples given there for multiple charts don't work. They're really great, but I sure would like to have more information about them. And I'm astounded that the examples given by the SoftwareFX people don't work for multiple charts. I still don't know what "SFX_processing" is used for, and I have no idea what the 'context' parameter for SFX_onCallbackReadyDelegate is. So I had to find all this out by trial and error. I found that you CANNOT call SFX_SendUserCallback until both the javascript routine AND the SFX_onCallbackReadyDelegate routine for the last call are executed AND exit out. So to call the SFX_SendUserCallback for the next chart in a series requires the use of javascript timeouts. The way it works is this. You press the button, and it calls callbackAll. This routine calls callbackChart1, and then sets a master timer 'alertIDmaster' for the next update to all the charts. There is this master timer 'alertIDmaster' for kicking off the updating of all the charts, and a second timer 'alertIDcb' for kicking off the individual usercallbacks. callbackChart1 sets the function definition for SFX_onCallbackReadyDelegate, and then executes the SFX_SendUserCallback for Chart1, and its second parameter is set to '1', and the 3rd parameter is 'false', which forces a usercallback instead of a postback. This call executes the Chart1_UserCallback routine in the aspx.vb file. This routine in turn sets its result to the param sent to it ('1'), executes a DataBind on the chart1 which causes the chart to update, and returns. I have it return the result from the param simply to show how to transfer information from the javascript to this routine and then to the Delegate function. Anyway, the SFX_onCallbackReadyDelegate function is called at some point, supposedly when the UserCallback finishes. In fact, it appears to be called as perhaps the last thing in the UserCallback function, but still within it, so that you CANNOT call the next UserCallback function from within the Delegate. So, the SFX_onCallbackReadyDelegate function is executed. It sets the textbox value to the parameter sent to it; this lets you have visual confirmation that the SFX_onCallbackReadyDelegate function has been executed, and the entire process for Chart1 is about done. This function then calls a javascript setTimeout call, alertIDcb, to execute the next javascript function, callbackChart2, with a timeout of 1 millisecond. I found that this short of a timeout works OK. The SFX_onCallbackReadyDelegate function then exits, and Chart1 is done. When the alertIDcb timeout times out, callbackChart2 is executed. This does pretty much the same thing: defines SFX_onCallbackReadyDelegate to set a timeout to call callbackChart3 when it executes, then calls SFX_SendUserCallback for Chart2. The Chart2_UserCallback function in the aspx.vb file is executed, then control passes back to the new SFX_onCallbackReadyDelegate function, which sets a timeout to call callbackChart3 after 1 millisecond. callbackChart3 again does the same for Chart3, except that its SFX_onCallbackReadyDelegate sets the new SFX_onCallbackReadyDelegate to null and clears the timeout alertIDcb. After 10 seconds, the master timer alertIDmaster kicks off the whole process again. Pressing the button a second time clears the master time alertIDmaster, and stops the automatic updating. If you want the updating to begin automatically, uncomment the line noted at the start of the javascript code. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.