{"id":17226,"date":"2018-12-21T15:20:06","date_gmt":"2018-12-21T15:20:06","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=17226"},"modified":"2026-01-12T10:03:19","modified_gmt":"2026-01-12T10:03:19","slug":"i-am-ruby-developer-how-can-i-use-highcharts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/i-am-ruby-developer-how-can-i-use-highcharts\/","title":{"rendered":"I am a Ruby developer. How can I use Highcharts?"},"content":{"rendered":"

 <\/p>\n

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<\/a>.<\/p>\n

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

Installation<\/h4>\n

The first step is to install Daru, and here are the steps to do so:<\/p>\n

    \n
  1. Add the following line to your application\u2019s Gemfile:gem 'daru-view', git: 'https:\/\/github.com\/SciRuby\/daru-view'<\/code>.<\/li>\n
  2. Execute this command line $ bundle to launch the automatic installation or use this command line to install it manually $ gem install daru-view<\/code>.<\/li>\n<\/ol>\n

    Highcharts and Daru-view<\/h4>\n

    In this demo, I will create a simple line chart to display this data [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]<\/code>.<\/p>\n

    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<\/code><\/p>\n

    Now, let\u2019s create the Plot<\/code> object that will contain data and chart options :<\/p>\n

    lineChart_demo = Daru::View::Plot.new(\r\n\tdata: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]\r\n)\r\nlineChart_demo.show_in_iruby\r\n<\/pre>\n
    Guess what, that is it, we are done \ud83d\ude42<\/p>\n
    The code above plots the line chart in IRuby notebook cell:<\/p>\n
    \"\"<\/p>\n
    Let\u2019s check how to customize a chart by using Highcharts options to create a 3D pie chart<\/a> for example.<\/p>\n
    We may have few (manually written) javascript code in Highcharts options.<\/p>\n
    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<\/code> object (Check the code below):<\/p>\n
    data= [{\r\n    type: 'pie',\r\n    name: 'Browser share',\r\n    data: [\r\n        ['Firefox', 45.0],\r\n        ['IE', 26.8],\r\n        {\r\n            name: 'Chrome',\r\n            y: 12.8,\r\n            sliced: true,\r\n            selected: true\r\n        },\r\n        ['Safari', 8.5],\r\n        ['Opera', 6.2],\r\n        ['Others', 0.7]\r\n    ]\r\n}]\r\noptions = {\r\nchart: {\r\n    type: 'pie',\r\n    options3d: {\r\n        enabled: true,\r\n        alpha: 45,\r\n        beta: 0\r\n    }\r\n},\r\ntitle: {\r\n    text: 'Browser market shares at a specific website, 2014'\r\n},\r\ntooltip: {\r\n    pointFormat: '{series.name}: {point.percentage:.1f}%<\/b>'\r\n},\r\nplotOptions: {\r\n    pie: {\r\n        allowPointSelect: true,\r\n        cursor: 'pointer',\r\n        depth: 35,\r\n        dataLabels: {\r\n            enabled: true,\r\n            format: '{point.name}',\r\n            style: {\r\n                  color: \"(Highcharts.theme && Highcharts.theme.contrastTextColor) || 'red'\".js_code\r\n            },\r\n            connectorColor: 'silver'\r\n        }\r\n    }\r\n}\r\n}\r\npie_chart = Daru::View::Plot.new(data, options)\r\npie_chart.show_in_iruby\r\n<\/pre>\n
    \"\"<\/p>\n
    Highstock and Daru-view<\/h4>\n
    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.<\/p>\n
    The code below displays a dynamic stock chart:<\/p>\n
    opts = {\r\n    chart: {\r\n      events: {\r\n          load: \"function () {\r\n\r\n              \/\/ set up the updating of the chart each second\r\n              var series = this.series[0];\r\n              setInterval(function () {\r\n                  var x = (new Date()).getTime(), \/\/ current time\r\n                      y = Math.round(Math.random() * 100);\r\n                  series.addPoint([x, y], true, true);\r\n              }, 1000);\r\n          }\".js_code\r\n      }\r\n  },\r\n    rangeSelector: {\r\n        buttons: [{\r\n            count: 1,\r\n            type: 'minute',\r\n            text: '1M'\r\n        }, {\r\n            count: 5,\r\n            type: 'minute',\r\n            text: '5M'\r\n        }, {\r\n            type: 'all',\r\n            text: 'All'\r\n        }],\r\n        inputEnabled: false,\r\n        selected: 0\r\n    },\r\n    title: {\r\n        text: 'Live random data'\r\n    },\r\n    exporting: {\r\n        enabled: false\r\n    }\r\n  }\r\n  series_dt = [{\r\n    name: 'Random data',\r\n    data: \"(function () {\r\n        \/\/ generate an array of random data\r\n        var data = [],\r\n            time = (new Date()).getTime(),\r\n            i;\r\n\r\n        for (i = -999; i <= 0; i += 1) {\r\n            data.push([\r\n                time + i * 1000,\r\n                Math.round(Math.random() * 100)\r\n            ]);\r\n        }\r\n        return data;\r\n    }())\".js_code\r\n  }]\r\ndynamic_data = Daru::View::Plot.new(series_dt, opts, chart_class: 'stock')\r\ndynamic_data.show_in_iruby\r\n<\/pre>\n
    \"\"<\/p>\n
    For more details and example about how to use Highstock with daru-view, feel free to check this wiki page<\/a>.<\/p>\n
    Highmap and Daru-view<\/h4>\n
    Well, I guess you get it; creating Highmaps chart<\/a> is not different than Highcharts or Highstock. And again don\u2019t forget to specify the chart type in the Plot<\/code> object chart_class: 'map'<\/code>.<\/p>\n
    # To import data from json url\r\n    require 'daru\/io'\r\n    worldDataFrame = Daru::DataFrame.read_json(    'https:\/\/cdn.rawgit.com\/highcharts\/highcharts\/680f5d50a47e90f53d814b53f80ce1850b9060c0\/samples\/data\/world-population-density.json',\r\n      )\r\n    # we don\u2019t want less than 1 value\r\n    value = value.map{ |elem| elem < 1 ? 1 : elem}\r\n    worldDataFrame['value'] = value\r\n    options = {  \r\n      chart: {\r\n                map: 'custom\/world'\r\n            },\r\n            title: {\r\n                text: 'Zoom in on country by double click'\r\n            },\r\n            mapNavigation: {\r\n                enabled: true,\r\n                enableDoubleClickZoomTo: true\r\n            },\r\n            colorAxis: {\r\n                min: 1,\r\n                max: 1000,\r\n                type: 'logarithmic'\r\n            }\r\n      }\r\n    data = [{\r\n                data: worldDataFrame.to_json,\r\n                joinBy: ['iso-a3', 'code3'],\r\n                name: 'Population density',\r\n                states: {\r\n                    hover: {\r\n                        color: '#a4edba'\r\n                    }\r\n                },\r\n                tooltip: {\r\n                    valueSuffix: '\/km\u00b2'\r\n                }\r\n            }]\r\n    world_map = Daru::View::Plot.new(data, options, chart_class: 'map')\r\n    world_map.show_in_iruby\r\n<\/pre>\n
    This result is the following world map:<\/p>\n
    \"\"<\/p>\n
    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<\/a>, open an issue<\/a>, and contribute by creating new PR<\/a>. You are welcome to visit these links to expand your knowledge about the subject:<\/p>\n