GSoC 2108 Project [ Advance features in daru-view ] discussion


I think you changed the example. There is no such error.

That error will come when DataTables.js file is not loaded correctly.


iruby notebook is already loading the jquery.min.js which is one of the dependent file for DataTables (so we are not loading it). Another file named jquery.dataTables.js we are loading in iruby notebook which is messing(kind of) with iruby notebook’s dependent js (when notebook is exported as html page, we can see the <script src=""></script>) . You can see it working if you download/export as html page and remove the <script src=""></script> line.

Alternate way I can think of is loading the jquery.min.js and jquery.dataTables.js each time in cell before DataTable script.



Right now, I have looked into the approaches to incorporate js files in each web application separately and am still searching for some combined approach to achieve the same.


Let us know the detail about your approach for different web applications.


I have added the feature to implement HighStock class in daru-view. It can be tracked through this PR.


@Prakriti, let us know the points you want to discuss in hangout. We can schedule it on Sat - 19th May 2018 .


Following are the points which I want to discuss:

  1. In the implementation of HighMaps, many of the HighMaps require additional js code (other than options and data) so less number of examples will be covered.
  2. There is some conflict with the arrangement of dependent js files of highmap, highstock, highchart and their modules. (Some of the maps require highmaps dependency but Chart keyword to draw the map so I can not separate out the dependent js files of highmap and highchart)


Regarding the dependent js files of HighMaps and HighStock, I am unable to check which order of js files is working as IRuby notebook examples are working abruptly while loading the js files. For eg, first, I loaded only the dependent files of HighStock so highcharts and highstock were working fine. Then I removed those js files (from dependent_js in iruby_notebook.rb) and included only those of HighMap. Now, HighMap was working fine but HighStock was also working (while HighCharts examples are not working).
Sometimes HighStock js files worked for both HighMap and HighStock. Not only these, at first highmaps js was not drawing a map and after a while with the same dependent js, Map was correctly drawn.
I also tried it in incognito window but the result was same. Examples are working very abruptly.


Regarding the last problem I was facing, I tried running the HighMap examples using rails app and they run as expected. This might underline that the problem with the IRuby notebook is the cache stored previously producing vague results. Also, I got to know the correct order of the dependent js of HighMaps and HighStock.
Still, there is some problem with the colours in IRuby for some examples of HighMap which are working correctly in rails.


@Prakriti, Meanwhile you try to improve your testcases. Understand how it is written in Nyaplot, lazy_high_charts, google_visualr gem. Check the coverage report for googlecharts, highcharts adapter in daru-view and try to make it +90% (may be in separate PR).

daru-view is plugin gem for daru, so you must have specs where data as daru dataframe/vector . Don’t just use the #chart, #chart.options to set the options all the time. Use, options) , and this object for plotting and it’s instance methods to test.



@shekharrajak, Sure, will do it.


@Prakriti, We can discuss about the progress and doubts on 19th may after 9pm.


I will be available. Thanks.


Summary of today’s (19th May) meeting:

  1. Loading of dependent js files: We have a bunch of dependent js files to load for highcharts, highstock, highmaps and their modules. So, for now, we plan to load dependent js files for just highstock, highmaps and some of the common modules and might be able to provide some option for the others while creating the chart.
  2. Data of HighMap in Daru::DataFrame/ Daru::Vector format: Some of the examples like Honeycomb Map and Distribution Map uses data which is difficult to incorporate Daru::DataFrame/ Daru::Vector format. So, for now, I am trying on how to get the data in the required format.
  3. I will add the required rails examples in demo_daru-view repo.


Report for 19th May:
I worked on improving the coverage report of Highcharts.rb through this commit.


Thanks @Prakriti, for writing Minutes of meeting .

I feel that you need to learn about SOLID design principles , software design patterns, better exception handling, extendable & modular and some other concepts to code like a pro.

Meanwhile keep writing examples in demo-daru_view (learn rails, sinatra, nanoc, hanami) repo.



I was thinking of a way to load dependent js files of modules separately. We can provide another option modules for the user but that would create problems:

  1. In web frameworks dependent js files must be loaded in head tag and fetching js files in the head tag would be difficult from that option.
  2. In IRuby notebook, we can also set options as plot.chart.options = options, so we’ll be loading dependent js when show_in_iruby will be called (as we are not getting options in the plot object here) which might create conflicts in display of chart before loading appropriate js files.

So, I thought of including the modules (by the user as a separate parameter) when the plotting_library or dependent_script is set but that would create design problems as it is highcharts specific. Any other idea that we could try?


Please add more lines for clarification. How it would be difficult.

Hm, then it will load the same js code whenever show_in_iruby is called.

I hope you will come with some good idea before friday.


Report for 22nd May:
I spent the day working on custom styling CSS.
There are two modes of Highcharts: Classic and Styled.
Classic mode provides some custom CSS styling and does not require any additional dependencies while styled mode uses js dependency (like replacing the older one + the CSS dependency and provides full custom CSS styling.
I have implemented the Styled mode for web frameworks but as there is no method to load CSS files in IRuby notebook, so I have kept classic mode for IRuby notebook where some styling can be provided.
User needs to provide the required CSS styling in CSS option.
I have opened a PR regarding the same.
Difficulties: For loading CSS in IRuby notebook, custom.css could be a rescue but then everytime user needs to load the CSS files in custom.css. I am searching for some other way out (refer).


Report for 23rd May:

  1. I added examples of the custom styling CSS in IRuby notebook in this PR.
  2. I worked on separating the dependent js files. User can provide the required js files in modules option as a list of Strings. In IRuby notebook, these will be loaded when show_in_iruby is called (working fine now, had some problem earlier). I have implemented it in this PR. I have modified the examples of HighMaps and HighStock accordingly.
    In web frameworks, div method is called. So I tried loading the dependent js in to_html method which is working correctly. My concern is that the dependent files of the modules are not loaded in the head tag instead they are loaded into the body before the script of the chart, so will it be a problem?
  3. Added HighMap example for data as Daru::DataFrame in this commit.

Also, have a look at the revised blog post for the first week. :slight_smile: