I am a Ruby developer. How can I use Highcharts?

Posted by Shekhar Rajak | 0 comments

Post categories:

Ruby

 

Hey Rubyist! In this article, I will show you how to plot an interactive charts with just a few lines of Ruby code, thanks to Highcharts javascript library and Daru-view.

Daru-view (by Ruby Science Foundation) is a plugin gem for Daru; that allows users to generate charts using Highcharts javascript library in IRuby notebook and any Ruby web application framework (Rails/ Sinatra/ Hanami/ Nanoc). So let’s see how to create interactive charts by setting up three different charts using Highcharts, Highstock, and Highmaps.

Installation

The first step is to install Daru, and here are the steps to do so:

  1. Add the following line to your application’s Gemfile:gem 'daru-view', git: 'https://github.com/SciRuby/daru-view'.
  2. Execute this command line $ bundle to launch the automatic installation or use this command line to install it manually $ gem install daru-view.

Highcharts and Daru-view

In this demo, I will create a simple line chart to display this data [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175].

I am using IRuby notebook to write the code, but feel free to use any other editor that suits you. Open your editor, then set up the plotting library globally to use in Ruby application/program, and add the Highcharts library:require 'daru/view' Daru::View.plotting_library = :highcharts

Now, let’s create the Plot object that will contain data and chart options :

lineChart_demo = Daru::View::Plot.new(
	data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
)
lineChart_demo.show_in_iruby

Guess what, that is it, we are done 🙂

The code above plots the line chart in IRuby notebook cell:

Let’s check how to customize a chart by using Highcharts options to create a 3D pie chart for example.

We may have few (manually written) javascript code in Highcharts options.

All you have to do is to write or add a few lines of JavaScript in the object Highcharts options, then pass the object as a parameter into the Plot object (Check the code below):

data= [{
    type: 'pie',
    name: 'Browser share',
    data: [
        ['Firefox', 45.0],
        ['IE', 26.8],
        {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
        },
        ['Safari', 8.5],
        ['Opera', 6.2],
        ['Others', 0.7]
    ]
}]
options = {
chart: {
    type: 'pie',
    options3d: {
        enabled: true,
        alpha: 45,
        beta: 0
    }
},
title: {
    text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
    pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        depth: 35,
        dataLabels: {
            enabled: true,
            format: '{point.name}',
            style: {
                  color: "(Highcharts.theme && Highcharts.theme.contrastTextColor) || 'red'".js_code
            },
            connectorColor: 'silver'
        }
    }
}
}
pie_chart = Daru::View::Plot.new(data, options)
pie_chart.show_in_iruby

Highstock and Daru-view

The process to create a Highstock chart is almost similar to Highcharts; you have to add the data and the options, then pass them as parameters to the Plot object. The only difference is to add another parameter chart_class: ‘stock’ to indicate the chart type as a stock chart.

The code below displays a dynamic stock chart:

opts = {
    chart: {
      events: {
          load: "function () {

              // set up the updating of the chart each second
              var series = this.series[0];
              setInterval(function () {
                  var x = (new Date()).getTime(), // current time
                      y = Math.round(Math.random() * 100);
                  series.addPoint([x, y], true, true);
              }, 1000);
          }".js_code
      }
  },
    rangeSelector: {
        buttons: [{
            count: 1,
            type: 'minute',
            text: '1M'
        }, {
            count: 5,
            type: 'minute',
            text: '5M'
        }, {
            type: 'all',
            text: 'All'
        }],
        inputEnabled: false,
        selected: 0
    },
    title: {
        text: 'Live random data'
    },
    exporting: {
        enabled: false
    }
  }
  series_dt = [{
    name: 'Random data',
    data: "(function () {
        // generate an array of random data
        var data = [],
            time = (new Date()).getTime(),
            i;

        for (i = -999; i <= 0; i += 1) {
            data.push([
                time + i * 1000,
                Math.round(Math.random() * 100)
            ]);
        }
        return data;
    }())".js_code
  }]
dynamic_data = Daru::View::Plot.new(series_dt, opts, chart_class: 'stock')
dynamic_data.show_in_iruby

For more details and example about how to use Highstock with daru-view, feel free to check this wiki page.

Highmap and Daru-view

Well, I guess you get it; creating Highmaps chart is not different than Highcharts or Highstock. And again don’t forget to specify the chart type in the Plot object chart_class: 'map'.

# To import data from json url
    require 'daru/io'
    worldDataFrame = Daru::DataFrame.read_json(    'https://cdn.rawgit.com/highcharts/highcharts/680f5d50a47e90f53d814b53f80ce1850b9060c0/samples/data/world-population-density.json',
      )
    # we don’t want less than 1 value
    value = value.map{ |elem| elem < 1 ? 1 : elem}
    worldDataFrame['value'] = value
    options = {  
      chart: {
                map: 'custom/world'
            },
            title: {
                text: 'Zoom in on country by double click'
            },
            mapNavigation: {
                enabled: true,
                enableDoubleClickZoomTo: true
            },
            colorAxis: {
                min: 1,
                max: 1000,
                type: 'logarithmic'
            }
      }
    data = [{
                data: worldDataFrame.to_json,
                joinBy: ['iso-a3', 'code3'],
                name: 'Population density',
                states: {
                    hover: {
                        color: '#a4edba'
                    }
                },
                tooltip: {
                    valueSuffix: '/km²'
                }
            }]
    world_map = Daru::View::Plot.new(data, options, chart_class: 'map')
    world_map.show_in_iruby

This result is the following world map:

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: