Skip to content

HighCharts features

Jump to bottom Edit New page
Prakriti Gupta edited this page Aug 16, 2018 · 9 revisions

HighStock

API

To use HighStock, daru-view user just need to pass an additional option chart_class with its value as 'stock' in the third parameter of the Plot object (refer this PR).

For example: hs

Examples

For more examples do visit the following links.

How daru-view generates the JS code

Following are the steps to know how js code has been generated.

  • Firstly, daru-view user will generate the Daru::View::Plot(data, options) object and will call div(for web frameworks and show_in_iruby for IRuby notebook).

  • As plotting_library must already be set to :highcharts, transfer goes to highcharts.rb and then to the display.rb (when the methods div and show_in_iruby are called).

  • Now, in web frameworks ultimately to_html is called. In to_html

    • load_dependences is called to load the additional dependencies:

      • Modules will be loaded only if any dependencies are provided in modules option. These are the additional modules required to draw the chart apart from the ones loaded while setting the plotting_library. Once a module is loaded then there is no need afterwards to load it again.
      • If the HighMap is being drawn by the user, then the required map data will be extracted from options[:map][:chart].

    • chart_class is extracted and compared.

    • If class_chart equals StockChart, then high_stock method from lazy_high_charts is called.

  • In Iruby notebook, ultimately show_in_iruby is called in display.rb. In show_in_iruby

    • Dependencies are similarly loaded if any.
    • Extracted chart_class is passed to high_chart_iruby method.
    • All of the code to generate js in IRuby notebook is present in layout_helper_iruby.rb.

HighMap

API

To use HighMap, a daru-view user just need to pass an additional option chart_class with its value as 'map' in the third parameter of the Plot object.

For example: HighMap

Examples

HighMaps additional official examples for each country can be found here. For more examples do visit the following links.

How daru-view generates the JS code

Following are the steps to know how js code has been generated.

  • Firstly, daru-view user will generate the Daru::View::Plot(data, options) object and will call div(for web frameworks and show_in_iruby for IRuby notebook).

  • As plotting_library must already be set to :highcharts, transfer goes to highcharts.rb and then to the display.rb (when the methods div and show_in_iruby are called).

  • Now, in web frameworks ultimately to_html is called. In to_html

    • load_dependences is called to load the additional dependencies:

      • Modules will be loaded only if any dependencies are provided in modules option. These are the additional modules required to draw the chart apart from the ones loaded while setting the plotting_library. Once a module is loaded then there is no need afterwards to load it again.
      • If the HighMap is being drawn by the user, then the required map data will be extracted from options[:map][:chart].

    • chart_class is extracted and compared.

    • If class_chart equals Map, then high_map method is called to generate the js.

  • In Iruby notebook, ultimately show_in_iruby is called in display.rb. In show_in_iruby

    • Dependencies are similarly loaded if any.
    • Extracted chart_class is passed to high_chart_iruby method.
    • All of the code to generate js in IRuby notebook is present in layout_helper_iruby.rb.

TODOs (Challenges faced - Refer this comment)

  • If the user provides modules again then it will be loaded again (no matter if it's already been loaded). Similarly, map data is loaded again. So, there is a need to optimize this loading of dependent js files by implementing some appropriate design pattern (like proxy design) to load the modules and map data in HighCharts. Refer this comment.
  • As HighCharts supports multiple series in a single chart, we can add a feature to visualize multiple Daru::DataFrame and Daru::Vector in a single chart (Need to think how user will provide the data - maybe in the series format or some other).
  • Due to a large number of map data, js files have been increased tremendously which makes the gem bulky. Another way round is to completely switch to the online mode to load the js files.

Custom Styling CSS in HighCharts

API

To use custom styling CSS in HighCharts, a daru-view user needs to pass an additional option css in which he/she can specify the CSS to apply on that Chart as a String Array.

For example: css

Examples

To understand the usage of this feature, check out some more examples here.

Clone this wiki locally