In [1]:
require 'daru/view'
Install the spreadsheet gem version ~>1.1.1 for using spreadsheet functions.

Install the mechanize gem version ~>2.7.5 for using mechanize functions.
Out[1]:
true
In [2]:
Daru::View.plotting_library = :highcharts
Out[2]:
:highcharts
In [3]:
opts = {
  chart: {
        type: 'column'
    }, 
  title: {
      text: 'Styling axes'
  },

  yAxis: [{
      className: 'highcharts-color-0',
      title: {
          text: 'Primary axis'
      }
  }, {
      className: 'highcharts-color-1',
      opposite: true,
      title: {
          text: 'Secondary axis'
      }
  }],

  plotOptions: {
      column: {
          borderRadius: 5
      }
  }
}

user_opts = {
  css: ['.highcharts-color-0 {fill: #7cb5ec;stroke: #7cb5ec;}', 
        '.highcharts-axis.highcharts-color-0 .highcharts-axis-line {stroke: #7cb5ec;}',
        '.highcharts-color-1 {fill: #90ed7d;stroke: #90ed7d;}',
        '.highcharts-axis.highcharts-color-1 .highcharts-axis-line {stroke: #90ed7d;}',
        '.highcharts-yaxis .highcharts-axis-line {stroke-width: 2px;}'
  ]  
}

series_dt = [{
  data: [1, 3, 2, 4]
    }, {
  data: [324, 124, 547, 221],
  yAxis: 1
}]

column = Daru::View::Plot.new(series_dt, opts, user_opts)
column.show_in_iruby
Out[3]:
In [4]:
opts = {
  chart: {
        type: 'line'
    },
  chart_class: 'stock',
  title: {
      text: 'Chart border and background by CSS'
  },

  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  legend: {
      layout: 'vertical',
      floating: true,
      align: 'left',
      x: 100,
      verticalAlign: 'top',
      y: 70
  }
}

user_opts = {
  css: ['.highcharts-background {fill: #efefef;stroke: #a4edba;stroke-width: 2px;}']  
}

data = Daru::Vector.new([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4])

line = Daru::View::Plot.new(data, opts, user_opts)
line.show_in_iruby
Out[4]:
In [5]:
opts = {
  chart: {
        type: 'line'
    },
  title: {
      text: 'Chart border and background by CSS'
  },

  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  legend: {
      layout: 'vertical',
      floating: true,
      align: 'left',
      x: 100,
      verticalAlign: 'top',
      y: 70
  }
}

user_opts = {
  css: ['.highcharts-button-symbol{fill: #90ed7d;stroke: #90ed7d;}'] 
}

data = Daru::Vector.new([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4])

line = Daru::View::Plot.new(data, opts, user_opts)
line.show_in_iruby
Out[5]:
In [6]:
opts = {
        rangeSelector: {
            selected: 1
        },
        chart: {
            type: 'candlestick'
        },

        title: {
            text: 'AAPL Stock Price'
        },
        plotOptions: {
            series: {
                dataGrouping: "{
                    units: [
                        [
                            'week', // unit name
                            [1] // allowed multiples
                        ], [
                            'month',
                            [1, 2, 3, 4, 6]
                        ]
                    ]
                }".js_code
            }
        }
    }

    data = [
            [1294617600000,48.40,49.03,48.17,48.92],
            [1294704000000,49.27,49.28,48.50,48.81],
            [1294790400000,49.04,49.20,48.86,49.20],
            [1294876800000,49.31,49.52,49.12,49.38],
            [1294963200000,49.41,49.78,49.21,49.78],
            [1295308800000,47.07,49.25,46.57,48.66],
            [1295395200000,49.76,49.80,48.13,48.41],
            [1295481600000,48.06,48.33,47.16,47.53],
            [1295568000000,47.68,47.84,46.66,46.67],
            [1295827200000,46.70,48.21,46.67,48.21],
            [1295913600000,48.05,48.78,47.80,48.77],
            [1296000000000,48.99,49.37,48.79,49.12],
            [1296086400000,49.11,49.24,48.98,49.03],
            [1296172800000,49.17,49.20,47.65,48.01],
            [1296432000000,47.97,48.58,47.76,48.47],

            [1309478400000,47.99,49.07,47.74,49.04],
            [1309824000000,49.00,49.98,48.93,49.92],
            [1309910400000,49.85,50.59,49.53,50.25],
            [1309996800000,50.67,51.14,50.57,51.03],
            [1310083200000,50.48,51.43,50.31,51.39],
            [1310342400000,50.91,51.40,50.40,50.57],
            [1310428800000,50.50,51.10,49.80,50.54],
            [1310515200000,51.19,51.43,50.91,51.15],
            [1310601600000,51.57,51.66,50.91,51.11],
            [1310688000000,51.60,52.14,51.31,52.13],
            [1310947200000,52.20,53.52,52.18,53.40],
            [1311033600000,54.00,54.09,53.33,53.84],
            [1311120000000,56.59,56.61,55.14,55.27],
            [1311206400000,55.28,55.72,54.84,55.33],
            [1311292800000,55.47,56.44,55.39,56.19],
            [1311552000000,55.76,57.14,55.66,56.93],
            [1311638400000,57.14,57.79,57.10,57.63],
            [1311724800000,57.23,57.52,56.02,56.08],
            [1311811200000,55.95,56.71,55.45,55.97],
            [1311897600000,55.38,56.45,54.86,55.78],

            [1417392000000,118.81,119.25,111.27,115.07],
            [1417478400000,113.50,115.75,112.75,114.63],
            [1417564800000,115.75,116.35,115.11,115.93],
            [1417651200000,115.77,117.20,115.29,115.49],
            [1417737600000,115.99,116.08,114.64,115.00],
            [1417996800000,114.10,114.65,111.62,112.40],
            [1418083200000,110.19,114.30,109.35,114.12],
            [1418169600000,114.41,114.85,111.54,111.95],
            [1418256000000,112.26,113.80,111.34,111.62],
            [1418342400000,110.46,111.87,109.58,109.73],
            [1418601600000,110.70,111.60,106.35,108.22],
            [1418688000000,106.37,110.16,106.26,106.74],
            [1418774400000,107.12,109.84,106.82,109.41],
            [1418860800000,111.87,112.65,110.66,112.65],
            [1418947200000,112.26,113.24,111.66,111.78],
            [1419206400000,112.16,113.49,111.97,112.94],
            [1419292800000,113.23,113.33,112.46,112.54],
            [1419379200000,112.58,112.71,112.01,112.01],
            [1419552000000,112.10,114.52,112.01,113.99],
            [1419811200000,113.79,114.77,113.70,113.91],
            [1419897600000,113.64,113.92,112.11,112.52],
            [1419984000000,112.82,113.13,110.21,110.38],

            [1514851200000,170.16,172.30,169.26,172.26],
            [1514937600000,172.53,174.55,171.96,172.23],
            [1515024000000,172.54,173.47,172.08,173.03],
            [1515110400000,173.44,175.37,173.05,175.00]
        ]

user_opts = {
  chart_class: 'stock',
  css: ['.highcharts-candlestick-series .highcharts-point {stroke: #2f7ed8;}',
        '.highcharts-candlestick-series .highcharts-point-up {stroke: silver;fill: silver;}']
}

candle_stick = Daru::View::Plot.new(data, opts, user_opts)
candle_stick.show_in_iruby
Out[6]:
In [7]:
opts = {
  title: {
        text: 'Pie point CSS'
    },
  chart: {
      type: 'pie'
  },
  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  plotOptions: {
      series: {
          allowPointSelect: true,
          keys: ['name', 'y', 'selected', 'sliced'],
          showInLegend: true
      }
  }
}

user_opts = {
  css: ['.highcharts-point.highcharts-color-2,',
        '.highcharts-legend-item.highcharts-color-2 .highcharts-point,',
        '.highcharts-tooltip .highcharts-color-2 {fill: #78a8d1;}',
        '.highcharts-tooltip.highcharts-color-2,',
        '.highcharts-data-label-connector.highcharts-color-2 {stroke: #78a8d1;}']
}
  
data = [
    ['Apples', 29.9, false],
    ['Pears', 71.5, false],
    ['Oranges', 106.4, false],
    ['Plums', 129.2, false],
    ['Bananas', 144.0, false],
    ['Peaches', 176.0, false],
    ['Prunes', 135.6, true, true],
    ['Avocados', 148.5, false]
]
pie = Daru::View::Plot.new(data, opts, user_opts)
pie.show_in_iruby
Out[7]:
In [8]:
opts = {
  chart: {
        type: 'line'
    },
  title: {
      text: 'Crosshair by CSS'
  },

  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  legend: {
      layout: 'vertical',
      floating: true,
      align: 'left',
      x: 100,
      verticalAlign: 'top',
      y: 70
  },
  
  yAxis: {
     crosshair: true
  }
}

user_opts = {
  css: ['.highcharts-crosshair{fill: #90ed7d;stroke: #90ed7d;}']
}

data = Daru::Vector.new([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4])

line = Daru::View::Plot.new(data, opts, user_opts)
line.show_in_iruby
Out[8]:
In [9]:
opts = {
  chart: {
      type: 'gauge'
  },
  title: {
      text: 'Speedometer'
  },

  pane: {
      startAngle: -150,
      endAngle: 150,
      background: [{
          className: 'outer-pane',
          outerRadius: '115%'
      }, {
          className: 'middle-pane',
          outerRadius: '112%'
      }, {
          # default background
      }, {
          className: 'inner-pane',
          outerRadius: '105%',
          innerRadius: '103%'
      }]
  },

  # the value axis
  yAxis: {
    min: 0,
    max: 200,

    minorTickInterval: 'auto',
    minorTickLength: 10,
    minorTickPosition: 'inside',

    tickPixelInterval: 30,
    tickPosition: 'inside',
    tickLength: 10,
    labels: {
        step: 2,
        rotation: 'auto'
    },
    title: {
        text: 'km/h'
    },
    plotBands: [{
        from: 0,
        to: 120,
        className: 'green-band'
    }, {
        from: 120,
        to: 160,
        className: 'yellow-band'
    }, {
        from: 160,
        to: 200,
        className: 'red-band'
    }]
  },
  plotOptions: {
      series: {
         tooltip: {
              valueSuffix: ' km/h'
          },
         name: 'speed'
      }
  }
}

user_options = {
  modules: ['highcharts-more'],
  css: ['.outer-pane {fill: #EFEFEF;}',
        '.middle-pane {stroke-width: 1px;stroke: #AAA;}',
        '.inner-pane {fill: #DDDDDD;}',
        '.green-band {fill: #55BF3B;fill-opacity: 1;}',
        '.yellow-band {fill: #DDDF0D;fill-opacity: 1;}',
        '.red-band {fill: #DF5353;fill-opacity: 1;}']
}

data = Daru::Vector.new([80])

gauge = Daru::View::Plot.new(data, opts, user_options)
gauge.show_in_iruby
Out[9]:
In [10]:
opts = {
  chart: {
      type: 'scatter'
  },
  title: {
      text: 'Styling grid and ticks'
  },

  xAxis: {
      minorTickInterval: 'auto',
      startOnTick: true,
      endOnTick: true
  }
}

user_opts = {
  css: ['.highcharts-xaxis-grid .highcharts-grid-line {stroke-width: 2px;stroke: #d8d8d8;}',
        '.highcharts-xaxis .highcharts-tick {stroke-width: 2px;stroke: #d8d8d8;}']
}

data = [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
        [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
        [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
        [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
        [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
        [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
        [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
        [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
        [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
        [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
        [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
        [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
        [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
        [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
        [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
        [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
        [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
        [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9]]

df = Daru::DataFrame.new(
      {
        Data1: data.map {|row| row[0]},
        Data2: data.map {|row| row[1]}
      }
    )

scatter = Daru::View::Plot.new(df, opts, user_opts)
scatter.show_in_iruby
Out[10]:
In [11]:
opts = {
  title: {
        text: 'Pie point CSS'
    },
  chart: {
    type: 'pie'
  },
  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  plotOptions: {
      series: {
          allowPointSelect: true,
          keys: ['name', 'y', 'selected', 'sliced'],
          showInLegend: true
      }
  }
}

user_opts = {
  css: ['.highcharts-legend-box {fill: black;fill-opacity: 0.3;stroke: black;stroke-width: 1px;}']
}

data = [
    ['Apples', 29.9, false],
    ['Pears', 71.5, false],
    ['Oranges', 106.4, false],
    ['Plums', 129.2, false],
    ['Bananas', 144.0, false],
    ['Peaches', 176.0, false],
    ['Prunes', 135.6, true, true],
    ['Avocados', 148.5, false]
]
pie = Daru::View::Plot.new(data, opts, user_opts)
pie.show_in_iruby
Out[11]:
In [12]:
opts = {
  chart: {
      type: 'pie',
      width: 500,
      borderWidth: 2
  },
  title: {
      text: 'Legend styled by CSS'
  },

  credits: {
      enabled: false
  },

  legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      y: 30,
      title: {
          text: 'Male name'
      }
  }
}

user_opts = {
  css: ['.highcharts-legend-box {fill: black;fill-opacity: 0.3;stroke: black;stroke-width: 1px;}',
        '.highcharts-legend-item text {fill: #e0e0e0;transition: fill 250ms;}',
        '.highcharts-legend-item:hover text {fill: white;}',
        '.highcharts-legend-item-hidden * {fill: gray !important;stroke: gray !important;}',
        '.highcharts-legend-title {fill: white;font-style: italic;}',
        '.highcharts-legend-navigation {fill: white;}',
        '.highcharts-legend-nav-active {fill: white;}',
        '.highcharts-legend-nav-inactive {fill: gray;}']
}

series_dt = [{
  data: "(function () {
      var names = 'Ari,Bjartur,Bogi,Bragi,Dánjal,Dávur,Eli,Emil,Fróði,Hákun,Hanus,Hjalti,Ísakur,' +
          'Johan,Jóhan,Julian,Kristian,Leon,Levi,Magnus,Martin,Mattias,Mikkjal,Nóa,Óli,Pauli,Petur,Rói,Sveinur,Teitur',
          arr = [];

      Highcharts.each(names.split(','), function (name) {
          arr.push({
              name: name,
              y: Math.round(Math.random() * 100)
          });
      });

      return arr;
  }())".js_code,
  showInLegend: true
}]

pie = Daru::View::Plot.new(series_dt, opts, user_opts)
pie.show_in_iruby
Out[12]:
In [13]:
opts = {
  chart: {
      type: 'scatter'
  },

  title: {
      text: 'Styling grid and ticks'
  },

  xAxis: {
      minorTickInterval: 'auto',
      startOnTick: true,
      endOnTick: true
  }
}

user_opts = {
  css: ['.highcharts-minor-grid-line {stroke-dasharray: 2, 2;stroke-width: 2px;stroke: #d8d8d8;}']
}

data = [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
        [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
        [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
        [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
        [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
        [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
        [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
        [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
        [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
        [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
        [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
        [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
        [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
        [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
        [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
        [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
        [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
        [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9]]

df = Daru::DataFrame.new(
      {
        Data1: data.map {|row| row[0]},
        Data2: data.map {|row| row[1]}
      }
    )

scatter = Daru::View::Plot.new(df, opts, user_opts)
scatter.show_in_iruby
Out[13]:
In [14]:
# line with markers and shadow

    opts = {
        rangeSelector: {
            selected: 1
        },
        title: {
            text: 'AAPL Stock Price'
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: true,
                    radius: 3
                },
                shadow: true,
                tooltip: {
                    valueDecimals: 2
                }
            }
        }
    }

    user_opts = {
      chart_class: 'stock',
      css: ['.highcharts-navigator-handle{fill: #90ed7d;stroke: #90ed7d;}']
    }

    data = [
             [1147651200000,67.79],
             [1147737600000,64.98],
             [1147824000000,65.26],

             [1149120000000,62.17],
             [1149206400000,61.66],
             [1149465600000,60.00],
             [1149552000000,59.72],

             [1157932800000,72.50],
             [1158019200000,72.63],
             [1158105600000,74.20],
             [1158192000000,74.17],
             [1158278400000,74.10],
             [1158537600000,73.89],

             [1170288000000,84.74],
             [1170374400000,84.75],

             [1174953600000,95.46],
             [1175040000000,93.24],
             [1175126400000,93.75],
             [1175212800000,92.91],

             [1180051200000,113.62],
             [1180396800000,114.35],
             [1180483200000,118.77],
             [1180569600000,121.19],
          ]

    df = Daru::DataFrame.new(
      {
        data1: data.map {|row| row[0]},
        data2: data.map {|row| row[1]}
      }
    )

line_series_shadow_markers = Daru::View::Plot.new(df, opts, user_opts)
line_series_shadow_markers.show_in_iruby
Out[14]:
In [15]:
# line with markers and shadow

    opts = {
        rangeSelector: {
            selected: 1
        },
        title: {
            text: 'AAPL Stock Price'
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: true,
                    radius: 3
                },
                shadow: true,
                tooltip: {
                    valueDecimals: 2
                }
            }
        }
    }

    data = [
             [1147651200000,67.79],
             [1147737600000,64.98],
             [1147824000000,65.26],

             [1149120000000,62.17],
             [1149206400000,61.66],
             [1149465600000,60.00],
             [1149552000000,59.72],

             [1157932800000,72.50],
             [1158019200000,72.63],
             [1158105600000,74.20],
             [1158192000000,74.17],
             [1158278400000,74.10],
             [1158537600000,73.89],

             [1170288000000,84.74],
             [1170374400000,84.75],

             [1174953600000,95.46],
             [1175040000000,93.24],
             [1175126400000,93.75],
             [1175212800000,92.91],

             [1180051200000,113.62],
             [1180396800000,114.35],
             [1180483200000,118.77],
             [1180569600000,121.19],
          ]

    user_opts = {
      chart_class: 'stock',
      css: ['.highcharts-navigator-mask-inside{fill: #90ed7d;stroke: #90ed7d;}',
            '.highcharts-navigator-outline{stroke: #90ed7d;}']
    }

    df = Daru::DataFrame.new(
      {
        data1: data.map {|row| row[0]},
        data2: data.map {|row| row[1]}
      }
    )

line_series_shadow_markers = Daru::View::Plot.new(df, opts, user_opts)
line_series_shadow_markers.show_in_iruby
Out[15]:
In [16]:
# Area chart : negative values
    opts = {
      title: {
        text: 'Monthly temperatures in a random cold place'
      },
      subtitle: {
          text: 'All series should be blue below zero'
      },
      xAxis: {
          type: 'datetime'
      },
      plotOptions: {
          series: {
              className: 'main-color',
              negativeColor: true
          }
      }
    }

    user_opts = {
      css: ['.highcharts-point {stroke: white;}',
            '.main-color .highcharts-graph {stroke: red;}',
            '.main-color, .main-color .highcharts-point {fill: red;}',
            '.highcharts-graph.highcharts-negative {stroke: blue;}',
            '.highcharts-area.highcharts-negative {fill: blue;}',
            '.highcharts-point.highcharts-negative {fill: blue;}']
    }

    series_dt = [
      {
        name: 'Spline',
        type: 'spline',
        data: [-6.4, -5.2, -3.0, 0.2, 2.3, 5.5, 8.4, 8.3, 5.1, 0.9, -1.1, -4.0],
        pointStart: 'Date.UTC(2010, 0)'.js_code,
        pointInterval: '31 * 24 * 36e5'.js_code
    }, {
        name: 'Area',
        type: 'area',
        data: [-6.4, -5.2, -3.0, 0.2, 2.3, 5.5, 8.4, 8.3, 5.1, 0.9, -1.1, -4.0],
        pointStart: 'Date.UTC(2011, 0)'.js_code,
        pointInterval: '30 * 24 * 36e5'.js_code
    }, {
        name: 'Column',
        type: 'column',
        data: [-6.4, -5.2, -3.0, 0.2, 2.3, 5.5, 8.4, 8.3, 5.1, 0.9, -1.1, -4.0],
        pointStart: 'Date.UTC(2012, 0)'.js_code,
        pointInterval: '30 * 24 * 36e5'.js_code
      }
    ]

area_neg = Daru::View::Plot.new(series_dt, opts, user_opts)
area_neg.show_in_iruby
Out[16]:
In [17]:
opts = {
  chart: {
        type: 'line'
    },
  title: {
      text: 'Chart border and background by CSS'
  },

  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  legend: {
      layout: 'vertical',
      floating: true,
      align: 'left',
      x: 100,
      verticalAlign: 'top',
      y: 70
  },
  
  yAxis: {
     crosshair: true
  }
}

user_opts = {
  css: ['.highcharts-plot-background {fill: #efffff;}',
        '.highcharts-plot-border {stroke-width: 2px;stroke: #7cb5ec;}']
}

data = Daru::Vector.new([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4])

line = Daru::View::Plot.new(data, opts, user_opts)
line.show_in_iruby
Out[17]:
In [18]:
opts = {
  chart: {
        type: 'line'
    },
  title: {
      text: 'Title styles ...'
  },

  subtitle: {
      text: '... and subtitle styles'
  },

  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  legend: {
      layout: 'vertical',
      floating: true,
      align: 'left',
      x: 100,
      verticalAlign: 'top',
      y: 70
  },
  
  yAxis: {
     crosshair: true
  }
}

user_opts = {
  css: ['.highcharts-title {fill: #434348;font-weight: bold;}',
        ".highcharts-subtitle {font-family: 'Courier New', monospace;font-style: italic;fill: #7cb5ec;}"]
}

data = Daru::Vector.new([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4])

line = Daru::View::Plot.new(data, opts, user_opts)
line.show_in_iruby
Out[18]:
In [19]:
opts = {
  chart: {
        type: 'line'
    },
  title: {
      text: 'Title styles ...'
  },

  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  legend: {
      layout: 'vertical',
      floating: true,
      align: 'left',
      x: 100,
      verticalAlign: 'top',
      y: 70
  },
  
  yAxis: {
     crosshair: true
  }
}

user_opts = {
  css: ['.highcharts-tooltip-box {fill: black;fill-opacity: 0.1;stroke-width: 0;}',
        '.highcharts-title {fill: #434348;font-weight: bold;}']
}

data = Daru::Vector.new([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4])

line = Daru::View::Plot.new(data, opts, user_opts)
line.show_in_iruby
Out[19]:
In [20]:
opts = {
  title: {
      text: 'Styled color zones'
  },

  yAxis: {
      min: -10
  },

  plotOptions: {
      series: {
          zones: [{
              value: 0,
              className: 'zone-0'
          }, {
              value: 10,
              className: 'zone-1'
          }, {
              className: 'zone-2'
          }],
          threshold: -10
      }
  }
}

user_opts = {
  css: ['.highcharts-point {stroke: white;}',
        '.highcharts-graph.zone-0 {stroke: #f7a35c;}',
        '.highcharts-area.zone-0 {fill: #f7a35c;}',
        '.highcharts-point.zone-0 {fill: #f7a35c;}',
        '.highcharts-graph.zone-1 {stroke: #7cb5ec;}',
        '.highcharts-area.zone-1 {fill: #7cb5ec;}',
        '.highcharts-point.zone-1 {fill: #7cb5ec;}',
        '.highcharts-graph.zone-2 {stroke: #90ed7d;}',
        '.highcharts-area.zone-2 {fill: #90ed7d;}',
        '.highcharts-point.zone-2 {fill: #90ed7d;}']
}

series_dt = [{
  type: 'areaspline',
  data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5]
}, {
  type: 'column',
  data: [1, 13, 2, -4, 6, 7, 5, 3, 2, -1, 2]
}]

area_spline = Daru::View::Plot.new(series_dt, opts, user_opts)
area_spline.show_in_iruby
Out[20]:
In [21]:
opts = {
  chart: {
      type: 'column'
  },
  title: {
      text: 'Column chart CSS'
  }
}

user_opts = {
  css: ['.highcharts-plot-background {fill: #efffff;}']
}

data_frame = Daru::DataFrame.new(
  {
    'Beer' => ['Kingfisher', 'Snow', 'Bud Light', 'Tiger Beer', 'Budweiser'],
    'Gallons sold' => [500, 400, 450, 200, 250]
  }
)

chart = Daru::View::Plot.new(data_frame, opts, user_opts)
chart.show_in_iruby
Out[21]:
In [22]:
opts = {
  chart: {
      type: 'line'
  },
  title: {
      text: 'Column chart CSS'
  }
}

user_opts = {
  css: ['.highcharts-xaxis-grid .highcharts-grid-line {stroke-width: 2px;stroke: #d8d8d8;}',
        '.highcharts-xaxis .highcharts-tick {stroke-width: 2px;stroke: #d8d8d8;}']
}

chart = Daru::View::Plot.new(data_frame.first(3), opts, user_opts)
chart.show_in_iruby
Out[22]:
In [ ]: