require 'daru/view'
true
Daru::View.plotting_library = :highcharts
:highcharts
opts = {
chart: {defaultSeriesType: 'line'},
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
# this is not working. Find the bug
# series: {
# pointStart: 43934
# }
},
}
line_1 = Daru::View::Plot.new ([])
#<Daru::View::Plot:0x000055ffab05ecd0 @data=[], @options={}, @user_options={}, @adapter=Daru::View::Adapter::HighchartsAdapter, @chart=#<LazyHighCharts::HighChart:0x000055ffab05ea00 @series_data=[{:type=>nil, :name=>nil, :data=>[]}], @options={:title=>{:text=>nil}, :legend=>{:layout=>"vertical", :style=>{}}, :xAxis=>{}, :yAxis=>{:title=>{:text=>nil}, :labels=>{}}, :tooltip=>{:enabled=>true}, :credits=>{:enabled=>false}, :plotOptions=>{:areaspline=>{}}, :chart=>{:defaultSeriesType=>"line", :renderTo=>nil}, :subtitle=>{}}, @html_options={}, @placeholder="ckjwbapszyn", @user_options={}>>
line_1.chart.options = opts;
line_1.chart.series_data = ([{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}])
[{:name=>"Installation", :data=>[43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]}, {:name=>"Manufacturing", :data=>[24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]}, {:name=>"Sales & Distribution", :data=>[11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]}, {:name=>"Project Development", :data=>[nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]}, {:name=>"Other", :data=>[12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]}]
line_1.show_in_iruby
line_3 = Daru::View::Plot.new
#<Daru::View::Plot:0x000055ffab322b88 @data=[], @options={}, @user_options={}, @adapter=Daru::View::Adapter::HighchartsAdapter, @chart=#<LazyHighCharts::HighChart:0x000055ffab322a48 @series_data=[{:type=>nil, :name=>nil, :data=>[]}], @options={:title=>{:text=>nil}, :legend=>{:layout=>"vertical", :style=>{}}, :xAxis=>{}, :yAxis=>{:title=>{:text=>nil}, :labels=>{}}, :tooltip=>{:enabled=>true}, :credits=>{:enabled=>false}, :plotOptions=>{:areaspline=>{}}, :chart=>{:defaultSeriesType=>"line", :renderTo=>nil}, :subtitle=>{}}, @html_options={}, @placeholder="gwvxkboutza", @user_options={}>>
# line chart : chart with data-labels
opts = {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
}
series_dt = ([{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}])
line_3.chart.options = opts;
line_3.chart.series_data = series_dt
[{:name=>"Tokyo", :data=>[7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}, {:name=>"London", :data=>[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}]
line_3.show_in_iruby # or line_2.chart (but it will show chart when notebook is saved)
# line chart : inverted axis
opts = {
chart: {
type: 'spline',
inverted: true
},
title: {
text: 'Atmosphere Temperature by Altitude'
},
subtitle: {
text: 'According to the Standard Atmosphere Model'
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: 'Altitude'
},
labels: {
formatter: "function () {
return this.value + 'km';
}".js_code
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis:{
title: {
text: 'Temperature'
},
labels: {
formatter: "function () {
return this.value + '°';
}".js_code
},
lineWidth: 2
},
legend:{
enabled: false
},
tooltip:{
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x} km: {point.y}°C'
},
plotOptions:{
spline: {
marker: {
enable: false
}
}
},
}
data = [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
line_6 = Daru::View::Plot.new(data)
line_6.chart.options = opts;
line_6.show_in_iruby
# when multiple charts in one frame: Just add after above chart
line_6.chart.series({
:data => [[10, 15], [20, -50], [30, -56.5], [40, -46.5], [50, -22.1],
[55, -2.5], [65, -27.7], [80, -55.7], [90, -76.5]]})
line_6.show_in_iruby
# line chart : chart with symbols
opts = {
chart: {
type: 'spline'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: "function () {
return this.value + '°';
}".js_code
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
}
series_dt = [{
name: 'Tokyo',
marker: {
symbol: 'square'
},
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
y: 26.5,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
marker: {
symbol: 'diamond'
},
data: [{
y: 3.9,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
}
}, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
line_7 = Daru::View::Plot.new(data)
line_7.chart.options = opts;
line_7.chart.series_data = series_dt
line_7.show_in_iruby
# line chart : chart with symbols
opts = {
chart: {
type: 'spline'
},
title: {
text: 'Wind speed during two days'
},
subtitle: {
text: 'May 31 and and June 1, 2015 at two locations in Vik i Sogn, Norway'
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
}
},
yAxis: {
title: {
text: 'Wind speed (m/s)'
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: nil,
plotBands: [{ # Light air
from: 0.3,
to: 1.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Light air',
style: {
color: '#606060'
}
}
}, { # Light breeze
from: 1.5,
to: 3.3,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Light breeze',
style: {
color: '#606060'
}
}
}, { # Gentle breeze
from: 3.3,
to: 5.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Gentle breeze',
style: {
color: '#606060'
}
}
}, { # Moderate breeze
from: 5.5,
to: 8,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Moderate breeze',
style: {
color: '#606060'
}
}
}, { # Fresh breeze
from: 8,
to: 11,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Fresh breeze',
style: {
color: '#606060'
}
}
}, { # Strong breeze
from: 11,
to: 14,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Strong breeze',
style: {
color: '#606060'
}
}
}, { # High wind
from: 14,
to: 15,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'High wind',
style: {
color: '#606060'
}
}
}]
},
tooltip: {
valueSuffix: ' m/s'
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
pointInterval: 3600000, # one hour
# pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
}
},
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
}
series_dt = [{
name: 'Hestavollane',
data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
}, {
name: 'Vik',
data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
}]
line_8 = Daru::View::Plot.new(series_dt, opts)
line_8.show_in_iruby
# line chart : chart with line-log-axis/
opts = {
title: {
text: 'Logarithmic axis demo'
},
xAxis: {
tickInterval: 1
},
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
tooltip: {
headerFormat: '<b>{series.name}</b><br />',
pointFormat: 'x = {point.x}, y = {point.y}'
},
chart: {type: 'line'}
}
series_dt = [{
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
}]
line_9 = Daru::View::Plot.new(series_dt, opts)
line_9.show_in_iruby