1000 points in 500 pixels

The question of plotting a line graph with thousands of data points came up again today. This always puzzled me; if your chart is only 500 pixels wide, why would you try to draw a chart with 1000 points? It would leave only half a pixel for each point. Flash is kewl but it won’t render half pixels and even if it did, rendering 1000 lines in Flash is a little slow.

The quick option we discovered was to skip data points. For most data you can skip anywhere from 2 to 10 points and the chart won’t change. Skipping points not only speeds up rendering but it can also result in a cleaner chart.

Take a look at the following example that renders a closing stock value over four years, 1130 data points. You can change the number of records to skip at runtime and see the change in the chart and rendering time.

By skipping 5 or 10 points you can dramatically decrease the amount of time to render the chart and improve the clarity by reducing clutter.

This example was done with a slightly modified version of the original Flash Charting Components from Macromedia since they’re freely available. The concept and code works the same for our B-Line Charting Components 2.0 and DRK4 Charting Components.

Download example source code.

7 thoughts on “1000 points in 500 pixels

  1. Hi Sam,

    Skipping works but you can’t blind skip because you might skipover abrupt changes. Averaging doesn’t quite work either since you’ll misrepresent true range of those abrupt changes.

  2. Good point. If you skip over outliers you can change the chart but with this many points it’s less likely–really depends on the type of data being represented. Another mechanism would be to find the hi and low within your range and use those points for plotting–that should correct the issue.

  3. If you enter *.5 instead of a whole number you get a neat effect =)

    Also, don’t enter zero whatever you do — that’s what got me started.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>