require 'daru/view'
true
Daru::View.plotting_library = :highcharts
:highcharts
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
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
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
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
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
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
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
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
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
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
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
# 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
# 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
# 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
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
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
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
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
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
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