HTML5- highchart.js without jquery using runOnLoad.js
---------------------------------------------------------------------------
<!doctype html>
<head>
<script src="runOnLoad.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script>
// 3d bubblechart donut example
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'bubblechartdata',
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts bubbles with radial gradient fill'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
series: [{
data: [
[9, 81, 63],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
}, {
data: [
[42, 38, 20],
[6, 18, 1],
[1, 93, 55],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 87, 89],
[57, 91, 82],
[45, 15, 98]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
]
}
}
}]
});
});
// 3d Highcharts donut example
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'highdonut',
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Contents of Highsoft\'s weekly fruit delivery'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Delivered amount',
data: [
['Bananas', 8],
['Kiwi', 3],
['Mixed nuts', 1],
['Oranges', 6],
['Apples', 8],
['Pears', 4],
['Clementines', 4],
['Reddish (bag)', 1],
['Grapes (bunch)', 6]
]
}]
});
});
// Pie charts 3D option example
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'piechart',
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
// activity chart
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'activity',
type: 'solidgauge',
marginTop: 50
},
title: {
text: 'performance',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '13px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth, labelHeight) {
return {
x: 150 - labelWidth / 2,
y: 140
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [
{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Move',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 80
}]
}, {
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}]
}, {
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
});
});
//stacked bar chart
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'stackbarchart',
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
}
},
title: {
text: 'Total fruit consumption, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
// 3d drilldown pie example
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'drilldownpie',
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/>'
},
series: [{
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: null
}]
}],
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]
]
}]
}
});
});
//stacked storage bar chart
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'stackedstorebarchart',
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
}
},
title: {
text: 'Total storage consumption, grouped by month'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'jun']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
},visible: false
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: [{
name: 'Used',
data: [5, 3, 4, 7, 2],
}, {
name: 'Availabe',
data: [3, 4, 4, 2, 5],
}, {
name: 'Saved',
data: [3, 0, 4, 4, 3],
}]
});
});
// end of column 3 - stacked storage bar chart
//pie donut slice 2D chart
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'piedonut',
type: 'pie'
},
plotOptions: {
pie: {
borderColor: '#000000',
innerSize: '60%'
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]}]
},
// using
function(chart) { // on complete
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
fill: '#ddd',
}).add();
// Render the text
chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({
width: circleradius*2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
});
// grouped pie chart
var noBorder = {
states:{
hover:{
halo: {
size: 1
}
}
}
};
runOnLoad(function(){
Highcharts.setOptions({
colors: ['#8edce7', '#e8ebeb']
});
// Create the chart for completion
var chart_completion = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'pie',
margin: [0,0,0,0],
height: 100,
width: 100
},
tooltip: {
enabled: false,
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: noBorder
},
title: {
text: 'In Prog.',
align: 'center',
verticalAlign: 'middle',
style: {
fontSize: '9.5px'
}
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["MSIE",10],[,2]],
innerSize: '80%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
},
point : {
events: {
mouseOver: function(){
this.oldTitle = chart_completion.options.title.text;
chart_completion.setTitle({
text: 'New title '
});
},
mouseOut: function(){
chart_completion.setTitle({
text: this.oldTitle
});
}
}
}
}]
});
Highcharts.setOptions({
colors: ['#f07173', '#e8ebeb']
});
// Create the chart for time
var chart_time = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'pie',
margin: 0,
height: 100,
width: 100
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series : noBorder
},
tooltip: {
enabled: false,
},
title: {
text: 'Hours',
align: 'center',
verticalAlign: 'middle',
style: {
fontSize: '9.5px'
}
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["MSIE",10],[,2]],
innerSize: '80%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
});
Highcharts.setOptions({
colors: ['#8adfb9', '#e8ebeb']
});
// Create the chart for Budget
var chart_budget = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'pie',
margin: 0,
height: 100,
width: 100
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: noBorder
},
title: {
text: 'Budget',
align: 'center',
verticalAlign: 'middle',
style: {
fontSize: '9.5px'
}
},
tooltip: {
enabled: false,
animation: false,
backgroundColor: null
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["MSIE",10],[,2]],
innerSize: '80%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
});
});
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'donuttext',
type: 'pie'
},
plotOptions: {
pie: {
innerSize: '60%'
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]}]
},
function(chart) { // on complete
var textX = chart.plotLeft + (chart.plotWidth * 0.5);
var textY = chart.plotTop + (chart.plotHeight * 0.5);
var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
span += '<span style="font-size: 32px">Upper</span><br>';
span += '<span style="font-size: 16px">Lower</span>';
span += '</span>';
$("#addText").append(span);
span = $('#pieChartInfoText');
span.css('left', textX + (span.width() * -0.5));
span.css('top', textY + (span.height() * -0.5));
});
});
runOnLoad(function(){
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
var speedmeeter = document.querySelector("#container-speed");
speedmeeter.highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// The RPM gauge
var rpmmeeter = document.getElementById("container-rpm")
document.getElementById("container-rpm").highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
title: {
text: 'RPM'
}
},
series: [{
name: 'RPM',
data: [1],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
// Bring life to the dials
setTimeout(function () {
// Speed
var chart = speedmeeter.highcharts(),
point,
newVal,
inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}
// RPM
chart = document.getElementById("container-rpm").highcharts();
if (chart) {
point = chart.series[0].points[0];
inc = Math.random() - 0.5;
newVal = point.y + inc;
if (newVal < 0 || newVal > 5) {
newVal = point.y - inc;
}
point.update(newVal);
}
}, 2000);
});
</script>
</head>
<body>
<div id="bubblechartdata" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<div id="highdonut" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<div id="piechart" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<div id="activity" style="width: 400px; height: 400px; margin: 0 auto"></div>
<div id="stackbarchart" ></div>
<div id="drilldownpie" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<div id="stackedstorebarchart" class="col-md-6"></div>
<div id="piedonut" style="height: 400px; width: 500px"></div>
<div id="container1" style="display:inline-block;"></div>
<div id="container2" style="display:inline-block;"></div>
<div id="container3" style="display:inline-block;"></div>
<div>
<div id="donuttext" style="position:absolute; left:0px; top:0px;"></div>
<div id="addText" style="position:absolute; left:0px; top:0px;"></div>
</div>
<div style="width: 600px; height: 400px; margin: 0 auto">
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>
</body>
</html>
runOnLoad.js
-------------
//code.stephenmorley.org
var runOnLoad=function(c,o,d,e){function x(){for(e=1;c.length;)c.shift()()}o[d]?(document[d]('DOMContentLoaded',x,0),o[d]('load',x,0)):o.attachEvent('onload',x);return function(t){e?o.setTimeout(t,0):c.push(t)}}([],window,'addEventListener');
---------------------------------------------------------------------------
<!doctype html>
<head>
<script src="runOnLoad.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script>
// 3d bubblechart donut example
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'bubblechartdata',
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts bubbles with radial gradient fill'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
series: [{
data: [
[9, 81, 63],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
}, {
data: [
[42, 38, 20],
[6, 18, 1],
[1, 93, 55],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 87, 89],
[57, 91, 82],
[45, 15, 98]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
]
}
}
}]
});
});
// 3d Highcharts donut example
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'highdonut',
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Contents of Highsoft\'s weekly fruit delivery'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Delivered amount',
data: [
['Bananas', 8],
['Kiwi', 3],
['Mixed nuts', 1],
['Oranges', 6],
['Apples', 8],
['Pears', 4],
['Clementines', 4],
['Reddish (bag)', 1],
['Grapes (bunch)', 6]
]
}]
});
});
// Pie charts 3D option example
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'piechart',
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
// activity chart
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'activity',
type: 'solidgauge',
marginTop: 50
},
title: {
text: 'performance',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '13px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth, labelHeight) {
return {
x: 150 - labelWidth / 2,
y: 140
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [
{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Move',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 80
}]
}, {
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}]
}, {
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
});
});
//stacked bar chart
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'stackbarchart',
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
}
},
title: {
text: 'Total fruit consumption, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
// 3d drilldown pie example
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'drilldownpie',
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/>'
},
series: [{
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: null
}]
}],
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]
]
}]
}
});
});
//stacked storage bar chart
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'stackedstorebarchart',
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
}
},
title: {
text: 'Total storage consumption, grouped by month'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'jun']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
},visible: false
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: [{
name: 'Used',
data: [5, 3, 4, 7, 2],
}, {
name: 'Availabe',
data: [3, 4, 4, 2, 5],
}, {
name: 'Saved',
data: [3, 0, 4, 4, 3],
}]
});
});
// end of column 3 - stacked storage bar chart
//pie donut slice 2D chart
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'piedonut',
type: 'pie'
},
plotOptions: {
pie: {
borderColor: '#000000',
innerSize: '60%'
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]}]
},
// using
function(chart) { // on complete
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
fill: '#ddd',
}).add();
// Render the text
chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({
width: circleradius*2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
});
// grouped pie chart
var noBorder = {
states:{
hover:{
halo: {
size: 1
}
}
}
};
runOnLoad(function(){
Highcharts.setOptions({
colors: ['#8edce7', '#e8ebeb']
});
// Create the chart for completion
var chart_completion = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'pie',
margin: [0,0,0,0],
height: 100,
width: 100
},
tooltip: {
enabled: false,
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: noBorder
},
title: {
text: 'In Prog.',
align: 'center',
verticalAlign: 'middle',
style: {
fontSize: '9.5px'
}
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["MSIE",10],[,2]],
innerSize: '80%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
},
point : {
events: {
mouseOver: function(){
this.oldTitle = chart_completion.options.title.text;
chart_completion.setTitle({
text: 'New title '
});
},
mouseOut: function(){
chart_completion.setTitle({
text: this.oldTitle
});
}
}
}
}]
});
Highcharts.setOptions({
colors: ['#f07173', '#e8ebeb']
});
// Create the chart for time
var chart_time = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'pie',
margin: 0,
height: 100,
width: 100
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series : noBorder
},
tooltip: {
enabled: false,
},
title: {
text: 'Hours',
align: 'center',
verticalAlign: 'middle',
style: {
fontSize: '9.5px'
}
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["MSIE",10],[,2]],
innerSize: '80%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
});
Highcharts.setOptions({
colors: ['#8adfb9', '#e8ebeb']
});
// Create the chart for Budget
var chart_budget = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'pie',
margin: 0,
height: 100,
width: 100
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: noBorder
},
title: {
text: 'Budget',
align: 'center',
verticalAlign: 'middle',
style: {
fontSize: '9.5px'
}
},
tooltip: {
enabled: false,
animation: false,
backgroundColor: null
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["MSIE",10],[,2]],
innerSize: '80%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
});
});
runOnLoad(function(){
new Highcharts.Chart({
chart: {
renderTo : 'donuttext',
type: 'pie'
},
plotOptions: {
pie: {
innerSize: '60%'
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]}]
},
function(chart) { // on complete
var textX = chart.plotLeft + (chart.plotWidth * 0.5);
var textY = chart.plotTop + (chart.plotHeight * 0.5);
var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
span += '<span style="font-size: 32px">Upper</span><br>';
span += '<span style="font-size: 16px">Lower</span>';
span += '</span>';
$("#addText").append(span);
span = $('#pieChartInfoText');
span.css('left', textX + (span.width() * -0.5));
span.css('top', textY + (span.height() * -0.5));
});
});
runOnLoad(function(){
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
var speedmeeter = document.querySelector("#container-speed");
speedmeeter.highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// The RPM gauge
var rpmmeeter = document.getElementById("container-rpm")
document.getElementById("container-rpm").highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
title: {
text: 'RPM'
}
},
series: [{
name: 'RPM',
data: [1],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
// Bring life to the dials
setTimeout(function () {
// Speed
var chart = speedmeeter.highcharts(),
point,
newVal,
inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}
// RPM
chart = document.getElementById("container-rpm").highcharts();
if (chart) {
point = chart.series[0].points[0];
inc = Math.random() - 0.5;
newVal = point.y + inc;
if (newVal < 0 || newVal > 5) {
newVal = point.y - inc;
}
point.update(newVal);
}
}, 2000);
});
</script>
</head>
<body>
<div id="bubblechartdata" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<div id="highdonut" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<div id="piechart" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<div id="activity" style="width: 400px; height: 400px; margin: 0 auto"></div>
<div id="stackbarchart" ></div>
<div id="drilldownpie" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<div id="stackedstorebarchart" class="col-md-6"></div>
<div id="piedonut" style="height: 400px; width: 500px"></div>
<div id="container1" style="display:inline-block;"></div>
<div id="container2" style="display:inline-block;"></div>
<div id="container3" style="display:inline-block;"></div>
<div>
<div id="donuttext" style="position:absolute; left:0px; top:0px;"></div>
<div id="addText" style="position:absolute; left:0px; top:0px;"></div>
</div>
<div style="width: 600px; height: 400px; margin: 0 auto">
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>
</body>
</html>
runOnLoad.js
-------------
//code.stephenmorley.org
var runOnLoad=function(c,o,d,e){function x(){for(e=1;c.length;)c.shift()()}o[d]?(document[d]('DOMContentLoaded',x,0),o[d]('load',x,0)):o.attachEvent('onload',x);return function(t){e?o.setTimeout(t,0):c.push(t)}}([],window,'addEventListener');
No comments:
Post a Comment