GSoC 2018 | Coding Week – 5, 6

The writer of this blog post is an avid fan of relating things to her fictional world and after successfully defeating “the one who can’t be named” in her last adventurous writings, this time she is up to writing “The one with the G.S.O.C”- more relaxing and soothing indeed.


The past two weeks involved much more challenges than I originally anticipated (sadly, don’t have “Unagi”). I spent most of my time working with them. Following are the tasks that I worked upon during this course.


The ChartEditor class is used to open an in-page dialog box that enables a user to customize a visualization on the fly.

For example, you have drawn a bar chart and you want to try out some modifications on it. Say, its title is pretty small and you want to see it bigger or you want to try out some new Chart type. Poof!! try counting to five Mississippi and you can do it all on the same chart. 🙂



How would I use it in daru-view?

Just need to add `chart_class` as Charteditor and done. You can see the edit button to customize the chart. All the changes related to this feature can be tracked in this PR.


I still don’t know what is Chandler’s job. 😛

By the way regarding the class, in IRuby notebook, the dialog box appears behind the elements of the notebook. I have tried some ways to figure this out (refer) but the problem still persists. I am looking for ways to fix this.

Show Multiple Charts in GoogleCharts

This feature allows a user to draw the google charts and tables side by side (by the way side by side was more of a Joey thing :P). This means multiple charts in a single cell in IRuby notebook and in a single row in web frameworks. Let’s look at an example that I implemented in daru-view:


Implementation and use in daru-view:

  • To create the Charts side by side, a user needs to create a `PlotList` object and pass the Array of Plot objects in it as the data.
  • call show_in_iruby method and Charts multiple charts will appear.

For the implementation of this feature, another class `PlotList` has been implemented which takes in the Array of Daru::View::Plot objects as data. For further implementation details, check out this PR. Have a look at some more examples here.

Export GoogleCharts to different formats

“Not a big fan of exporting things out. It felt so bad in the last episode.”

So, exporting of GoogleCharts to different formats involves a lot of challenges as GoogleCharts official JS does not provide any way to export the chart. However, we can have access to a PNG image of a chart (only corecharts and geocharts) using the getImageURI() method.

By creating a dummy element, I have managed to export the chart in PNG format, however, it is difficult for other formats. download

To export the chart in pdf format, we can use jspdf which works fine in rails app but is producing error in IRuby notebook as the jspdf dependency doesn’t load properly in the IRuby notebook. I tried it in this PR. See the example

Further, after more of googling, I found out about the cloudformatter (examples). I have also tried out an example using the above but this also doesn’t work in IRuby notebook as it requires a JQuery dependency which might conflict with the existing loaded dependencies of IRuby notebook. This feature is good as we can provide buttons as in highcharts:

  • For every chart type of GoogleCharts.
  • It provides export to PDF, JPG and PNG format.

I tried it in this PR. Right now, I have kept only the PNG format as it works for both IRuby notebook and web frameworks.

The past reader of my blog will be expecting a closing quote so to quench them

“Written with love to infer that Ross and Rachel were on a break”


One thought on “GSoC 2018 | Coding Week – 5, 6

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s