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.
Related
I was unsatisfied with the answer here:
Multiple y-axes for column graph categories in highcharts
I understand that you can create multiple y-axes can select them using yAxis:0,1,2 etc. for each series. Is it possible to do this for groups of bar graphs?
In the following example, I want 3 groups (Count A, Count B, Percent) each with 4 people (John, Joe, Jane, Janet). How do I do that in addition to having the count groups on one axes and the percent group on the other?
$('#container').highcharts({
chart: { type: 'column' },
xAxis: { categories: ['Count A', 'Count B', 'Percent']},
yAxis: [{ title: { text: 'Count' } }, { title: { text: 'Percent' }, opposite: true }],
series: [{
name: 'John',
data: [5, 3, 0.4],
}, {
name: 'Joe',
data: [3, 4, 0.6],
}, {
name: 'Jane',
data: [2, 5, 0.7],
}, {
name: 'Janet',
data: [3, 0, 0.8],
}]
});
So here's my solution to your problem.
I hope this is what you are looking for and I hope you find this helpful.
When you want to put the data into three categories with two different yAxis' you'd have to split it up in series like this. The percent is linked to the series with the values.
If you want it back to a column chart, just change the chart type to column.
http://jsfiddle.net/henrikskar/j1o450z5/
series: [{
name: 'John',
id: 's1',
data: [5, 3],
},{
//Links to id s1
linkedTo: 's1',
name: 'John',
data: [
//Puts 0.4 percent to the third category which is in the second array position
//of the categories
[2, 0.4]
],
//Assigns the percent to the second yAxis
yAxis: 1,
color: Highcharts.getOptions().colors[0]
},
Yes, this is absolutely possible, and you were on the right track with your research of multiple y-axes.
Below is a code snippet based on Highcharts' demo of stacked and grouped columns. I added a second y-axis and copied some of the demo data to assign to that axis.
Per your requirements, you'll find two sets, or stacks, of data assigned to the first/default y-axis, and a third set assigned to the second/opposite y-axis.
$(function () {
$('#container').highcharts({
chart: {
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'
}
},{
allowDecimals: false,
min: 0, max: 100,
title: {
text: 'Percentage of fruits'
},
opposite: true
}],
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: 'number'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'number'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'number2'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'number2'
},{
name: 'John',
data: [45, 30, 25, 70, 5],
stack: 'percentage',
yAxis: 1
}, {
name: 'Joe',
data: [25, 15, 40, 5, 5],
stack: 'percentage',
yAxis: 1
}, {
name: 'Jane',
data: [10, 50, 30, 5, 10],
stack: 'percentage',
yAxis: 1
}, {
name: 'Janet',
data: [20, 5, 5, 20, 80],
stack: 'percentage',
yAxis: 1
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>
One piece of advice: as with line charts on different axes, you need to be clear in your documentation, color choices, or chart labels so that users know which values correspond to which axis. This is particularly needed for columns, as users will naturally compare the heights of each column to its neighbor.
I hope this is helpful for you.
From the following fiddle we can implement drilldown in highCharts :http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/
Code:
$(function () {
// Create the chart
$('#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]
]
}]
}
});
});
But my requirement is when you perform a drill down, I need to show multiple charts showing same data, for example a spline as well as bar chart. I tried a lots of trial and error, but no luck. Is it possible to implement this kind of feature with HighCharts or any other jQuery plugins? Kindly share your thoughts.
My existing graph with HighCharts :
It's combination of bar and spline.
When I click a bar, this should result in the following drilldown view:
Please help to achieve this.
there is two things I'd like to do with this chart http://jsfiddle.net/4vyaaLjL/
$('#container').highcharts({
chart: {
type: 'area',
},
title: {
text: 'Fruit consumption *'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
},
yAxis: {
title: {
text: 'Y-Axis'
},
labels: {
formatter: function () {
return this.value;
}
}
},
series: [{
name: 'John',
data: [0, 1, 4, 4, 5, 2, 3, 7]
}, {
name: 'Jane',
data: [1, 0, 3, null, 3, 1, 2, 1]
}]
});
I'd like to style the 'null' data point with dashes.
Have some styled dots in place of the squares in the image.
Thanks
There is an option connectNulls, but you can not style with a different dash-style. So how about using series.zones? Unfortunately, you need to calculate in advance, where should be zones according to the null data-points. Another solution for this is to simple create separate series with just two points and line between them. You can connect two series using series.linkedTo option.
See this question.
And demo with 4.2.x version: http://jsfiddle.net/Yrygy/504/
Here is the basic demo for Highcharts Stacked & Grouped column layout. The tooltip shows the total for the stack using this call...
this.point.stackTotal
...however, there are 2 stacks in the group. How do I display the total for all stacks in the group. Something like...
this.point.groupTotal
...would be ideal, but that doesn't work
You can do this by adding an extra parameter to your tooltip function: shared:true and adding some extra code to sum up all the values within a grouped stack
Look at this example: JSFIDDLE
$(function () {
$('#container').highcharts({
chart: {
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() {
var s = '<b>'+ this.x +'</b>',
sum = 0;
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name +': '+
point.y;
sum += point.y;
});
s += '<br/>Sum: '+sum
return s;
},
shared: true
},
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: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
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]]
}]