require 'daru/view'

Daru::View.plotting_library = :highcharts

opts = {
  chart: {
        type: 'column'
    },
  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;}'
  ],  
  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
      }
  }
}

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

column = Daru::View::Plot.new
column.chart.options = opts;
column.chart.series_data = series_dt
column.show_in_iruby

opts = {
  chart: {
        type: 'line'
    },
  chart_class: 'stock',
  css: ['.highcharts-background {fill: #efefef;stroke: #a4edba;stroke-width: 2px;}'],
  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
  }
}

series_dt = [{
  data: [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
line.chart.options = opts;
line.chart.series_data = series_dt
line.show_in_iruby

opts = {
  chart: {
        type: 'line'
    },
  css: ['.highcharts-button-symbol{fill: #90ed7d;stroke: #90ed7d;}'],
  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
  }
}

series_dt = [{
  data: [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
line.chart.options = opts;
line.chart.series_data = series_dt
line.show_in_iruby

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

        title: {
            text: 'AAPL Stock Price'
        }
    }

    series_dt = [
      {
          type: 'candlestick',
            name: 'AAPL Stock Price',
            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]
                ],
            dataGrouping: "{
                units: [
                    [
                        'week', // unit name
                        [1] // allowed multiples
                    ], [
                        'month',
                        [1, 2, 3, 4, 6]
                    ]
                ]
            }".js_code
      }
    ]

candle_stick = Daru::View::Plot.new
candle_stick.chart.options = opts;
candle_stick.chart.series_data = series_dt
candle_stick.show_in_iruby

opts = {
  title: {
        text: 'Pie point CSS'
    },
  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;}'],
  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  }
}

series_dt = [{
  type: 'pie',
  allowPointSelect: true,
  keys: ['name', 'y', 'selected', 'sliced'],
  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]
  ],
  showInLegend: true
}]

pie = Daru::View::Plot.new
pie.chart.options = opts;
pie.chart.series_data = series_dt
pie.show_in_iruby

opts = {
  chart: {
        type: 'line'
    },
  css: ['.highcharts-contextbutton{fill: #90ed7d;stroke: #90ed7d;}'],
  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
  }
}

series_dt = [{
  data: [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
line.chart.options = opts;
line.chart.series_data = series_dt
line.show_in_iruby

opts = {
  chart: {
        type: 'line'
    },
  css: ['.highcharts-crosshair{fill: #90ed7d;stroke: #90ed7d;}'],
  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
  }
}

series_dt = [{
  data: [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
line.chart.options = opts;
line.chart.series_data = series_dt
line.show_in_iruby

opts = {
  chart: {
      type: 'gauge'
  },
  
  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;}'],
  
  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'
    }]
  }
}

series_dt = [{
  name: 'Speed',
  data: [80],
  tooltip: {
      valueSuffix: ' km/h'
  }
}]

gauge = Daru::View::Plot.new
gauge.chart.options = opts;
gauge.chart.series_data = series_dt
gauge.show_in_iruby

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

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

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

series_dt = [{
  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]]
}]

scatter = Daru::View::Plot.new
scatter.chart.options = opts;
scatter.chart.series_data = series_dt
scatter.show_in_iruby

opts = {
  title: {
        text: 'Pie point CSS'
    },
  css: ['.highcharts-legend-box {fill: black;fill-opacity: 0.3;stroke: black;stroke-width: 1px;}'],
  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  }
}

series_dt = [{
  type: 'pie',
  allowPointSelect: true,
  keys: ['name', 'y', 'selected', 'sliced'],
  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]
  ],
  showInLegend: true
}]

pie = Daru::View::Plot.new
pie.chart.options = opts;
pie.chart.series_data = series_dt
pie.show_in_iruby

opts = {
  chart: {
      type: 'pie',
      width: 500,
      borderWidth: 2
  },
  
  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;}'],

  title: {
      text: 'Legend styled by CSS'
  },

  credits: {
      enabled: false
  },

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

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
pie.chart.options = opts;
pie.chart.series_data = series_dt
pie.show_in_iruby

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

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

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

series_dt = [{
  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]]
}]

scatter = Daru::View::Plot.new
scatter.chart.options = opts;
scatter.chart.series_data = series_dt
scatter.show_in_iruby

# line with markers and shadow

    opts = {
        chart_class: 'stock',
        rangeSelector: {
            selected: 1
        },
        css: ['.highcharts-navigator-handle{fill: #90ed7d;stroke: #90ed7d;}'],
        title: {
            text: 'AAPL Stock Price'
        }
    }

    series_dt = [
      {
          name: 'AAPL Stock Price',
          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],
                ],
          marker: {
              enabled: true,
              radius: 3
          },
          shadow: true,
          tooltip: {
              valueDecimals: 2
          }
      }
    ]

line_series_shadow_markers = Daru::View::Plot.new
line_series_shadow_markers.chart.options = opts;
line_series_shadow_markers.chart.series_data = series_dt
line_series_shadow_markers.show_in_iruby

# line with markers and shadow

    opts = {
        chart_class: 'stock',
        rangeSelector: {
            selected: 1
        },
        css: ['.highcharts-navigator-mask-inside{fill: #90ed7d;stroke: #90ed7d;}',
              '.highcharts-navigator-outline{stroke: #90ed7d;}'],
        title: {
            text: 'AAPL Stock Price'
        }
    }

    series_dt = [
      {
          name: 'AAPL Stock Price',
          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],
                ],
          marker: {
              enabled: true,
              radius: 3
          },
          shadow: true,
          tooltip: {
              valueDecimals: 2
          }
      }
    ]

line_series_shadow_markers = Daru::View::Plot.new
line_series_shadow_markers.chart.options = opts;
line_series_shadow_markers.chart.series_data = series_dt
line_series_shadow_markers.show_in_iruby

# Area chart : negative values
    opts = {
      title: {
        text: 'Monthly temperatures in a random cold place'
      },
      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;}'],
      subtitle: {
          text: 'All series should be blue below zero'
      },
      xAxis: {
          type: 'datetime'
      },
      plotOptions: {
          series: {
              className: 'main-color',
              negativeColor: true
          }
      }
    }

    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
area_neg.chart.options = opts;
area_neg.chart.series_data = series_dt
area_neg.show_in_iruby

opts = {
  chart: {
        type: 'line'
    },
  css: ['.highcharts-plot-background {fill: #efffff;}',
        '.highcharts-plot-border {stroke-width: 2px;stroke: #7cb5ec;}'],
  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
  }
}

series_dt = [{
  data: [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
line.chart.options = opts;
line.chart.series_data = series_dt
line.show_in_iruby

opts = {
  chart: {
        type: 'line'
    },
  css: ['.highcharts-title {fill: #434348;font-weight: bold;}',
        ".highcharts-subtitle {font-family: 'Courier New', monospace;font-style: italic;fill: #7cb5ec;}"],
  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
  }
}

series_dt = [{
  data: [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
line.chart.options = opts;
line.chart.series_data = series_dt
line.show_in_iruby

opts = {
  chart: {
        type: 'line'
    },
  css: ['.highcharts-tooltip-box {fill: black;fill-opacity: 0.1;stroke-width: 0;}',
        '.highcharts-title {fill: #434348;font-weight: bold;}'],
  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
  }
}

series_dt = [{
  data: [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
line.chart.options = opts;
line.chart.series_data = series_dt
line.show_in_iruby

opts = {
  title: {
      text: 'Styled color zones'
  },
  
  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;}'],

  yAxis: {
      min: -10
  },

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

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
area_spline.chart.options = opts;
area_spline.chart.series_data = series_dt
area_spline.show_in_iruby