In [1]:

require 'daru/view'

Out[1]:

true

In [2]:

Daru::View.plotting_library = :highcharts

Out[2]:

:highcharts

In [3]:

data = [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
              [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
    opts = {
      chart:  {
              type: 'spline',
              inverted: true
          },
      title: {
          text: 'Atmosphere Temperature by Altitude'
      },
      subtitle: {
          text: 'According to the Standard Atmosphere Model'
      },
      xAxis: {
          reversed: false,
          title: {
              enabled: true,
              text: 'Altitude'
          },
          labels: {
              formatter: "function () {
                  return this.value + 'km';
              }".js_code
          },
          maxPadding: 0.05,
          showLastLabel: true
      },
      yAxis:{
          title: {
              text: 'Temperature'
          },
          labels: {
              formatter: "function () {
                  return this.value + '°';
              }".js_code
          },
          lineWidth: 2
      },
      legend:{
          enabled: false
      },
      tooltip:{
          headerFormat: '<b>{series.name}</b><br/>',
          pointFormat: '{point.x} km: {point.y}°C'
      },
      plotOptions:{
          spline: {
              marker: {
                  enable: false
              }
          }
      },
    }

Out[3]:

{:chart=>{:type=>"spline", :inverted=>true}, :title=>{:text=>"Atmosphere Temperature by Altitude"}, :subtitle=>{:text=>"According to the Standard Atmosphere Model"}, :xAxis=>{:reversed=>false, :title=>{:enabled=>true, :text=>"Altitude"}, :labels=>{:formatter=>"function () {\n                  return this.value + 'km';\n              }"}, :maxPadding=>0.05, :showLastLabel=>true}, :yAxis=>{:title=>{:text=>"Temperature"}, :labels=>{:formatter=>"function () {\n                  return this.value + '°';\n              }"}, :lineWidth=>2}, :legend=>{:enabled=>false}, :tooltip=>{:headerFormat=>"<b>{series.name}</b><br/>", :pointFormat=>"{point.x} km: {point.y}°C"}, :plotOptions=>{:spline=>{:marker=>{:enable=>false}}}}

In [4]:

chart1 = Daru::View::Plot.new data, opts

Out[4]:

#<Daru::View::Plot:0x0000561f45e18380 @data=[[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]], @options={:chart=>{:type=>"spline", :inverted=>true}, :title=>{:text=>"Atmosphere Temperature by Altitude"}, :subtitle=>{:text=>"According to the Standard Atmosphere Model"}, :xAxis=>{:reversed=>false, :title=>{:enabled=>true, :text=>"Altitude"}, :labels=>{:formatter=>"function () {\n                  return this.value + 'km';\n              }"}, :maxPadding=>0.05, :showLastLabel=>true}, :yAxis=>{:title=>{:text=>"Temperature"}, :labels=>{:formatter=>"function () {\n                  return this.value + '°';\n              }"}, :lineWidth=>2}, :legend=>{:enabled=>false}, :tooltip=>{:headerFormat=>"<b>{series.name}</b><br/>", :pointFormat=>"{point.x} km: {point.y}°C"}, :plotOptions=>{:spline=>{:marker=>{:enable=>false}}}}, @user_options={}, @adapter=Daru::View::Adapter::HighchartsAdapter, @chart=#<LazyHighCharts::HighChart:0x0000561f45e18308 @series_data=[{:type=>nil, :name=>nil, :data=>[[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]}], @options={:chart=>{:type=>"spline", :inverted=>true}, :title=>{:text=>"Atmosphere Temperature by Altitude"}, :subtitle=>{:text=>"According to the Standard Atmosphere Model"}, :xAxis=>{:reversed=>false, :title=>{:enabled=>true, :text=>"Altitude"}, :labels=>{:formatter=>"function () {\n                  return this.value + 'km';\n              }"}, :maxPadding=>0.05, :showLastLabel=>true}, :yAxis=>{:title=>{:text=>"Temperature"}, :labels=>{:formatter=>"function () {\n                  return this.value + '°';\n              }"}, :lineWidth=>2}, :legend=>{:enabled=>false}, :tooltip=>{:headerFormat=>"<b>{series.name}</b><br/>", :pointFormat=>"{point.x} km: {point.y}°C"}, :plotOptions=>{:spline=>{:marker=>{:enable=>false}}}}, @html_options={}, @placeholder="wzsqtvblauf", @user_options={}>>

In [5]:

chart1.show_in_iruby

Out[5]:

In [6]:

# add another chart 
chart1.add_series({
        :data => [[10, 15], [20, -50], [30, -56.5], [40, -46.5], [50, -22.1],
              [55, -2.5], [65, -27.7], [80, -55.7], [90, -76.5]]})

Out[6]:

In [7]:

# add another chart
opts = {
  :type=> 'pie',:name=> 'Total consumption',
  :data=> [
    {:name=> 'Jane', :y=> 13, :color=> 'red'},
    {:name=> 'John', :y=> 23,:color=> 'green'},
    {:name=> 'Joe', :y=> 19,:color=> 'blue'}
  ],
  :center=> [100, 150], :size=> 100, :showInLegend=> false
}
chart1.add_series(opts)
chart1.show_in_iruby

Out[7]:

In [8]:

chart1.chart.class

Out[8]:

LazyHighCharts::HighChart

In [9]:

chart1.chart.series_data

