I am using highcharts and trying to populate multiple spline charts and toggle them on one charts.
i need to toggle series starting with chart2 on one series called chart2 and toggle series starting with chart1 on another series called chart1.
(please check out this fiddle to understand my point).
series: [{
type: 'spline',
name: 'chart1-1',
data: [3, 2, 1, 3, 4]
}, {
type: 'spline',
name: 'chart1-2',
data: [2, 3, 5, 7, 6]
}, {
type: 'spline',
name: 'chart1-2',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'chart2-1',
data: [4, 3, 5, 3, 2]
}, {
type: 'spline',
name: 'chart2-2',
data: [4, 3, 7, 2, 4]
}, {
type: 'spline',
name: 'chart2-3',
data: [3, 4, 7, 9, 6]
}],
how can i achieve this type of nested series toggle.
also check out this fiddle by using id and linkedTo property, but yet not fills requirement, because i need to combine both fiddles
series: [
{
id: 'Adwords',
type: 'spline',
name: 'Adwords',
},{
linkedTo: 'Adwords',
type: 'spline',
name: 'click',
data: [3, 2, 1, 3, 4]
},
{
linkedTo: 'Adwords',
type: 'spline',
name: 'Conver',
data: [2, 3, 5, 7, 6]
}, {
linkedTo: 'Adwords',
type: 'spline',
name: 'Impr',
data: [4, 3, 3, 9, 0]
},{
id: 'Bing',
type: 'spline',
name: 'Bing',
},{
linkedTo: 'Bing',
type: 'spline',
name: 'click',
data: [4, 3, 7, 2, 4]
},{
linkedTo: 'Bing',
type: 'spline',
name: 'Conver',
data: [4, 3, 5, 3, 2]
}, {
linkedTo: 'Bing',
type: 'spline',
name: 'Impr',
data: [3, 4, 7, 9, 6]
}]
thanks,
Related
i like to change the color of the bars in a stacked bar chart in highchart. I did not found the option where i can set the color foreach value. Joe should be red, Jane yellow, and John black.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
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]
}]
});
You can add the field color in your serie like:
series: [{
name: 'John',
color: '#ff8080',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
color: '#ffff00',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
color: '#000000',
data: [3, 4, 4, 2, 5]
}]
I have this advanced format:
series:[{
name: 'X',
type: 'column',
color: '#F4811F'
},{
name: 'Y',
type: 'column',
color: '#8EB950'
},{
name: 'Z',
type: 'column',
color: '#5C97D3'
}, {
name: 'AvgX',
type: 'line',
lineWidth: 4,
color: '#F4811F'
}, {
name: 'AvgY',
type: 'line',
lineWidth: 4,
color: '#8EB950'
}, {
name: 'AvgZ',
type: 'line',
lineWidth: 4,
color: '#5C97D3'
}]
The displayed chart is like this
How can I move AvgX to be on X and AvgZ to be on Z? Is there any option in Highchart to do that?
You can set right pointPlacement property for line series:
series: [{
name: 'X',
type: 'column',
color: '#F4811F',
data: [1, 1, 1]
}, {
name: 'Y',
type: 'column',
color: '#8EB950',
data: [1, 1, 1]
}, {
name: 'Z',
type: 'column',
color: '#5C97D3',
data: [1, 1, 1]
}, {
name: 'AvgX',
type: 'line',
lineWidth: 4,
pointPlacement: -0.2,
color: '#F4811F',
data: [2, 2, 2]
}, {
name: 'AvgY',
type: 'line',
lineWidth: 4,
color: '#8EB950',
data: [3, 3, 3]
}, {
name: 'AvgZ',
type: 'line',
lineWidth: 4,
pointPlacement: 0.2,
color: '#5C97D3',
data: [4, 4, 4]
}]
Live demo: http://jsfiddle.net/BlackLabel/m4y0xepo/
API: https://api.highcharts.com/highcharts/series.line.pointPlacement
I'm exploring Highcharts Api and used a stacked grouped bar charts. I came on an idea on changing the bar's look. I wanted it to be a pointed bar. Would it be possible? Thanks in advance!
Image below:
Changing column series shape might be difficult because the logic behind the column series is meant to work with rectangles, so it would require extend/change Highcharts internal code.
Instead, you can use a polygon series. With a little of configuration, you should be able to get the desired effect.
$(function() {
var labels = {
1: 'Apples',
4: 'Bananas'
};
Highcharts.chart('container', {
chart: {
type: 'polygon'
},
xAxis: [{
min: -0.5,
max: 6,
tickPositions: [0, 2, 3, 5],
labels: {
enabled: false
}
}, {
offset: 0,
linkedTo: 0,
tickPositions: [1, 4],
tickLength: 0,
labels: {
formatter: function () {
return labels[this.value];
}
}
}],
yAxis: {
min: 0,
max: 100
},
series: [{
name: 'series 1',
id: 's1',
colorIndex: 0,
data: [
[0, 0],
[0, 25],
[2, 20],
[2, 0]
]
}, {
name: 'series 1',
linkedTo: 's1',
colorIndex: 0,
data: [
[3, 0],
[3, 68],
[5, 63],
[5, 0]
]
}, {
colorIndex: 1,
id: 's2',
name: 'series 2',
data: [
[0, 25],
[0, 50],
[2, 45],
[2, 20]
]
}, {
name: 'series 2',
colorIndex: 1,
linkedTo: 's2',
data: [
[3, 68],
[3, 78],
[5, 73],
[5, 63]
]
}]
});
});
example: http://jsfiddle.net/stfhhn7y/
I would like to have a chart that represent data like this.
the series code would be something like this.
series: [{
name: 'Car 1',
data: [[1, 3], [4, 6], [7, 9]]
}, {
name: 'Car 2',
data: [[2, 3], [8, 10], [12, 18]]
}]
The first number on each array would be the starting point and the second the finishing point, and all arrays inside the main array would be on the same line.
An inverted columnrange chart should work. Your data isn't formatted in a way that would work with what you want, but transforming it isn't difficult. If you aren't stuck with the data format you showed, you just need a point object with x, low, and high.
For example:
{
x: 1,
low: 0,
high: 4
}
The following massages your current structure into the correct format:
$(function () {
var series = [{
name: 'Car 1',
data: [
[1, 3],
[4, 6],
[7, 9]
]
}, {
name: 'Car 2',
data: [
[2, 3],
[8, 10],
[12, 18]
]
}, {
name: 'Car 3',
data: [
[5, 9],
[1, 2]
]
}];
// massage the data
var data = [];
for(var i=0;i<series.length;i++) {
for(var j=0;j<series[i].data.length;j++) {
data.push({
x: j,
low: series[i].data[j][0],
high: series[i].data[j][1],
name: series[i].name
});
}
}
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: false
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Cars',
data: data
}]
});
});
http://jsfiddle.net/hqwrx4uy/
My series data and column chart look like this.
series data array values are the count which i need to display on the top of bars and series percentwithingroupvalues array data as in the fiddle should be my Y-axis data.
How to acheive this? Below is my data
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
/*Percentage is calculated as
Below values are random
(5)*100/(5+2+3)
*/
percentwithingroupvalues:[20,20,20,20,20]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1],
percentwithingroupvalues:[20,20,20,20,20]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
percentwithingroupvalues:[20,20,20,20,20]
}]
You need to set for each point object { }, instead of value y , see: http://jsfiddle.net/tRKad/3/
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {
return this.point.custom;
}
}
}
},
series: [{
name: 'John',
data: [{
custom: 5,
y: 20
}, {
custom: 3,
y: 15
}, {
custom: 4,
y: 11
}, {
custom: 22,
y: 7
}, {
custom: 33,
y: 2
}],
}]