|
 streamUpdate error: Cannot read property 'indexOf' of undefined |
| Posted by James on Mar-27-2019 11:59 |
|
Hi there,
I am trying to streaming charts in MVC and have an issue using a function.
From the controller, I added multiple RazorChartViewer objects into a collection and pass to the view. And, they render just fine.
And, each chart has a button to click to change a view (ex. minute5 to day1) of the chart.
In the javascript, I can get the chart object with Id and see all their properties.
If I request .partialUpdate(), there is no error and I can see that the request pass to the controller.
If I request .streamUpdate(), I get this error message:
var viewer = JsChartViewer.get('AAPL'); <== this works
viewer.streamUpdate() <== not working
cdjcv.js:31 Uncaught TypeError: Cannot read property 'indexOf' of undefined
at ase_11 (cdjcv.js:31)
at _jcvp.streamUpdate (cdjcv.js:499)
at changeCycle (streaming:249)
at HTMLSpanElement.onclick (streaming:81)
viewer.partialUpdate() <== it requests to a controller. But, the chart is not updated after return Content(viewer.PartialUpdateChart()) from the controller.
It seems that single viewer in a page doesn't have this issue and I can use streamUpdate() fine.
Is it because I am working multiple chart objects in a page?
I will appreciate any help. |
| Re: streamUpdate error: Cannot read property 'indexOf' of undefined |
| Posted by Peter Kwan on Mar-28-2019 05:04 |
|
Hi James,
You can have as many charts in a page as you like. I have attached an example based on the "realtimedemo" sample code. I extend it to include two charts. One of the chart is updated by a timer, and the other chart can be updated by pressing a button. Both are using streamUpdate.
For your case, one way that can lead to this error is that the 'AAPL' is a ID or a tag, but not an <IMG> tag, or there are multiple tags all called 'AAPL'. In this case, JsChartViewer.get('AAPL') will not fail (since it points to a valid tag), but streamUpdate will fail with the "indexOf" error, because the tag is not an <IMG> tag and does not have a SRC attribute.
Many browser have developer tools. You can use it to view the web page, and check if 'AAPL' is really an <IMG> tag that has a SRC attribute, and that there are only one 'AAPL' in the web page.
If the above still does not solve the problem, is it possible to come up with a sample code that can reproduce this problem (perhaps by modifying my attached code) so I can trouble-shoot it?
Regards
Peter Kwan
|
| Re: streamUpdate error: Cannot read property 'indexOf' of undefined |
| Posted by James on Mar-28-2019 10:15 |
|
===> there are multiple tags all called 'AAPL'. <===
This was the issue. There is a div with id: AAPL and a chart with id: AAPL. Once, I changed div id to different one, it worked. I really appreciate your assistance. I spent several hours to resolve this and you spotted exact issue.
One more question.
Regarding streamUpdate() and partialUpdate(), can you explain the difference and usage case? It seems to me that they are working almost same for my needs but I would like to know when I should use which function. I specially interest in performance and traffic as I want to update multiple charts in real time.
Thank you again, |
| Re: streamUpdate error: Cannot read property 'indexOf' of undefined |
| Posted by Peter Kwan on Mar-28-2019 14:46 |
|
Hi James,
The HTML part of the web page includes HTML and Javascript, but does not include any image. (It only includes the <IMG> tag, which is just text, not an image.) The browser has to load the image using a separate URL specified in the <IMG> tag. This requires at least two HTTP connections - one for the HTML/Javascript, one for loading the image.
When you update a chart image, the fastest way is to reload the image only, but not the HTML/Javascript. This is streamUpdate. It requires only one HTTP connection.
An image is just a sequence of pixels represented in PNG/JPG/GIF format. "Interaction" features, such as image maps, zoom/scroll support and the Javascript Chart Model (used in programmable track cursors), must be implemented in HTML/Javascript. The partialUpdate can reload both image and the HTML/Javascript used by the chart. This requires two HTTP connections.
In brief, streamUpdate is the quickest, but it is only appropriate if the chart does not have other interactive features. If the chart has tooltips, zoomable or scrollable, or have track cursors, partialUpdate must be used.
Hope this can help.
Regards
Peter Kwan |
| Re: streamUpdate error: Cannot read property 'indexOf' of undefined |
| Posted by James on Mar-28-2019 17:11 |
|
| Thank you so much for the insight. Now, I understand better. |
|
Forum Home
Search
Message List
Post Message
(Peter Kwan)