Highstock vs. Google Charts in Performance

Question

A) I use the Highstock graphics library for my financial project. However, I am bogged down in performance issues. My working implementation of Highstock has i) 5 diagrams in diagram ii) several rows (and row types) in column iii) to points on the graph iv) new data coming in about once per second, adding a point and animating the graph to the left. However, there are several important issues that I encounter with this setting:

• Rendering is very slow. This is a performance issue due to the number (and number of times) of graphs that are drawn.
• It is not possible to adjust the time range adjustment at the bottom. Performance issue due to freezing controls
• I can add a point, the animation of the graph to the left. However, I cannot add a flag with this new data point. See This SO Problem. .

B) I checked these other SO questions ( Highstock Performance Error , Highcharts Performance Enhancement? ), And tested my solutions with very limited improvement:

:turboThreshold 50 ;; tick-list length will be a max of 100 :shadow false :marker {:enabled false} :plotOptions{:series {:enableMouseTracking false}} 

C) I do not see a simple solution to these Highstock problems. This is a great library. But I looked at the Google Maps API to see if it could fit those points.

• The performance of the Google Charting API exceeds Highstock ... , given all the interactions below
• Multiple charts on one page
• Multiple overlapping diagrams in 1 view
• Graphs for: lines, areas (ranges), histograms, threshold lines (see red and green lines)
• It’s easy to add a flag to a point in my time series
• It's easy to add a point to my time series chart.
• It's easy to add a dot and a flag (at the same time) to my timeline row chart

D) Has anyone gone through something like this? Are there other ways to improve my performance at highstock? Can Google Charts work better here?

thanks

Ps. My tall diagram call looks like this (Clojurescript code):

 (defn chart-fill [selector dataList signal-map strategy-map label] (-> ($ selector) (.highcharts "StockChart" (clj->js {:names [label "Bolling Band" "Simple Moving Average" "Exponential Moving Average"] :rangeSelector {:selected 11} :title {:text label} :chart {:zoomType "x"} :navigator {:adaptToUpdatedData true} :yAxis [{ :title {:text "Technical Analysis"} :height 200 :shadow false :turboThreshold 50 :marker {:enabled false}} { :title {:text "MACD / Signal"} :height 100 :top 300 :offset 0 :lineWidth 2 :turboThreshold 50 :shadow false :marker {:enabled false} :plotOptions{:series {:enableMouseTracking false}}} { :title {:text "MACD Histog"} :height 100 :top 400 :offset 0 :lineWidth 2 :turboThreshold 50 :shadow false :marker {:enabled false} :plotOptions{:series {:enableMouseTracking false}}} { :title {:text "Stochastic Osc"} :height 100 :top 500 :offset 0 :lineWidth 2 :max 1 :min 0 :turboThreshold 50 :shadow false :marker {:enabled false} :plotOptions{:series {:enableMouseTracking false}} :plotLines [{ :value 0.75 :color "red" :width 1 :dashStyle "longdash" :label {:text "Overbought"}} { :value 0.25 :color "green" :width 1 :dashStyle "longdash" :label {:text "Oversold"}}]} { :title {:text "OBV"} :height 100 :top 600 :offset 0 :lineWidth 2 :turboThreshold 50 :shadow false :marker {:enabled false} :plotOptions{:series {:enableMouseTracking false}}}] :series (build-graph-series-data dataList signal-map strategy-map)})))) 

Answer 1

In my experience, the Google Graphics Library works better than Highcharts, however, without additional markup or a copy of your configurations / data, it would be difficult to single out specific problems that could lead to poor performance.

Recommendation: NVD3 line diagram with viewfinder

If you are after (or some kind of chart really) on your stock chart, perhaps the most powerful graphics library there is d3 .

There is a (companion) library that uses d3 called nvd3 , which provides sets of multiple graphs, you may want to look at the line diagram with the viewfinder . This doesn’t exactly coincide with what you have at the moment, but in my experience not only performance improves, but if you know a little JS / d3, it’s infinitely easier to tune under the hood, and not just cosmetically, plus there are a lot more people there with experience and ready to help!

Answer 2

It looks like you're open to alternative libraries, so have you watched RickShaw or Cubism ?

Both are based on D3, so you have a good combination between the power of direct editing D3 and the convenience of pre-assembly of some materials.

Cubism, in particular, focuses on scaling for many data points.