|
 Image Map performance issues with high-density charts |
| Posted by Doug Cook on May-21-2015 19:29 |
|
Hi, I'm generating graphs with very high density data (number of data points >> 10x the
horizontal pixel resolution of the graph). Usually I'm using LineLayer for this. I'm using Perl
but I suspect that has nothing to do with the issue at hand.
The graphs themselves work well. (I seem to remember, but can't find the reference for,
ChartDirector doing some optimizations for high-density line graphs).
The issue is that I am also generating an HTML image map using getHTMLImageMap(). The
map generated has, as far as I can tell, all the original points on it, so the <area> elements
highly overlap, causing performance problems in two ways:
1) The page size itself is much larger (26K without the image map; >1MB with it), so load
times are much slower.
2) We're using jQuery tooltips, and jQuery wants to iterate over all the <area> elements on
page load to register event handlers, which can take a long time even on a very fast
machine.
I can probably find ways around #2 in Javascript, but issue #1 would still remain.
What I would like to do is have the resolution of the image maps match the resolution of the
graph. I could add some complexity to my code to reduce the amount of data I'm actually
plotting without screwing up the graph appearance. Probably not rocket science, but I'd
rather not add more complexity if not necessary. I could construct the image map myself,
calling getImageCoor() for all my data points, parsing the return value, and using some
algorithm to throw out highly overlapping areas (it's OK for our application to not have
tooltips for every data point; we don't, anyway, at this resolution). But I suspect that will be
a tad slow, given the large number of points and the parsing required.
But before I embark on any of these solutions, I thought I would ask in this forum. This can't
be a new problem, and if I'm missing a more simple or better solution, perhaps via
ChartDirector, I'd love to know. I've searched around the forum archives, but wasn't able to
find anything that helped.
Many thanks for your help!
Doug Cook |
| Re: Image Map performance issues with high-density charts |
| Posted by kevin colt on May-21-2015 20:34 |
|
| Hi, I?don?t know the exact solution for?it, but?In ouroffice, we?generally prefer?koolchart?for javascript charts,?HTML 5 charts, Pie charts?etc. http://www.koolchart.com |
| Re: Image Map performance issues with high-density charts |
| Posted by Peter Kwan on May-22-2015 02:37 |
|
Hi Dong,
For large number of points, the most efficient method to plot the chart and to display the
data values of the points on the client side is to use fast line mode for the graphics (see
LineLayer.setFastLineMode), and to use programmable track cursors for the interactive
display. For programmable track cursors, ChartDirector will automatically remove all
overlapping track lines. Also, the data structure for the track cursors are much more
efficient that HTML area tags (HTML itself is not an efficient data structure).
If you must use image maps, ChartDirector will automatically remove adjacent points that
substantially overlap. For example, if the two points are just 1 pixel apart, and their
image map happens to be a square 11 pixels in width, the squares certainly do not
exactly overlap as their center differ by 1 pixel, but they are probably overlapping enough
that ChartDirector will remove one of them.
However, ChartDirector cannot perform multi-point overlapping test, that is, to test if the
image map of one point is overlapping with those of all other points combined. For
example, if you have 10 points at the same x-coordinates but different y-coordinates,
the image map of the first 9 points combined together may completely overlap with that
of the 10th point, but this type of testing is too CPU intensive to the practical.
Also, the image map of a point in a line chart may not be a square. It can comprises of
the map for the line segment linking that point to the previous point, and to the next
point. This makes it harder for the image map of two adjacent points to overlap.
The followings are some methods to reduce the size of the image map:
(a) Use a large image map width for the line (see LineLayer.setImageMapWidth). If the
image map width is large, it is easier for the image map to substantially overlap. For
example, you can try to set the image map width to 50, and compare that with 10 to see
the difference.
(b) Do not apply the image map for the original line layer. (Use Layer.setHTMLImageMap
to disable the image map for the line layer.) Instead, create a transparent line layer using
just a subset of the points. In this way, you can get a much smaller image map.
(c) Put the minimum amount of information in the image map. For example, instead of
setting the tooltip to "Revenue = 100 millions", just use "100" to shorten the tooltip. Then
on the client side, use Javascript to change it to "Revenue = 100 millions".
Regards
Peter Kwan |
| Re: Image Map performance issues with high-density charts |
| Posted by Doug Cook on May-24-2015 15:30 |
|
Hi Peter,
Thanks for the quick, informative, in-depth response.
Yes, I did know about FastLineMode (we are using that), but didn't know about the ability to
export the chart data in JSON and the client-side Javascript support. Very useful. I've
updated our code to use that, and it is indeed much smaller and much faster. I still need
image maps for a few things, but there's nothing stopping me from using image maps for
those things in tandem with the programmable track cursors, which works just fine.
Best regards,
Doug Cook |
|
Forum Home
Search
Message List
Post Message