Out[9]:

[{:type=>nil, :name=>nil, :data=>[[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]}, {:data=>[[10, 15], [20, -50], [30, -56.5], [40, -46.5], [50, -22.1], [55, -2.5], [65, -27.7], [80, -55.7], [90, -76.5]], :name=>nil}, {:type=>"pie", :name=>"Total consumption", :data=>[{:name=>"Jane", :y=>13, :color=>"red"}, {:name=>"John", :y=>23, :color=>"green"}, {:name=>"Joe", :y=>19, :color=>"blue"}], :center=>[100, 150], :size=>100, :showInLegend=>false}]

In [10]:

chart1.chart.series_data[2]

Out[10]:

{:type=>"pie", :name=>"Total consumption", :data=>[{:name=>"Jane", :y=>13, :color=>"red"}, {:name=>"John", :y=>23, :color=>"green"}, {:name=>"Joe", :y=>19, :color=>"blue"}], :center=>[100, 150], :size=>100, :showInLegend=>false}

In [11]:

# all te series options can be updated
# removing last pie chart, that was added
chart1.chart.series_data[2] = {}

Out[11]:

{}

In [12]:

chart1.show_in_iruby

Out[12]:

In [13]:

chart1.chart.options

Out[13]:

{:chart=>{:type=>"spline", :inverted=>true, :renderTo=>"krudmenvcpa"}, :title=>{:text=>"Atmosphere Temperature by Altitude"}, :subtitle=>{:text=>"According to the Standard Atmosphere Model"}, :xAxis=>{:reversed=>false, :title=>{:enabled=>true, :text=>"Altitude"}, :labels=>{:formatter=>"function () {\n                  return this.value + 'km';\n              }"}, :maxPadding=>0.05, :showLastLabel=>true}, :yAxis=>{:title=>{:text=>"Temperature"}, :labels=>{:formatter=>"function () {\n                  return this.value + '°';\n              }"}, :lineWidth=>2}, :legend=>{:enabled=>false}, :tooltip=>{:headerFormat=>"<b>{series.name}</b><br/>", :pointFormat=>"{point.x} km: {point.y}°C"}, :plotOptions=>{:spline=>{:marker=>{:enable=>false}}}}

In [14]:

# all the `options` can be set or updated
chart1.chart.options[:chart][:inverted] = false

Out[14]:

false

In [15]:

chart1.div

Out[15]:

"\n<script type='text/javascript'>\n\nvar event = document.createEvent(\"HTMLEvents\");\nevent.initEvent(\"load_highcharts\", false, false);\nwindow.dispatchEvent(event);\nconsole.log(\"Finish loading highchartsjs\");\n\n</script>                <script type=\"text/javascript\">\n        (function() {\n\n          var onload = window.onload;\n          window.onload = function(){\n            if (typeof onload == \"function\") onload();\n                    var options = { \"chart\": { \"type\": \"spline\",\"inverted\": false,\"renderTo\": \"wogpnzhyrlj\" },\"title\": { \"text\": \"Atmosphere Temperature by Altitude\" },\"subtitle\": { \"text\": \"According to the Standard Atmosphere Model\" },\"xAxis\": { \"reversed\": false,\"title\": { \"enabled\": true,\"text\": \"Altitude\" },\"labels\": { \"formatter\": function () {\n                  return this.value + 'km';\n              } },\"maxPadding\": 0.05,\"showLastLabel\": true },\"yAxis\": { \"title\": { \"text\": \"Temperature\" },\"labels\": { \"formatter\": function () {\n                  return this.value + '°';\n              } },\"lineWidth\": 2 },\"legend\": { \"enabled\": false },\"tooltip\": { \"headerFormat\": \"<b>{series.name}</b><br/>\",\"pointFormat\": \"{point.x} km: {point.y}°C\" },\"plotOptions\": { \"spline\": { \"marker\": { \"enable\": false } } },\"series\": [{ \"type\": null,\"name\": null,\"data\": [ [ 0,15 ],[ 10,-50 ],[ 20,-56.5 ],[ 30,-46.5 ],[ 40,-22.1 ],[ 50,-2.5 ],[ 60,-27.7 ],[ 70,-55.7 ],[ 80,-76.5 ] ] },{ \"data\": [ [ 10,15 ],[ 20,-50 ],[ 30,-56.5 ],[ 40,-46.5 ],[ 50,-22.1 ],[ 55,-2.5 ],[ 65,-27.7 ],[ 80,-55.7 ],[ 90,-76.5 ] ],\"name\": null },{  }] };\n        \n        window.chart_wogpnzhyrlj = new Highcharts.Chart(options);\n\n          };\n                })()\n        </script>\n\n<div id=\"wogpnzhyrlj\"></div>"

In [16]:

chart1.show_in_iruby # or do chart1.chart (but it will show chart when notebook is saved)

Out[16]:

In [17]:

# can be updated
chart1.chart.placeholder

Out[17]:

"wzsqtvblauf"

In [18]:

# can be updated
chart1.chart.html_options

Out[18]:

{:id=>"xanhymoikur"}

In [19]:

chart1.chart.html_options[:style] = "opacity: 0.5; height: 720px; width: 1020px"

Out[19]:

"opacity: 0.5; height: 720px; width: 1020px"

In [20]:

chart1.show_in_iruby

Out[20]:

In [ ]: