require 'daru/view' Daru::View.plotting_library = :highcharts # Single line series opts = { rangeSelector: { selected: 1 }, title: { text: '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], ] df = Daru::DataFrame.new( { data1: data.map {|row| row[0]}, data2: data.map {|row| row[1]} } ) line_series = Daru::View::Plot.new(df, opts, chart_class: 'stock') line_series.show_in_iruby # Flag marking opts = { rangeSelector: { selected: 0 }, title: { text: 'USD to EUR exchange rate' }, tooltip: { style: { width: '200px' }, valueDecimals: 4, shared: true }, yAxis: { title: { text: 'Exchange rate' } } } series_dt = [ { name: 'USD to EUR', data: [ [ 1167609600000, 0.7537 ], [ 1167696000000, 0.7537 ], [ 1167782400000, 0.7559 ], [ 1167868800000, 0.7631 ], [ 1167955200000, 0.7644 ], [ 1168214400000, 0.769 ], [ 1168300800000, 0.7683 ], [ 1168387200000, 0.77 ], [ 1196035200000, 0.6737 ], [ 1196121600000, 0.6724 ], [ 1196208000000, 0.6782 ], [ 1196294400000, 0.6786 ], [ 1196380800000, 0.6776 ], [ 1196640000000, 0.6819 ], [ 1196726400000, 0.6785 ], [ 1196812800000, 0.6794 ], [ 1196899200000, 0.6872 ], [ 1196985600000, 0.6827 ], [ 1197244800000, 0.6795 ], [ 1513209600000, 0.8443 ], [ 1513296000000, 0.8471 ], [ 1513555200000, 0.8479 ], [ 1513641600000, 0.8459 ], [ 1513728000000, 0.8443 ], [ 1513814400000, 0.8433 ], [ 1513900800000, 0.8438 ], [ 1514332800000, 0.8408 ], [ 1514419200000, 0.838 ], [ 1514505600000, 0.8339 ] ], id: 'dataseries' # the event marker flags }, { type: 'flags', data: [{ title: 'C', text: 'Stocks fall on Greece, rate concerns; US dollar dips' }, { title: 'D', text: 'Zimbabwe ditches \'worthless\' currency for the US dollar ' }, { title: 'E', text: 'US Dollar Declines Over the Week on Rate Timeline' }, { title: 'F', text: 'Greek Negotiations Take Sharp Turn for Worse, US Dollar set to Rally ' }, { title: 'G', text: 'Euro records stunning reversal against dollar' }, { title: 'H', text: 'Surging US dollar curbs global IT spend' }], onSeries: 'dataseries', shape: 'circlepin', width: 16 } ] flag_marking = Daru::View::Plot.new(series_dt, opts, chart_class: 'stock') flag_marking.show_in_iruby # Intraday candlestick opts = { title: { text: 'AAPL stock price by minute' }, chart: { type: 'candlestick' }, rangeSelector: { buttons: [{ type: 'hour', count: 1, text: '1h' }, { type: 'day', count: 1, text: '1D' }, { type: 'all', count: 1, text: 'All' }], selected: 1, } } data = [ [1317888000000,372.5101,375,372.2,372.52], [1317888060000,372.4,373,372.01,372.16], [1317888120000,372.16,372.4,371.39,371.62], [1317888180000,371.62,372.16,371.55,371.75], [1317888240000,371.75,372.4,371.57,372], [1317888300000,372,372.3,371.8,372.24], [1317888360000,372.22,372.45,372.22,372.3], [1317910560000,376.68,376.95,376.68,376.85], [1317910620000,376.85,376.85,376.53,376.76], [1317910680000,376.62,377.19,376.49,376.99], [1317910740000,376.98,377.99,376.76,377.99], [1317910800000,377.989,378.05,377.38,377.87], [1318242780000,383.52,383.86,383.41,383.86], [1318242840000,383.85,383.94,383.4,383.48], [1318242900000,383.54,384.4,383.481,384.136], [1318242960000,384.14,384.39,383.87,384.19], [1318243020000,384.246,384.3,383.34,383.5], [1318243080000,383.4335,383.83,383.41,383.5], [1318243140000,383.5001,383.59,383.2,383.2501], [1318243200000,383.2276,383.252,382.75,383.059], [1318427580000,406.23,406.402,406.05,406.09], [1318427640000,406.12,406.19,405.97,406.1072], [1318427700000,406.111,406.54,406.111,406.54], [1318427760000,406.49,406.53,406.19,406.332], [1318427820000,406.31,406.49,406.24,406.349], [1318607700000,420.58,421.14,420.575,421.0975], [1318607760000,421.07,421.49,420.7,421.46], [1318607820000,421.4601,421.71,421.36,421.69], [1318607880000,421.69,421.94,421.663,421.94], [1318607940000,421.94,422,421.8241,422] ] candle_stick = Daru::View::Plot.new(data, opts, chart_class: 'stock') candle_stick.show_in_iruby # Responsive Chart opts = { chart: { height: 400, type: 'area' }, title: { text: 'Highstock Responsive Chart' }, subtitle: { text: 'Click small/large buttons or change window size to test responsiveness' }, rangeSelector: { selected: 1 }, responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { chart: { height: 300 }, navigator: { enabled: false } } }] }, plotOptions: { series: { tooltip: { valueDecimals: 2 }, threshold: nil } } } 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 = Daru::View::Plot.new(df, opts, chart_class: 'stock') line_series.show_in_iruby #Intraday opts = { chart: { type: 'area' }, title: { text: 'AAPL stock price by minute' }, subtitle: { text: 'Using ordinal X axis' }, xAxis: { gapGridLineWidth: 0 }, rangeSelector: { buttons: [{ type: 'hour', count: 1, text: '1h' }, { type: 'day', count: 1, text: '1D' }, { type: 'all', count: 1, text: 'All' }], selected: 1, inputEnabled: false }, plotOptions: { series: { gapSize: 5, tooltip: { valueDecimals: 2 }, fillColor: "{ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }".js_code, threshold: nil } } } data = [ [1317888000000,372.5101,375,372.2,372.52], [1317888060000,372.4,373,372.01,372.16], [1317888120000,372.16,372.4,371.39,371.62], [1317888180000,371.62,372.16,371.55,371.75], [1317888240000,371.75,372.4,371.57,372], [1317888300000,372,372.3,371.8,372.24], [1317888360000,372.22,372.45,372.22,372.3], [1317910560000,376.68,376.95,376.68,376.85], [1317910620000,376.85,376.85,376.53,376.76], [1317910680000,376.62,377.19,376.49,376.99], [1317910740000,376.98,377.99,376.76,377.99], [1317910800000,377.989,378.05,377.38,377.87], [1318242780000,383.52,383.86,383.41,383.86], [1318242840000,383.85,383.94,383.4,383.48], [1318242900000,383.54,384.4,383.481,384.136], [1318242960000,384.14,384.39,383.87,384.19], [1318243020000,384.246,384.3,383.34,383.5], [1318243080000,383.4335,383.83,383.41,383.5], [1318243140000,383.5001,383.59,383.2,383.2501], [1318243200000,383.2276,383.252,382.75,383.059], [1318427580000,406.23,406.402,406.05,406.09], [1318427640000,406.12,406.19,405.97,406.1072], [1318427700000,406.111,406.54,406.111,406.54], [1318427760000,406.49,406.53,406.19,406.332], [1318427820000,406.31,406.49,406.24,406.349], [1318607700000,420.58,421.14,420.575,421.0975], [1318607760000,421.07,421.49,420.7,421.46], [1318607820000,421.4601,421.71,421.36,421.69], [1318607880000,421.69,421.94,421.663,421.94], [1318607940000,421.94,422,421.8241,422] ] intraday_area = Daru::View::Plot.new(data, opts, chart_class: 'stock') intraday_area.show_in_iruby # Intraday with breaks opts = { title: { text: 'AAPL stock price by minute' }, chart: { type: 'area' }, subtitle: { text: 'Using explicit breaks for nights and weekends' }, xAxis: { breaks: [{ # Nights from: 'Date.UTC(2011, 9, 6, 16)'.js_code, to: 'Date.UTC(2011, 9, 7, 8)'.js_code, repeat: '24 * 36e5'.js_code }, { # Weekends from: 'Date.UTC(2011, 9, 7, 16)'.js_code, to: 'Date.UTC(2011, 9, 10, 8)'.js_code, repeat: '7 * 24 * 36e5'.js_code }] }, rangeSelector: { buttons: [{ type: 'hour', count: 1, text: '1h' }, { type: 'day', count: 1, text: '1D' }, { type: 'all', count: 1, text: 'All' }], selected: 1, inputEnabled: false }, plotOptions: { series: { gapSize: 5, tooltip: { valueDecimals: 2 }, fillColor: "{ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }".js_code, threshold: nil } } } data = [ [1317888000000,372.5101,375,372.2,372.52], [1317888060000,372.4,373,372.01,372.16], [1317888120000,372.16,372.4,371.39,371.62], [1317888180000,371.62,372.16,371.55,371.75], [1317888240000,371.75,372.4,371.57,372], [1317888300000,372,372.3,371.8,372.24], [1317888360000,372.22,372.45,372.22,372.3], [1317910560000,376.68,376.95,376.68,376.85], [1317910620000,376.85,376.85,376.53,376.76], [1317910680000,376.62,377.19,376.49,376.99], [1317910740000,376.98,377.99,376.76,377.99], [1317910800000,377.989,378.05,377.38,377.87], [1318242780000,383.52,383.86,383.41,383.86], [1318242840000,383.85,383.94,383.4,383.48], [1318242900000,383.54,384.4,383.481,384.136], [1318242960000,384.14,384.39,383.87,384.19], [1318243020000,384.246,384.3,383.34,383.5], [1318243080000,383.4335,383.83,383.41,383.5], [1318243140000,383.5001,383.59,383.2,383.2501], [1318243200000,383.2276,383.252,382.75,383.059], [1318427580000,406.23,406.402,406.05,406.09], [1318427640000,406.12,406.19,405.97,406.1072], [1318427700000,406.111,406.54,406.111,406.54], [1318427760000,406.49,406.53,406.19,406.332], [1318427820000,406.31,406.49,406.24,406.349], [1318607700000,420.58,421.14,420.575,421.0975], [1318607760000,421.07,421.49,420.7,421.46], [1318607820000,421.4601,421.71,421.36,421.69], [1318607880000,421.69,421.94,421.663,421.94], [1318607940000,421.94,422,421.8241,422] ] intraday_breaks = Daru::View::Plot.new(data, opts, chart_class: 'stock') intraday_breaks.show_in_iruby # Dynamically updating data 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