Related
I'm trying to implement a drill down on a bar chart.
My data series are splitted on 6 categories on the x axis and I have three different series (Social, Cognitive and Language).
I would like to be able to drill down in my series. For example, 'social' is made of 'Family' and 'Personnal'.
My problem is that highchart only wants to drill down into one data serie. In my case I would like the drill down to display serveral data series.
In the fiddle below, I would like the drill down from 'Social' to display the series 'Family' and 'Personnal'. But highchart only display the 'Personnal' serie.
Is there a standard way to do this with Highcharts?
series: [
{
name: 'Social',
type: 'bar',
data: [
{ y: 10, drilldown: 'A' },
{ y: 5, drilldown: 'A' },
{ y: 3, drilldown: 'A' },
{ y: 1, drilldown: 'A' },
{ y: 0, drilldown: 'A' },
{ y: 0, drilldown: 'A' },
],
color: '#EEAA3C',
},
{
name: 'Cognitive',
type: 'bar',
data: [6, 3, 1, 0, 1, 1],
color: '#86BD4A',
},
{
name: 'Language',
type: 'bar',
data: [4, 2, 0, 2, 0, 0],
color: '#E26E3E',
},
],
drilldown: {
series: [
{
name: 'Family',
id: 'A',
type: 'bar',
data: [1, 1, 1, 0, 0, 0],
color: '#F2B553',
},
{
name: 'Personal',
id: 'A',
type: 'bar',
data: [9, 4, 2, 1, 0, 0],
color: '#F8CC87',
},
],
},
https://jsfiddle.net/pacambi/3k4eng7w/
Thanks !
I have create graph 3 level drilldown and want to show legend of 3rd level follow with color.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
labels: {
rotation: -45,
align: "right",
y: 30,
},
type: "category",
tickWidth: 0
},
yAxis: {
title: {
text: 'Total fruit consumption'
}
},
legend: {
enabled: true,
itemStyle: {
fontSize:'10px'
},
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
reversed:true
},
plotOptions: {
series: {
cropThreshold: 1000,
animation: {
duration: 300
},
cursor: 'pointer',
point: {
events: {
click: function () {
if(this.id)
{
alert(this.id);
}
}
}
}
},
column: {
cropThreshold: 1000,
minPointLength: 3,
animation: false,
stacking: 'normal'
}
},
series: [{
index: 0,
name: 'Tippers',
turboThreshold: 0,
cropThreshold: Infinity,
data: [{
name:'01-Feb-2018',
colorByPoint:true,
y:3,
drilldown:'Tippers-1-2-2018'
}]
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
color: 'black',
fontWeight: 'normal'
},
series: [{
name: '01-Feb-2018',
id: 'Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: 'psb04221',
y: 1,
drilldown:'psb04221/Tippers-1-2-2018'
},{
name: 'rvd910939',
y: 2,
drilldown:'rvd910939/Tippers-1-2-2018'
},]
},{
name: '01-Feb-2018',
id: 'Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: 'rvd910939',
y: 2,
drilldown:'rvd910939/Trucks-1-2-2018'
},{
name: 'sks913031',
y: 1,
drilldown:'sks913031/Trucks-1-2-2018'
},]
},{
name: 'psb04221 / Tippers 1-February-2018',
id: 'psb04221/Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-44',
id: '44',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'rvd910939 / Tippers 1-February-2018',
id: 'rvd910939/Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-21',
id: '21',
y: 1,
type_legend: 'green',
color:'green'
},{
name: '01-February-2018-25',
id: '25',
y: 1,
type_legend: 'yellow',
color:'yellow'
},{
name: '01-February-2018-27',
id: '27',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'rvd910939 / Trucks 1-February-2018',
id: 'rvd910939/Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-13',
id: '13',
y: 1,
type_legend: 'red',
color:'red'
},{
name: '01-February-2018-26',
id: '26',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'sks913031 / Trucks 1-February-2018',
id: 'sks913031/Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-22',
id: '22',
y: 1,
type_legend: 'yellow',
color:'yellow'
},{
name: '01-February-2018-23',
id: '23',
y: 1,
type_legend: 'green',
color:'green'
},]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
1st drilldown legend show date is correct
2nd drilldown I want to show legend users
3rd drilldown I want to show legend for color filter
Please help me to add legend for show legend filter by color Red , Green and Blue of 3rd drilldown like this image : 3rd Drilldown
I have resolved problem by answer of ppotaczek.
In your example, the third level of drilldown is one series, that is why the legend show only one item. If you want to have multiple legend items on drilldown, you have to have multiple series. You can use drilldown event and addSeriesAsDrilldown method, like in the example below to achieve needed result.
Live demo: http://jsfiddle.net/BlackLabel/amg8234t/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown
https://api.highcharts.com/highcharts/chart.events.drilldown
Best regards!
Thank you so much.
Below is the complete code and , i am unable to do the 2nd level drilldown of pie chats.
How to add multilevel drilldown series? First chat i have 2 sections of data (completed and Fail) , in second chat data will be the dynamic depending upon the selection of the first pie slice. same thing for third level chat as well.
var chartSeriesData = [];
var chartSeriesData1 =[];
var chartDrilldownData = [];
chartSeriesData = [{
name: "Completed",
y: 1,
color: "#1068C7",
drilldown: "Completed"
}, {
name: "Fail",
y: 2,
color: "#11A852",
drilldown: "Fail"
}];
chartSeriesData1 = [{
id: "Completed",
data: [{
name: 'CEVA',
y: 15,
drilldown: 'CEVA-COMPLETED'
},{
name: 'SYNCHRON',
y: 13,
drilldown: 'SYNCHRON-COMPLETED'
},{
name: 'GENCO',
y: 23,
drilldown: 'GENCO-COMPLETED'
}],
}, {
id:"Fail",
data: [{
name: 'CEVA',
y: 45,
drilldown: 'CEVA-FAIL'
},{
name: 'SYNCHRON',
y: 23,
drilldown: 'SYNCHRON-FAIL'
},{
name: 'GENCO',
y: 23,
drilldown: 'GENCO-FAIL'
}],
}];
chartDrilldownData = [
{
id:"CEVA-COMPLETED",
data: [{
name: 'BFC',
y: 19
},{
name: 'BMC',
y: 23
}],
},
{
id:"SYNCHRON-COMPLETED",
data: [{
name: 'qwsh',
y: 1
},{
name: 'adwa',
y: 1
}],
},
{
id:"GENCO-COMPLETED",
data: [{
name: 'qwsh',
y: 1
},{
name: 'adwa',
y: 1
}],
} ,
{ id:"CEVA-FAIL",
data: [{
name: 'BFC',
y: 19
},{
name: 'BMC',
y: 23
}],
},
{
id:"SYNCHRON-FAIL",
data: [{
name: 'qwsh',
y: 1
},{
name: 'adwa',
y: 1
}],
},
{
id:"GENCO-FAIL",
data: [{
name: 'qwsh',
y: 1
},{
name: 'adwa',
y: 1
}],
}
];
console.log('----------------');
console.log(chartSeriesData);
console.log('----------------');
console.log(chartSeriesData1);
console.log('----------------');
console.log(chartDrilldownData);
console.log('-------------------');
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2018'
},
subtitle: {
text: 'Click the slices to view versions. Source: statcounter.com'
},
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
select: function () {
var drilldown = this.drilldown;
console.log('drilldown'+drilldown);
// alert(this.options);
//console.log(this.options)
console.log(this.series.data);
}
}
},
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
},
drilldown:true
}
},
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: 'Status',
colorByPoint: true,
data: chartSeriesData
}],
drilldown:{
series: chartSeriesData1
}
});
You created chartDrilldownData but never use it in the chart parameters, so the second level never trigger on click.
Just remove this code :
];
chartDrilldownData = [
And the working Fiddle
I need to show on graph duration of periodic events. For example user with ID 1 is calling to user with ID 2 at 10:00 AM and they are speaking 5 minutes. Then he is calling him again at 2:00PM and they are speaking 2 minutes. So this events are happening periodically and I need to show them on the graph as horizontal bars. They should look something like that: User 1: [ 5min ][ 2min ][ ... ][ ... ]
I've almost achieved what I want except that I can't find the way to show time at X axis. The X axis should show time with 30 minutes interval.
Here is my configuration:
title: null,
chart: {
type: 'bar',
backgroundColor: '#F9F9F9',
plotBackgroundColor: '#F9F9F9',
borderColor: '#F9F9F9',
borderWidth: 1,
animation: 0
},
legend: {
enabled: false
},
series: [
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'blue'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'blue'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] }
],
xAxis: {
categories: ['User 1']
},
yAxis: {
allowDecimals: false,
min: 0,
type: '',
title: {
text: 'Time'
},
stackLabels: {
enabled: false
}
},
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
enabled: false
},
borderWidth: 0
}
Here is demonstration of concept: http://jsfiddle.net/dimitrykislichenko/SjdR5/
I think you should be using columnrange series with axis type: 'datetime'. See: http://jsfiddle.net/SjdR5/2/
Note requires change in series object:
series: [{
data: [{
x: 0,
low: Date.UTC(2013, 1, 1, 10, 53),
high: Date.UTC(2013, 1, 1, 10, 59),
color: 'red'
},{
x: 0,
low: Date.UTC(2013, 1, 1, 12, 12),
high: Date.UTC(2013, 1, 1, 12, 17),
color: 'red'
},{
x: 0,
low: Date.UTC(2013, 1, 1, 16, 35),
high: Date.UTC(2013, 1, 1, 16, 55),
color: 'red'
}]
}],
x:0 -it's category index ( 0 = User 1 )
low and high is like from and to for time
color is just color of bar ;)
I have the following data structure:
{
"origin": "category2",
"value": 30,
"key": "name1"
},
{
"origin": "category1",
"value": 18,
"key": "name2"
},
{
"origin": "category2",
"value": 15,
"key": "name3"
},
{
"origin": "category1",
"value": 11,
"key": "name4"
},
Now I'm looking for a way to draw this data as bar chart where the key is used as legend for the axis and the origin is used for the color of the bar and the chart legend, so I have a chart with 4 bars with 2 different colors and a chart legend that shows category1 and category2.
I wonder if there is better way then have 2 series looking like this:
{name: 'category1', data: [0,18,0,11]}
{name: 'category2', data: [30,0,15,0]}
and the categories:
['name1','name2','name3','name4' ]
Apart of your solution, you can use single serie and define color for point like:
series: [{
name: 'Year 1800',
data: [107, 31, {
y: 635,
color: 'red'
}, {
y: 635,
color: 'red'
}]
}]
http://jsfiddle.net/RBSpe/
Other option is to manage each bar as unique and have more control over each bar configuration.
Template.body.helpers({
createChart: function () {
// Prepare some data:
category1= [{
y: 18,
name: "category1"
}],
category2 = [{
y: 30,
name: "category2"
}],
category3 = [{
y: 40,
name: "category3"
}],
category4 = [{
y: 5,
name: "category4"
}];
// Use Meteor.defer() to create chart after DOM is ready:
Meteor.defer(function() {
// Create standard Highcharts chart with options:
Highcharts.chart('Charts', {
chart: {
renderTo: 'container',
type: 'column',
},
series: [{
type: 'column',
margin: 75,
data: category1,
name: "category1Name",
color: '#FF6600'
}, {
type: 'column',
margin: 75,
data: category2,
name: "category2Name",
color: '#FF6600'
}, {
type: 'column',
margin: 75,
data: category3,
name: "category3Name",
color: '#ffff00'
}, {
type: 'column',
margin: 75,
data: category4,
name: "category4Name",
color: '#ffff00'
}]
});
});