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