trying to figure out how to display this highcharts example with data categories of name (john, jane, joe) without changing how the data is supplied
$(function ()
{
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});`
http://jsfiddle.net/zAMCK/
Basically, I want to supply the category of data together. Is this possible? Also would like to supply multiple different fruits per person, which may be unique per person
You can set for each value specific x category index, demo: http://jsfiddle.net/zAMCK/1/
series: [{
name: 'John',
data: [[0, 2], [3, 5], [4, 1]]
}, {
name: 'Jane',
data: [[1, 3], [1, 5], [1, 3]] //not supported duplicate x-values
}, {
name: 'Joe',
data: [[0, 1], [2, 5], [4, 1]]
}]
Related
I am not sure if this is a bug. Take the case of multi series drill down. After a legend item has been clicked, the series for the item is hidden and then we drill down. From here, if one drills up then it should go to last active state, i.e. multi series but with one series hidden. Instead of going to last active state, drill up goes to initial series data.
To reproduce, please goto this fiddle. Reproducible steps below the code.
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts multi-series drilldown'
},
subtitle: {
text: 'Click columns to drill down to single series. Click categories to drill down both.'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: '2010',
data: [{
name: 'Republican',
y: 5,
drilldown: 'republican-2010'
}, {
name: 'Democrats',
y: 2,
drilldown: 'democrats-2010'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2010'
}]
}, {
name: '2014',
data: [{
name: 'Republican',
y: 4,
drilldown: 'republican-2014'
}, {
name: 'Democrats',
y: 4,
drilldown: 'democrats-2014'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2014'
}]
}],
drilldown: {
series: [{
id: 'republican-2010',
data: [
['East', 4],
['West', 2],
['North', 1],
['South', 4]
]
}, {
id: 'democrats-2010',
data: [
['East', 6],
['West', 2],
['North', 2],
['South', 4]
]
}, {
id: 'other-2010',
data: [
['East', 2],
['West', 7],
['North', 3],
['South', 2]
]
}, {
id: 'republican-2014',
data: [
['East', 2],
['West', 4],
['North', 1],
['South', 7]
]
}, {
id: 'democrats-2014',
data: [
['East', 4],
['West', 2],
['North', 5],
['South', 3]
]
}, {
id: 'other-2014',
data: [
['East', 7],
['West', 8],
['North', 2],
['South', 2]
]
}]
}
});
});
Click on any legend item, say '2010'. It will hide the corresponding columns.
Drill down any xAxis category, say 'Republicans'. This will only show the chart for Republicans across for directions.
Click drillUpButton (Back to 2014). This will show the chart for both 2010 and 2014. Instead it should have shown only for 2014.
I have a drilldown Highcharts graph as follow:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
You can have a look at it here:JSFiddle link.
When user selects a column and the drilldown chart is displayed, how do I get the current drilldown's id and data?
Thanks in advance.
You can do that by using highcharts events:drilldown trigger.
by adding this in the chart section
chart: {
type: 'column',
events: {
drilldown: function (e) {
console.log(e.seriesOptions.id);
console.log(e.seriesOptions.data);
}
}
},
The complete demo is here
Demo
I'm trying to develop a chart that visualizes data using 1 measurement and 3 dimensions. I put one dimension on the x-axis, one as stack and one as list of series.
HighCharts has the stacked-grouped-column chart that I use as basis. See my jsfiddle.
series: [{
name: 'John',
color: '#ff4400',
data: [5, 3, 4, 7, 2],
stack: '2014'
}, {
name: 'Joe',
color: '#44ff00',
data: [3, 4, 4, 2, 5],
stack: '2014'
}, {
name: 'John',
color: '#ff4400',
data: [2, 5, 6, 2, 1],
showInLegend: false,
stack: '2015'
}, {
name: 'Joe',
data: [3, 0, 4, 4, 3],
color: '#44ff00',
showInLegend: false,
stack: '2015'
}]
I would like to be able to display the stack name on a second level x-axis. I know of the group-plugin, but that does not seems to work together with stacks.
Any hints?
It might not be the best solution (so please keep 'm coming), but I now fake a dataseries.
See jsfiddle update
xAxis: [{
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
{
categories: ['2014', '2015', '2014', '2015', '2014', '2015','2014', '2015', '2014', '2015'],
opposite: true
}],
series: [{
name: 'John',
color: '#ff4400',
data: [5, 3, 4, 7, 2],
stack: '2014',
}, {
name: 'Joe',
color: '#44ff00',
data: [3, 4, 4, 2, 5],
stack: '2014',
}, {
name: 'John',
color: '#ff4400',
data: [2, 5, 6, 2, 1],
showInLegend: false,
stack: '2015'
}, {
name: 'Joe',
data: [3, 0, 4, 4, 3],
color: '#44ff00',
showInLegend: false,
stack: '2015'
}, {
name: '',
data: [0, 0, 0,0, 0, 0,0, 0, 0,0],
showInLegend: false,
stack: '2015',
xAxis: 1
}]
Result:
Update
Fiddled around with fake axis labels: http://jsfiddle.net/b72e0vh4/8/
I am using the latest version of Highcharts which is Highcharts 3.0.9 And I need to do multiple level of drilldown. The example provided only showing 1 level of drilldown only.
The sample code:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
})
The link of the code : jsfiddle
So how to do multiple level of drilldown using the new version?
You have done it well Hayu Rahiza.
All you need to do is repeat the same you did in series section in the drill down section also
{
name: 'Toyota',
y: 4,
drilldown: 'Toyota'
},{
id: 'Toyota',
data: [
['Corolla', 4],
['Fortuner', 2],
['Etios', 2],
['Liva', 10]
]
}
I've update your fiddle at http://jsfiddle.net/dP35L/1/
I Hope this will help you
I using column stacked and grouped chart for comparing.
Check this example code : #fiddle http://jsfiddle.net/wvT85/
I am trying to compare two male stacks
I want the grouped chart have same colors for the item and no repeated legends.
i.e where ever john is used it should have same color and legand should have only one john not two.
Can any one help me on this code.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
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;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'John',
data: [2, 5, 6, 2, 1],
stack: 'male2'
}, {
name: 'Joe',
data: [3, 0, 4, 4, 3],
stack: 'male2'
}]
});
});
});
Use LinkedTo...
http://api.highcharts.com/highcharts#plotOptions.series.linkedTo
The demo of it is below:
linkedTo: ':previous',
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/arearange-line/
That way the legend is still functional, and you don't need to set the colors the same.
I ran into the same problem recently. So what I did is, combine two of the answers above to solve the problem.
http://jsfiddle.net/sanshila/2g79dhds/1/
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male',
color: '#6666FF',
events: {
legendItemClick: function (event) {
this.visible ? this.chart.get('johnId').hide() : this.chart.get('johnId').show();
}
}
}, {
name: 'John',
id: 'johnId',
color: '#6666FF',
showInLegend: false,
data: [2, 5, 6, 2, 1],
stack: 'male2'
}]
You can manually define the series colors and hide the 2nd set in the legend to do what you want, but this doesn't really link the data. It won't hide both johns if you click in the legend for instance. This type of associating 2 points in different series isn't supported as far as I know. I would say that I think you might want to rethink how you're representing your data, I still don't understand what you're trying to accomplish.
series: [{
name: 'John',
color:'blue',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'John',
color:'blue',
showInLegend:false,
data: [2, 5, 6, 2, 1],
stack: 'male2'
}]
});
http://jsfiddle.net/wvT85/2/
I think this is what you want: http://jsfiddle.net/b3AF9/21/
As Ben said, manually set the color for the stacks. Then give ids to the second stack and add
event: {
legendItemClick: function(event){
this.visible?
this.chart.get('Joe2').hide() :
this.chart.get('Joe2').show();
}
}
to series in the first stack.