require 'daru/view'
true
Daru::View.plotting_library = :highcharts
:highcharts
# pie-basic chart : pie basic
opts = {
chart: {
plotBackgroundColor: nil,
plotBorderWidth: nil,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: "(Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'".js_code
}
}
}
},
}
series_dt = [
{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}
]
pie_basic = Daru::View::Plot.new(series_dt, opts)
pie_basic.show_in_iruby
# pie chart : pie legend
opts = {
chart: {
plotBackgroundColor: nil,
plotBorderWidth: nil,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
}
series_dt = [
{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}
]
pie_legend = Daru::View::Plot.new(series_dt, opts)
pie_legend.show_in_iruby
#Todo: pie-basic chart : pie-donut/
# a lot of stuff. will do latter
# pie chart : semi-circle/
opts = {
chart: {
plotBackgroundColor: nil,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
}
series_dt = [
{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91],
{
name: 'Proprietary or Undetectable',
y: 0.2,
dataLabels: {
enabled: false
}
}
]
}
]
pie_semi_circle = Daru::View::Plot.new(series_dt, opts)
pie_semi_circle.show_in_iruby
# note : drilldown.js is needed for it.
# pie-basic chart : pie drilldown
opts = {
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
['v11.0', 24.13],
['v8.0', 17.2],
['v9.0', 8.11],
['v10.0', 5.33],
['v6.0', 1.06],
['v7.0', 0.5]
]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
['v40.0', 5],
['v41.0', 4.32],
['v42.0', 3.68],
['v39.0', 2.96],
['v36.0', 2.53],
['v43.0', 1.45],
['v31.0', 1.24],
['v35.0', 0.85],
['v38.0', 0.6],
['v32.0', 0.55],
['v37.0', 0.38],
['v33.0', 0.19],
['v34.0', 0.14],
['v30.0', 0.14]
]
}, {
name: 'Firefox',
id: 'Firefox',
data: [
['v35', 2.76],
['v36', 2.32],
['v37', 2.31],
['v34', 1.27],
['v38', 1.02],
['v31', 0.33],
['v33', 0.22],
['v32', 0.15]
]
}, {
name: 'Safari',
id: 'Safari',
data: [
['v8.0', 2.56],
['v7.1', 0.77],
['v5.1', 0.42],
['v5.0', 0.3],
['v6.1', 0.29],
['v7.0', 0.26],
['v6.2', 0.17]
]
}, {
name: 'Opera',
id: 'Opera',
data: [
['v12.x', 0.34],
['v28', 0.24],
['v27', 0.17],
['v29', 0.16]
]
}]
}
}
series_dt = [
{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: nil
}]
}
]
pie_drill = Daru::View::Plot.new(series_dt, opts)
pie_drill.show_in_iruby
# pie chart : pie gradient
# script for color is not added.
opts = {
chart: {
plotBackgroundColor: nil,
plotBorderWidth: nil,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: "(Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'".js_code
},
connectorColor: 'silver'
}
}
},
exporting: {
sourceWidth: 400,
sourceHeight: 200,
scale: 2,
chartOptions: {
subtitle: nil
}
}
}
series_dt = [
{
name: 'Brands',
data: [
{ name: 'Microsoft Internet Explorer', y: 56.33 },
{
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
},
{ name: 'Firefox', y: 10.38 },
{ name: 'Safari', y: 4.77 }, { name: 'Opera', y: 0.91 },
{ name: 'Proprietary or Undetectable', y: 0.2 }
]
}
]
pie_gradient = Daru::View::Plot.new(series_dt, opts)
pie_gradient.show_in_iruby