How to create charts with Daru-view and Highcharts

Posted by Shekhar Rajak | 0 comments

Post categories:

Ruby

 

 

In the last blog post, we have seen how daru-view gem is easy to use to plot charts using the Highcharts javascript library. In this post, we will see how we can use daru-view gem to create interactive charts in any Ruby application framework such as Rails, Sinatra, Nanoc, and Hanami.

An MVC framework is useful when we have to design a modular and extendable complex application. Daru-view will be helpful in this case, since it can provide the Highcharts library with straightforward API within any Ruby Web applications. By the way, you can use Daru gem API in the controller for any dataset analysis or operations.

In Ruby web application, we need to load the dependent js files for the chart; that means we have to load highcharts.js, highstock.js, and highmap.js files to be able to create the interactive charts.

Daru-view, Highcharts and Rails application

Let’s see how to combine daru-view, Highcharts, and Rails.

To use the daru-view gem in your application, add this in gemfile gem 'daru-view'

Or if you want to use latest version from the Github repository gem 'daru-view', git: 'https://github.com/SciRuby/daru-view'

To set up your layout file for Highcharts in Rails application, it is better to use the daru-view version 0.2.4 feature to include the dependent js files: (read more about initial implementation and usage in this wiki page).

//= require highcharts/highcharts                                                   
//= require highcharts/highcharts-more
//= require highcharts/map
//= require jquery-latest.min
//= require jquery.dataTables

And CSS files can be included as *= require jquery.dataTables

Include the lines below in the layout file head tag:

<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag "application" %>

And that’s it. Now, you have loaded all the dependencies in your Rails app respective web page.

To load the dependencies in Rails application in older versions write the following line:

<%=raw Daru::View.dependent_script(:highcharts) %>

For your information, both ways work offline.

To make the syntax easy, the daru_chart and daru_table helper methods are created for Rails application as alias Daru::View::Plot and Daru::View::Table respectively. To explore more about the subject, check here. You can also check my Rails applications to get more insight into this repository demo_daru-view

Sintra, Nanoc, and Highcharts

Let see now how to use Highcharts with Sintara, Nanoc, Hanami or any other Ruby web application framework.

Setup your layout file for Highcharts in Sinatra application

It is worth to mention that in web applications you might deal with multiple layout files, that means different head tags for different pages. In our case, if there are pages where the Highchart library is used you need to load the Highcharts dependent js files; so here how the views/highcharts_layout.erb looks like:

<!DOCTYPE html>
 <html>
  <head>
   <title>highcharts</title>
   <!-- dependent script -->
   <%= Daru::View.dependent_script(:highcharts) %>
 </head>
 <body>
   <%= yield %>
 </body>
</htm>

So Daru::View.dependent_script(:highcharts) loads the dependent script for us and this layout should be used wherever we want to plot with Highcharts.

Setup your layout file for Highcharts in Nanoc application

For Nanoc applications, the steps are similar to Sintra applications by using the layout file to load the dependencies. In our case, we are using layouts/highchart_layout.html file:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Highcharts examples&lt/title>
    <!-- you don't need to keep this, but it's cool for stats! -->
    <meta name="generator" content="Nanoc &lt%= Nanoc::VERSION %>">
    <%= highcharts_dependent_js %>
  </head>
  <body>
    <div id="main">
      <%= yield %>
    </div>
  </body>
</html>

Plotting charts

The plotting charts step is the same for Sintra and Nanoc.

Writing Ruby code to get the Highcharts plot object will be the same as discussed in the previous blog post. All you have to do is to paste the HTML and the JS code into the view file using #div method (i.e., plot_object.div will return the chart’s HTML code). Here are some explanations, if we have bar_highcharts as Daru::View::Plot ruby object then to get the chart in the web page we need to generate its HTML and JS code equivalent. The method #div will help to do that bar_highchart.div.

We can use bar_highchart.div to display the chart whenever required; if the page has a Highcharts layout that means Highcharts dependent js is added to that page.
The chart’s options are in this object bar_highchart.options.

The #div method is to display the chart on the web page, similar to #show_in_iruby which is used to display in IRuby notebook.

Again, if you want to learn more about the subject, feel free to check the demos of Rails, Sinatra, Nanoc web applications in this Github repository. You can download the repository and set up the applications to play with more APIs.

One Rails example is hosted in Heroku, which was created after the GSoC 2017 coding period to demonstrate the features of daru-view and daru-io gem. You can find the source code for this in Github repository.

Conclusion

I hope you have enjoyed this article as much as I did writing it. Feel free to share your experience with Daru-view and Highcharts in the comment below or SciRuby Group, open an issue, and contribute by creating new PR. You are welcome to visit these links to expand your knowledge about the subject: