I create chart using HighCharts and I copy some example from official site, I havesomething exactly like this jsfidle How to add on the same page another same chart with different data?
I'm looking on google and here for some example but can't find something matching my example.
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
data = [{
y: 56.33,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
color: colors[0]
}
}, {
y: 10.38,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
color: colors[1]
}
}, {
y: 24.03,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',
'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'
],
data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
color: colors[2]
}
}, {
y: 4.77,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
color: colors[3]
}
}, {
y: 0.91,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
data: [0.34, 0.17, 0.24, 0.16],
color: colors[4]
}
}, {
y: 0.2,
color: colors[5],
drilldown: {
name: 'Proprietary or Undetectable',
categories: [],
data: [],
color: colors[5]
}
}],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, January, 2015 to May, 2015'
},
subtitle: {
text: 'Source: netmarketshare.com'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
});
By setting a second container and add 3 new arrays: Data2, browserData2 and versionsData2, don't forget to add the last two arrays (browserData2 and versionsData2) to the series option in the second container:
series: [{
name: 'Browsers',
data: browserData2,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Versions',
data: versionsData2,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
Please check the following example (jsfiddle):
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
data = [{
y: 56.33,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
color: colors[0]
}
}, {
y: 10.38,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
color: colors[1]
}
}, {
y: 24.03,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',
'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'
],
data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
color: colors[2]
}
}, {
y: 4.77,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
color: colors[3]
}
}, {
y: 0.91,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
data: [0.34, 0.17, 0.24, 0.16],
color: colors[4]
}
}, {
y: 0.2,
color: colors[5],
drilldown: {
name: 'Proprietary or Undetectable',
categories: [],
data: [],
color: colors[5]
}
}],
categories2 = ['A', 'B', 'C', 'D', 'E'],
data2 = [{
y: 56.33,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
color: colors[0]
}
}, {
y: 10.38,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['F7', 'F6', 'F5', 'F4', 'F3', 'F2', 'F1'],
data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
color: colors[1]
}
}, {
y: 24.03,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Cn', 'Cm', 'Cj', 'Ct', 'Cb',
'Cc', 'Cf', 'Cy', 'Ct', 'Cr', 'Cr', 'Ce', 'Cw', 'Cq'
],
data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
color: colors[2]
}
}, {
y: 4.77,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['S7', 'S6', 'S5', 'S4', 'S3', 'S2', 'S1'],
data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
color: colors[3]
}
}, {
y: 0.91,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['O1', 'O2', 'O3', 'O4'],
data: [0.34, 0.17, 0.24, 0.16],
color: colors[4]
}
}, {
y: 0.2,
color: colors[5],
drilldown: {
name: 'Proprietary or Undetectable',
categories: [],
data: [],
color: colors[5]
}
}],
browserData = [],
versionsData = [],
browserData2 = [],
versionsData2 = [],
i,
j,
dataLen = data.length,
dataLen2 = data2.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Build the data arrays
for (i = 0; i < dataLen2; i += 1) {
// add browser data
browserData2.push({
name: categories2[i],
y: data2[i].y,
color: data2[i].color
});
// add version data
drillDataLen = data2[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData2.push({
name: data2[i].drilldown.categories[j],
y: data2[i].drilldown.data[j],
color: Highcharts.Color(data2[i].color).brighten(brightness).get()
});
}
}
// Create the chart
$('#container2').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, January, 2015 to May, 2015'
},
subtitle: {
text: 'Source: netmarketshare.com'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Second Chart'
},
subtitle: {
text: 'Source: netmarketshare.com'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData2,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Versions',
data: versionsData2,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
});
If you need 3 charts you can copy-paste the initialization and just change the data and container name.
Or you can make a function, that populate a chart by given data and container name. Something like this:
function populateChart(renderTo,data,title) {
var chart = new Highcharts.Chart({
chart: {
renderTo: renderTo,
type: 'column'
},
title: {
text: title
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
series: [{
name: 'John',
data: data,
stack: 'male'
}]
});
}
And then just call it when needed:
$(function(){
populateChart('container1',[5, 3, 4, 7, 2],'Title 1');
populateChart('container2',[3, 4, 4, 2, 5],'Title 2');
populateChart('container3',[2, 5, 6, 2, 1],'Title 3');
});
You can check my example
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
How to make the dual layered highchart donut chart into 3D chart? Basically the converting the highchart example in the below link to 3D.
http://www.highcharts.com/demo/pie-donut
Just add 3d options to your chart from provided example. If you want to set options for each series specify them in series objects instead of plotoptions.pie.
Example:
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
data = [{
y: 56.33,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
color: colors[0]
}
}, {
y: 10.38,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
color: colors[1]
}
}, {
y: 24.03,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',
'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'
],
data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
color: colors[2]
}
}, {
y: 4.77,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
color: colors[3]
}
}, {
y: 0.91,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
data: [0.34, 0.17, 0.24, 0.16],
color: colors[4]
}
}, {
y: 0.2,
color: colors[5],
drilldown: {
name: 'Proprietary or Undetectable',
categories: [],
data: [],
color: colors[5]
}
}],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Browser market share, January, 2015 to May, 2015'
},
subtitle: {
text: 'Source: netmarketshare.com'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
/* pie: {
shadow: false,
center: ['50%', '50%'],
innerSize: 100,
depth: 45
}*/
},
tooltip: {
valueSuffix: '%'
},
series: [{
shadow: false,
center: ['50%', '50%'],
innerSize: 100,
depth: 45,
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
shadow: false,
center: ['50%', '60%'],
innerSize: 100,
depth: 45,
name: 'Versions',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
Live example:
http://jsfiddle.net/5c2xc32g/
As shown below:
Instead of that I want the x-axis labels to look something like this:
Without the GMT and time-zone. Sorry I am new to Highcharts !
EDIT: added code
Highcharts.theme = {
colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
chart: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#2a2a2b'],
[1, '#3e3e40']
]
},
style: {
fontFamily: "'Unica One', sans-serif"
},
plotBorderColor: '#606063'
},
title: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '20px'
}
},
subtitle: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b'
},
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
title: {
style: {
color: '#A0A0A3'
}
}
},
yAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
tickWidth: 1,
title: {
style: {
color: '#A0A0A3'
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
}
},
plotOptions: {
series: {
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#333'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
credits: {
style: {
color: '#666'
}
},
labels: {
style: {
color: '#707073'
}
},
drilldown: {
activeAxisLabelStyle: {
color: '#F0F0F3'
},
activeDataLabelStyle: {
color: '#F0F0F3'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
theme: {
fill: '#505053'
}
}
},
navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
},
xAxis: {
gridLineColor: '#505053'
}
},
scrollbar: {
barBackgroundColor: '#808083',
barBorderColor: '#808083',
buttonArrowColor: '#CCC',
buttonBackgroundColor: '#606063',
buttonBorderColor: '#606063',
rifleColor: '#FFF',
trackBackgroundColor: '#404043',
trackBorderColor: '#404043'
},
global: {
useUTC: false
},
// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#C0C0C0',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'
};
Highcharts.setOptions(Highcharts.theme);
////////////////////
$('#high').highcharts({
chart: {
borderColor: '#EBBA95',
borderRadius: 20,
borderWidth: 2,
zoomType: 'x',
spacingTop: 40
},
title: {
text: 'Humidity/Temperature Graph',
x: -20, //center
y: 5
},
subtitle: {
text: 'Elemental Electronics | Click and drag to zoom',
x: -20,
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b'
},
categories: yearSeries,
},
yAxis: {
title: {
text: 'All points on one graph'
},
plotBands: [
{
color: 'orange', // Color value
from: 0, // Start of the plot band
to: -25 // End of the plot band
,label: {
text: 'Lower Range: 1 ppm',
color: '#ffffff',
align: 'left'
}
},
{
label: {
text: 'Upper Range: 5ppm',
color: '#ffffff',
align: 'left'
},
color: 'orange', // Color value
from: 75, // Start of the plot band
to: 100// End of the plot band
}
],
},
tooltip: {
valueSuffix: '°C'
},
series: [
{
name: 'Temperature',
textColor: '#ffffff',
data: mySeriestemp
}
],
});
});
mySeriestemp and yearSeries are both from arrays that I got using:
for (var i = 0; i < year.length; i++) {
yearSeries.push(new Date(year[i]));
mySeriestemp.push(temp[i]);
}
update
As I seen your code you need to add following
labels: {
formatter: function() {
return Highcharts.dateFormat('%e. %b', this.value);
}
See the working fiddle with your code
Use this
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b'
}
}
formatter function needs to added here to show the labels in desired format
labels: {
formatter: function() {
return Highcharts.dateFormat('%e. %b', this.value);
}
I am trying to get several line charts in one container and allow drill down in each of the line graphs. But I am not even able to plot the different line graphs at level 0. The data of the second line graph replaces the first one instead of plotting two graphs. Can you please help me out with this?
Here is what I have: link
$(function () {
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands 1',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}],
name = 'Browser brands 2',
data = [{
y: 25.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 41.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 31.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 17.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 23.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}]
;
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
}, false);
chart.redraw();
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
legend:{
enabled:false
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
line: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +'% market share</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' versions';
} else {
s += 'Click to return to browser brands';
}
return s;
}
},
series: [{
name: name,
data: data
}],
exporting: {
enabled: false
}
});
});
});
So you would like to have i.e two lines in level 0, and each of line should have separete drill down values? If yes, it should look like this: http://jsfiddle.net/JPzqn/7/
series: [{
name: name,
data: data
},{
name: name2,
data: data2
}],
I am modifying this donut chart and need to remove the middle and replace it with a text:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-donut/
What is the best way to do that?
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
// Build the data arrays
var browserData = [];
var versionsData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
for (var j = 0; j < data[i].drilldown.data.length; j++) {
var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
}
}]
});
});
To get empty space in the middle of a chart use 'size' and 'innerSize' - Like in your example:
size: '80%',
innerSize: '60%'
Regarding text - I advice to use renderer.text().
I am trying to generate a line chart using highcharts that can be drilled down a few levels. Highchart has this functionality for the column charts but I could not find anything for the line charts. If I try to change the chart type from column to line then I get a while line as chart which can't be drilled down further. Is there any way I can apply drill down functionality to a line chart in highcharts. This is the code that I have:
$(function () {
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +'% market share</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' versions';
} else {
s += 'Click to return to browser brands';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
}
});
});
});
</script>
</head>
<body>
Please let me know if a workaround is possible.
Please take look at drilldown line example: jsfiddle.net/mv9FV/6/