require 'daru/view'
true
Daru::View.plotting_library = :highcharts
:highcharts
# Area chart : basic
opts = {
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: "function () {
return this.value; // clean, unformatted number for year
}".js_code
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: "function () {
return this.value / 1000 + 'k';
}".js_code
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
# pointStart: 1940, not working datetime kinda things
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
}
series_dt = [
{
name: 'USA',
data: [nil, nil, nil, nil, nil, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
}, {
name: 'USSR/Russia',
data: [nil, nil, nil, nil, nil, nil, nil, nil, nil, nil,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}
]
area_basic = Daru::View::Plot.new(series_dt, opts)
area_basic.show_in_iruby
# Try to run this cell after uncommenting the below line to export this chart in pdf format
# area_basic.export('pdf', 'daru')
# Area chart : negative values
opts = {
chart: {
type: 'area'
},
title: {
text: 'Area chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
}
}
series_dt = [
{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}
]
area_neg = Daru::View::Plot.new(series_dt, opts)
area_neg.show_in_iruby
# Try to run this cell after uncommenting the below line to export this chart in png format
# area_neg.export('png', 'daru')
# Area chart : stacked area
opts = {
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Growth by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Billions'
},
labels: {
formatter: "function () {
return this.value / 1000;
}".js_code
}
},
tooltip: {
split: true,
valueSuffix: ' millions'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
}
series_dt = [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
area_stacked = Daru::View::Plot.new(series_dt, opts)
area_stacked.show_in_iruby
# Try to run this cell after uncommenting the below line to export this chart in svg format with filename 'daru'
# area_stacked.export('svg', 'daru')
# Area chart : percentage area
opts = {
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
split: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
}
series_dt = [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
area_per = Daru::View::Plot.new(series_dt, opts)
area_per.show_in_iruby
# Try to run this cell after uncommenting the below line to export this chart in svg format with filename 'daru'
# area_per.export('jpg', 'daru')
# Area chart : with missing points
opts = {
chart: {
type: 'area',
spacingBottom: 30
},
title: {
text: 'Fruit consumption *'
},
subtitle: {
text: '* Jane\'s banana consumption is unknown',
floating: true,
align: 'right',
verticalAlign: 'bottom',
y: 15
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
},
yAxis: {
title: {
text: 'Y-Axis'
},
labels: {
formatter: "function () {
return this.value;
}".js_code
}
},
tooltip: {
formatter: "function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}".js_code
},
plotOptions: {
area: {
fillOpacity: 0.5
}
},
credits: {
enabled: false
}
}
series_dt = [{
name: 'John',
data: [0, 1, 4, 4, 5, 2, 3, 7]
}, {
name: 'Jane',
data: [1,0,3,nil,3,1,2,1]
}
]
area_nil = Daru::View::Plot.new(series_dt, opts)
area_nil.show_in_iruby
# Try to run this cell after uncommenting the below line to export this chart in pdf format
# area_nil.export
# Area chart : area-inverted/
opts = {
chart: {
type: 'area',
inverted: true
},
title: {
text: 'Average fruit consumption during one week'
},
subtitle: {
style: {
position: 'absolute',
right: '0px',
bottom: '10px'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -150,
y: 100,
floating: true,
borderWidth: 1,
# backgroundColor: "(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'".js_code
# or directly give the color code
backgroundColor: "#FF2343"
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
]
},
yAxis: {
title: {
text: 'Number of units'
},
labels: {
formatter: "function () {
return this.value;
}".js_code
},
min: 0
},
plotOptions: {
area: {
fillOpacity: 0.5
}
}
}
series_dt = [
{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}
]
area_invert = Daru::View::Plot.new(series_dt, opts)
area_invert.show_in_iruby
# Try to run this cell after uncommenting the below line to export this chart in png format
# area_invert.export('png')
# Area chart : areaspline
opts = {
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ #visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
}
}
series_dt = [
{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}
]
area_spline = Daru::View::Plot.new(series_dt, opts)
area_spline.show_in_iruby
# Try to run this cell after uncommenting the below line to export this chart in png format
# area_spline.export('jpeg', 'daru')
# todo: arearange example. For arearange highcharts-more.js needed