require 'daru/view' Daru::View.plotting_library = :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 ([]) 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] }]) line_1.show_in_iruby line_3 = Daru::View::Plot.new # 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 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: '{series.name}
', 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 line_8.chart.options = opts; line_8.chart.series_data = series_dt 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: '{series.name}
', 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 line_9.chart.options = opts; line_9.chart.series_data = series_dt line_9.show_in_iruby