I have a chart with a column-range as high & low dates & 2 scatter series with additional dates as points. If I only have 1 scatter series, everything works fine, but when I add the 2nd. scatter series it screws up the dates for the 1st. series. Also, if I remove the stacking: 'normal' then everything works fine.
Am I doing something wrong or is this a bug?
Here's my js-fiddle showing the issue.
{
type: 'scatter',
name: 'scatter 1',
color: 'red',
data: [new Date('2016-06-01').getTime(), new Date('2017-06-01').getTime(), new Date('2018-06-01').getTime()],
marker: { radius: 5 }
}, {
type: 'scatter',
name: 'scatter 2',
color: 'blue',
data: [new Date('2014-03-01').getTime(), new Date('2015-03-01').getTime(), new Date('2016-03-01').getTime()],
marker: { radius: 5 }
}
Put stacking: 'normal' within series instead of plotOptions .This is so because it is effecting scatter type
series: [
{
name: 'Office Manager',
data: [{y: 0, low: new Date('2014-01-01').getTime(), high: new Date('2015-01-01').getTime()},
{y: 0, low: new Date('2015-01-01').getTime(), high: new Date('2016-01-01').getTime()},
{y: 0, low: new Date('2016-01-01').getTime(), high: new Date('2017-01-01').getTime()}],
stacking: 'normal'
}, {
name: 'CAD',
data: [{y: 0, low: new Date('2015-01-01').getTime(), high: new Date('2016-01-01').getTime()},
{y: 0, low: new Date('2016-01-01').getTime(), high: new Date('2017-01-01').getTime()},
{y: 0, low: new Date('2017-01-01').getTime(), high: new Date('2018-01-01').getTime()}],
stacking: 'normal'
}, {
name: 'STUFF',
data: [{y: 0, low: new Date('2016-01-01').getTime(), high: new Date('2017-01-01').getTime()},
{y: 0, low: new Date('2017-01-01').getTime(), high: new Date('2018-01-01').getTime()},
{y: 0, low: new Date('2018-01-01').getTime(), high: new Date('2019-01-01').getTime()}],
stacking: 'normal'
},
{
type: 'scatter',
name: 'scatter 1',
color: 'red',
data: [new Date('2016-06-01').getTime(), new Date('2017-06-01').getTime(), new Date('2018-06-01').getTime()],
marker: { radius: 5 }
}, {
type: 'scatter',
name: 'scatter 2',
color: 'blue',
data: [new Date('2014-03-01').getTime(), new Date('2015-03-01').getTime(), new Date('2016-03-01').getTime()],
marker: { radius: 5 }
}
]
Fiddle
Related
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.
I'm trying to create a simple Highcharts bar graph with a single series and multiple labels in the legend. How is this done?
Here is an example:
$('#container').highcharts({
chart: {
type: 'bar',
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
labelFormatter: function() {
return this.name + " - <span class='total'>"+this.y+"</span>"
}
},
title: {
text: 'Simple Bar Graph'
},
xAxis: {
categories: ['First', 'Second', 'Third', 'Fourth', , 'Fifth'],
allowDecimals: false
},
yAxis: {
allowDecimals: false
},
series: [
{
data: [
{y: 6, name: 'First', color: 'blue'},
{y: 7, name: 'Second', color: 'green'},
{y: 9, name: 'Third', color: 'yellow'},
{y: 1, name: 'Fourth', color: 'orange'},
{y: 1, name: 'Fifth', color: 'red'}
]
}
],
});
Luckily, Highcharts is pretty flexible.
We can do some tricks (maybe hacks?) to achieve this kind of "non-convential" tasks.
What you could do in your case is create "fake" serieses, and use custom event handlers:
series: [
{
pointWidth:20,
color: colors[0],
showInLegend:false,
data: [
{y: 6, name: 'First', color: colors[0]},
{y: 7, name: 'Second', color: colors[1]},
{y: 9, name: 'Third', color: colors[2]},
{y: 1, name: 'Fourth', color: colors[3]},
{y: 1, name: 'Fifth', color: colors[4]}
]
},
{color: 'blue'},
{color: 'green'},
{color: 'yellow'},
{color: 'orange'},
{color: 'red'}
],
In order to format the legend labels we can use labelFormatter for the legend:
legend: {
labelFormatter: function(){
return names[this.index-1];
}
},
this will set the legend label to the name of the corresponding point.
And finally we need to handle the legend click, to imitate the "normal" behaviour:
plotOptions: {
series: {
events: {
legendItemClick: function (x) {
var i = this.index - 1;
var series = this.chart.series[0];
var point = series.points[i];
if(point.oldY == undefined)
point.oldY = point.y;
point.update({y: point.y != null ? null : point.oldY});
}
}
}
},
These are just examples, you can obviously improve this and adjust to your own need.
Good Luck!
http://jsfiddle.net/otm0oq2c/3/
A simpler way than the accepted answer is by setting the categories key as an array of 'labels' and the series.data as an array of 'values'.
Here is an example that uses a collection (Array of objects) or a flat object to populate a bar chart in Highcharts (jsfiddle):
The example assumes a an array of objects with keys name/value, or a simple object of key/value:
var chart = Highcharts.chart('container', {
title: {
text: 'Simple Bar'
},
chart: {type: 'bar'},
xAxis: {
// categories: Object.keys(obj)
// or
categories: collection.map(i => i.name)
},
series: [{
name: 'Usage',
colorByPoint: true,
// data: Object.values(obj)
// or:
data: collection.map(i => i.value)
}],
legend: false
});
I'm wondering if somebody has tried to add drilldowns to a column range chart.
This is an example of what I'm trying to do: http://jsfiddle.net/pawelk79/8jmV6/
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'History'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['Example 1','Example 2', 'Example 3'],
},
yAxis: {
type: 'datetime',
min: new Date('2007,01,01').getTime(),
max: new Date('2014,05,01').getTime(),
title: {
text: 'Year'
}
},
tooltip: true,
plotOptions: {
columnrange: {
dataLabels: {
enabled: false,
formatter: function () {
return this.y ;
}
}
}
},
legend: {
enabled:false
},
series: [{
name: 'Year',
data:
[
[Date.UTC(2007, 2, 2), Date.UTC(2009, 5, 10)],
[Date.UTC(2009, 6, 10), Date.UTC(2011, 9, 10)],
[Date.UTC(2011, 9, 25), Date.UTC(2014, 5, 1)]
]
}
]
});
});
Any advises welcome.
Thanks
P
This does actually work, you just need to be particularly careful about the formatting of both the main series and drilldown series:
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'datetime'
},
legend: {
enabled: false
},
series: [{
name: 'Yearly',
colorByPoint: true,
data: [{
name: 'Yearly1',
low: Date.UTC(2007, 2, 2),
high: Date.UTC(2009, 5, 10),
drilldown: 'monthly1'
}, {
name: 'Yearly2',
low: Date.UTC(2009, 6, 10),
high: Date.UTC(2011, 9, 10),
drilldown: 'monthly2'
}, {
name: 'Yearly3',
low: Date.UTC(2011, 9, 25),
high: Date.UTC(2014, 5, 1),
drilldown: 'monthly3'
}]
}],
drilldown: {
series: [{
id: 'monthly1',
data: [{
name: 'example1',
low: Date.UTC(2009, 6, 10),
high: Date.UTC(2009, 6, 11)
}, {
name: 'example2',
low: Date.UTC(2009, 6, 10),
high: Date.UTC(2009, 6, 15)
}]
}, {
id: 'monthly2',
data: [{
name: 'example1',
low: Date.UTC(2010, 5, 10),
high: Date.UTC(2010, 6, 11)
}, {
name: 'example2',
low: Date.UTC(2010, 8, 10),
high: Date.UTC(2010, 8, 15)
}]
}, {
id: 'monthly3',
data: [{
name: 'example1',
low: Date.UTC(2012, 9, 10),
high: Date.UTC(2012, 9, 11)
}, {
name: 'example2',
low: Date.UTC(2012, 11, 10),
high: Date.UTC(2012, 11, 15)
}]
}]
}
});
Here is a working fiddle:
http://jsfiddle.net/ycn75svr
Formatting the dataLabels further would make sense (make the dates readable and return the actual series/drilldown names propwerly) but I haven't included that in this 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 am trying to apply a dotted line to the last column in my Highcharts line graph but I am unable to find a solution.
Here is my Highcharts code:
}
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { year: '%Y' },
tickInterval: Date.UTC(2012, 0, 1) - Date.UTC(2011, 0, 1),
title: {
text: 'Years', style: {color: '#333', fontFamily: 'sans-serif',}
}
}
yAxis: {
tickInterval: 5,
title: {
text: 'Points', style: {color: '#333', fontFamily: 'sans-serif'}
}
},
series: [{
showInLegend: false
color: '#000'
pointInterval: 31557600000
pointStart: Date.UTC(2005, 0, 1)
data: [data['points_2005'], data['points_2006'], data['points_2007'],
data['points_2008'], data['points_2009'], data['points_2010'], data['points_2011'],
data['points_2012'], data['points_2013']]
}]
I have tried to edit the 2013 data point with this code:
{data['points_2013'], dashStyle: 'shortdot'}
I have attached an image here to explain.
Thanks for your help!
EDIT: Code associated with comments below:
series: [
{
showInLegend: false
color: '#79C417'
pointInterval: 31557600000
pointStart: Date.UTC(2005, 0, 1)
pointEnd: Date.UTC(2012, 0, 1)
data: [searchData['points_2005'], searchData['points_2006'], searchData['points_2007'], searchData['points_2008'], searchData['points_2009'], searchData['points_2010'], searchData['points_2011'], searchData['points_2012']]
}
{
showInLegend: false
color: '#79C417'
pointInterval: 31557600000
pointStart: Date.UTC(2012, 0, 1)
pointEnd: Date.UTC(2013, 0, 1)
dashStyle: 'shortdot'
data: searchData['points_2013']
}