|
 Auto refresh for Finance Chart with Trackline and Zoom with Real Time Tick |
| Posted by Srinivas on Mar-30-2016 22:00 |
|
Dear Support,
Currently we are using timerTick() event(javascript function) for automatic/real time tick update chart. It is working fine. But, it is refreshing the entire page. So, The page is loading with default values. Hence, to avoid this problem, we used session/state variables to store the updated values.
In earlier version we used AJAX. And we are tried to include Trackline, Zooming options, Here, after Timer auto refresh or button click event the trackline & zooming functionality is not working properly.
And one more issue is in desktop browser the chart is showing very good, but the same page in mobile the chart visibility is not good, it's look like shrinking the image.
Please guide me. If possible please provide an example working with ajax,trackline,zooming options for finance chart using any database with real time/tick update.
Thanks and Regards.
Srinivas |
| Re: Auto refresh for Finance Chart with Trackline and Zoom with Real Time Tick |
| Posted by System Administrator on Mar-31-2016 07:12 |
|
Hi Srinivas,
There are two versions of the timerTick event in our sample code. In the "Simple Realtime Chart" sample code, it uses streamUpdate to update the chart only. In the "Realtime Chart with Track Line" sample code, it uses the "partialUpdate" method, which updates both the chart image and also sends additional data for the track cursor. In both cases, only the chart is updated, not the "entire web page".
If you are using realtime chart with track line and zooming, you would need to use the partialUpdate method. If you use this method, you can use custom attributes (see WebChartViewer.setCustomAttr and JsChartViewer.setCustomAttr) to pass additional parameters (such as any "state" variables you need). As an example, in the "Zooming and Scrolling with Track Line" sample code, the custom attributes are using to keep track of the check boxes in the user interface.
Note that for zooming and scrolling in realtime chart, you would need to think about what is the exact behaviour. For example, if your realtime chart is displaying from 10:00am to 10:15am, and the user wants look at earlier data from 10:03am to 10:04am, he can zoom in to that range. Now when one additional minute of new data comes in, what should the chart display? Should it automatically update to 10:04am to 10:05am, or should it remain at 10:03am to 10:04am (so that the user can examine the earlier data)? If the chart should remain at 10:03am to 10:04am, does it mean that we do not need to update the chart when there is zooming (that is, zooming should disable realtime update)?
In any case, in zooming, your code would need to determine the "full range" as well as the viewport position. When new data come in, the "full range" may need to be updated. You may need to update the viewport too depending on exactly what you would like the behaviour to be.
For the mobile browser, because the screen is much smaller, the browser may shrink the chart image to fit the screen, so it is normal the chart will be much smaller. You may also design your web page so that the chart will not be shrunk, but then the user may need to scroll the web page horizontally to see the entire chart. So in practice, most people will just create a different version of the chart for mobile devices. The mobile chart should contain much less pixels to avoid the browser from having to shrink the chart to fit the screen. As the chart is smaller, it will have less labels, which is good for mobile devices. You may want to use a larger font size as well.
Regards
Peter Kwan |
| Re: Auto refresh for Finance Chart with Trackline and Zoom with Real Time Tick |
| Posted by Srinivas on Apr-01-2016 17:07 |
|
Dear peter kwan
Thank you,for replying us as you asked in the previous post when the chart is zoomed in then no need to update the chart in real time, zooming functionality is working fine.but we are facing a problem with Auto refresh.
For example initially the chart is loading with default values and it is working perfectly, but when we switch to another exchange, time frame or script(Note:all these are drop down list in UI) then the chart is loading with selected values.
after auto refresh the chart is loading with default values (initial values what we set at the time of Page_load in code in asp.net )
we used TimerTick() with partialUpdate() method(which you have provide in the simple real time chart)
Please find the below attachment below
|
| Re: Auto refresh for Finance Chart with Trackline and Zoom with Real Time Tick |
| Posted by Peter Kwan on Apr-02-2016 01:17 |
|
Hi Srinivas,
In ASP.NET, like other web framework, the server will not remember what is the setting of the controls, as HTTP is stateless. However, for "Postback" requests, the browser will send the state of the controls back to the server, so the server can know what is the state of the control currently on the browser side. But for other type of requests (such as partialUpdate requests), the state of the controls will not be send back to the server, so the server would not know what is state of the control on the browser side.
For your case, you may consider to use custom attributes for partialUpdates to keep track of the state of the controls. As mentioned in my previous message, in the "Zooming and Scrolling with Track Line" sample code, the custom attributes are using to keep track of the check boxes in the user interface. You may use it as an example.
In brief, on the browser side, during initialization, add some Javascript code to copy the state of the controls to the custom attributes before the partialUpdate. For your information, in the "in the "Zooming and Scrolling with Track Line" sample code, the following code is used:
// Before sending the update request to the server, we include the state of the check boxes as custom
// attributes. The server side charting code will use these attributes to decide the data sets to draw.
viewer.attachHandler("PreUpdate", function() {
var checkBoxes = ["data0CheckBox", "data1CheckBox", "data2CheckBox"];
for (var i = 0; i < checkBoxes.length; ++i)
viewer.setCustomAttr(checkBoxes[i], document.getElementById(checkBoxes[i]).checked ? "T" : "F");
});
Note that the above is for checkboxes. You may modify it for other type of HTML controls.
On the server side, the chart is drawn depending on the custom attributes. In the "Zooming and Scrolling with Track Line" sample code, it is like:
if (viewer.GetCustomAttr("data0CheckBox") != "F") {
layer.addDataSet(dataSeriesA, 0xff3333, "Alpha Series");
}
Depending on how you are using the attributes, for the first chart, you may want configure some default values for the attributes so your charting code has some valid values to work on.
As an alternative to use custom attributes, you can also try session variables. In the first chart and in Postback requests, you can copy the state of the controls to session variables. In partialUpdate requests, you can use the session variables to determine the state of the controls.
Hope this can help.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message
(Srinivas)