I am trying to use highcharts.js' drilldown with nested series. To keep things simple, I am using the official demo provided by highcharts.js:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/multi-series/
drilldown: {
series: [{
id: 'republican-2010',
data: [
['East', 4],
['West', 2],
['North', 1],
['South', 4]
]
I would like to modify this example to also compare election years in the drilldown. The official demo's drilldown only shows a single election year for each region (north, south, etc). I would like to have the same blue/black columns (election year) in the drilldown graphs.
My attempts of nesting series in drilldowns are found here:
http://jsfiddle.net/draptik/bnvbsLd1/1/
drilldown: {
series: [{
id: 'republican-2010',
data: [{
series: [{
name: 'republican',
data: [{
name: 'north',
y: 3
}, {
name: 'west',
y: 3
}, {
name: 'east',
y: 3
}, {
name: 'south',
y: 3
}]
}, {
name: 'democrat',
Basically I just tried to nest a series in the drilldown's series data array, but this does not work.
Thankful for any pointer.
I think you should remove series property inside drilldown's data.
It'll be like this:
drilldown: {
series: [
{
id: 'republican-2010',
data: [{
name: 'republican',
y: 10,
drilldown: 'repbulican'
}]
}, // end of first series
{
id: 'repbulican',
data: [
['north' , 3],
['west' , 3],
['east', 3],
['south', 3]
]
}
] // end of series array
} // end of drilldown object
I already made an example for 'republican-2010' series only to show you how to do it.
Just do the same for other series.
Related
I have an array of the following objects:
Now my goal is to create column chart that would look something like this:
And then the next object in my array.
I have been looking through the documentation and all I was able to find was something like this:
Highcharts demo
The problem is the data value that you set in the series. if you insert an array it will be split across all categories. As far as I can see you cannot lock one data series to one category.
What can I try next?
My attempt:
I'm attempting within this fiddle:
Highcharts.chart('container', {
xAxis: {
minPadding: 0.05,
maxPadding: 0.05,
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
series: [{
type: 'column',
name: 'Apples',
zoneAxis: 'x',
data: [
['First', 29.9],
['Second', 71.5],
['Third', 106.4]
]
},{
type: 'column',
name: 'oranges',
data:[
['A', 20]
]
}]
});
Fiddle
There are probably many ways to approach this, and the best option depends on how specific your needs are.
The first way that comes to mind, is to just manipulate how you structure your data and your categories.
Example:
xAxis: {
categories: ['Group 1', 'Group 2', 'Group 3'],
labels: { style: { fontWeight: 'bold' } }
},
series: [{
name: 'Subset A',
data: [{y: 10, name: '1A'}, {y: 5, name: '2A'}, {y: 7, name: '3A'}]
}, {
name: 'Subset B',
data: [{y: 5, name: '1B'}, {y: 3, name: '2B'}, {y: 4, name: '3B'}]
}]
So, assuming three groups, each with two points. You want the first category to show point A and B from Group 1, the second category to show point A and B from Group 2, etc.
Fiddle:
http://jsfiddle.net/jlbriggs/hLfajxz9/
Output:
The main potential downside to this is that the legend will show/hide points A or B, and not Group 1, 2, or 3.
You can work around this by adding a function to show/hide categories, if that's an issue.
Check out the answer on this question here:
How to show/hide categories with checkbox using highcharts?
And the related fiddle here:
http://jsfiddle.net/jlbriggs/wqwawuLq/
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.
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/
I have a database with a lot of entries. It looks like the following example:
id | rating | topic1 | topic2
1 positive A X
2 negative A Y
3 neutral B Z
Step 1:
Now I want to have a chart (highchart) showing stacked columns where each column is a topic (topic1) and the stacked parts are the amount of entries for each rating of this topic1. That chart is easy to create.
Step 2:
Additionally I would like to have a drilldown for each column. After clicking on a column I want to get again a stacked column chart where each column is the sub topic (topic2) of the clicked one and the stacked parts are the amount of entries for each rating of this topic2.
I've created an examplce. http://jsfiddle.net/9RLEB/2/
Step 1 is working fine but I can't get step 2 working. Can anyone please try to help me? Or give me a hint how I can achieve this result?
Thank you in advance.
Andi
If I understand correctly, have you tried clicking the column title (the "A" and "B") to drilldown?
UPDATE
To make this actually working, you need to specify different drilldown for each data point:
series: [{
name: 'negative',
data: [{
name: 'A',
y: 13,
drilldown: 'topic1Neg',
color: '#e53642'
}, {
name: 'B',
y: 42,
drilldown: 'topic2Neg',
color: '#e53642'
}]
}, {
name: 'neutral',
data: [{
name: 'A',
y: 61,
drilldown: 'topic1Neu',
color: '#919191'
}, {
name: 'B',
y: 23,
drilldown: 'topic2Neu',
color: '#919191'
}]
}, {
name: 'positive',
data: [{
name: 'A',
y: 26,
drilldown: 'topic1Pos',
color: '#56cb46'
}, {
name: 'B',
y: 11,
drilldown: 'topic2Pos',
color: '#56cb46'
}]
}
],
drilldown: {
series: [{
id: 'topic1Neg',
data: [
['X', 4],
['Y', 2]
]
}, {
id: 'topic2Neg',
data: [
['X', 5],
['Y', 3]
]
},{
id: 'topic1Neu',
data: [
['X', 7],
['Y', 1]
]
}, {
id: 'topic2Neu',
data: [
['X', 8],
['Y', 4]
]
},{
id: 'topic1Pos',
data: [
['X', 2],
['Y', 3]
]
}, {
id: 'topic2Pos',
data: [
['X', 9],
['Y', 5]
]
}]
}
You just need to calculate the drilldown values yourself.
Sample here: http://jsfiddle.net/wyfqf/