Why are line charts faster than scatter plots? Why are scatter plots slower?

Scatter charts are quite different than line charts when visualizing the data. For line charts, each point acts as an indicator of where to draw a line to and depending on the amount of points on a screen, we can estimate drawing lines and provide a faster performance by skipping points that do not provide any extra visual value.

For scatter charts, we can't do any estimations since each and every point has to be accounted for so we don't miss out on any outliers.

This really comes into play when datasets are of large value. It's essentially a pixel vs data length comparison. For example, on a line chart we can't visualize a million points on a 600px wide chart. There is just no room, so we provide an accurate estimate hitting all of the important values. 

If your speed concerns are related to hovering, you may want to consider the Canvas rendering. The SVG render may have performance issues with high volume scatter charts for tooltips, but Canvas does not have any performance issues when it comes to hovering.

This is mostly due to how we treat SVG element lookups compared to canvas based region mapping. My recommendation would be to set your render mode to canvas. The rendering method of canvas can be changed in the 'output' parameter in the render method.

zingchart.render({
  id:'myChart',
  height:400,
  width:'100%',
  data: myJSON,
  output:'canvas'
});

If you absolutely do need to utilize the SVG render, we do have an internal flag we use to calculate the size of tooltips.  If we disable this calculation by setting

zingchart.FASTWIDTH = true;

tooltips in svg will appear faster but the tooltip sizing will remain the same.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.