Question

I need to plot thousands of points, perhaps close to 50,000 with the dojo charting library. It works, but it’s definitely very slow and lags the browser. Is there any way I can get better performance?

EDIT:

I solved by applying a render filter to the data. Essentially, I have a new item parameter called “render” which is set to false by my json source if the point is expected to overlap others. My DataSeries then queries for all points where render:true. This way all of the data is there still for non-visual sources that want all of the points, while my charts now run smoothly.

Psuedocode:

def is_overlapped(x, y, x_round, y_round)
    rounded_x = round(x, x_round)
    rounded_y = round(y, y_round)
    hash = hash_xy(rounded_x, rounded_y)

    if(@overlap_filter[hash].nil?)
      @overlap_filter[hash] = true
      return false
    end

    return true
end

x_round and y_round can be determined by the x and y ranges, say for example range / 100

Answer 1

I know this isn’t probably exactly the answer you’re looking for, but have you considered simply reducing the number of points you are plotting? I don’t know the specific function of the graph(s), but I’d imagine most graphs with that many points are unnecessary; and no observer is going to be able to take that level of detail in.

Your solution could lie with graphing techniques rather than JavaScript. E.g. you could most likely vastly reduce the number of points and use a line graph instead of a scatter plot while still communicating similar levels of information to your intended target.