I'm using highcharts and I have lots of series grouped.
ex :
A & B |
C & D |
E & F |
...
On the chart legend, I'm only displaying A, C , E ... and when the user click on one of them, it only hides A or C or E and the grouped serie is not hidden.
Is there a property that I missed?
With Series.linkedTo property you can link one series to another - so they will be hidden simultaneously.
series: [{
...
}, {
linkedTo: ':previous',
...
}]
Related
I'm attempting to create a column chart that can be updated by clicking on a button, so that users can track their progress through a quiz. I'm very close with this fiddle, but my logic is off, because although the column data increases after each click, the y axis is also adding the data from the previous clicks into the sum of the column data: eg. click on button A, column A receives 1 point, Click on button B, Column B receives one point, but adds on the column A point for a total of 2 in column B, rather than just getting one point.
https://jsfiddle.net/mrjarbenne/17en2sc8/
var chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['A', 'B', 'C']
},
series: [{
data: [0, 0, 0]
}]
});
// button handler
var y = 0;
$('#button').click(function () {
y += 1;
chart.series[0].data[0].update(y);
});
// button handler
var y = 0;
$('#button2').click(function () {
y += 1;
chart.series[0].data[1].update(y);
});
// button handler
var y = 0;
$('#button3').click(function () {
y += 1;
chart.series[0].data[2].update(y);
});
This other fiddle is another method I've been trying to work with, but I'm struggling to remove the Realtime functionality so it's just a stand-alone element (I don't want the chart to be updated by multi individuals in a session)
http://jsfiddle.net/realtimeframework/xdo4daju/
Thank you for any direction you can provide on where I'm going wrong.
i have a chart used grouped categories highcharts, i have succesfull make a charts but i got a bit problem.
example charts:Fiddle here
it is possible to remove space / or change space between column which have same parent, so it will be near each other ?
in that example :
apple, banana, orange = group as fruit
carrot, potato, tomato = group as vegetable
cod, salmon, tuna = group as fish
i wanted :
between apple, banana, orange the column is near
and between orange - carrot is still have space.
i have tried to change on style but i still can't figure it out.
thanks
You can use these options under plotOptions inside and verticalAlign to show lables at the bottom.
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: true,
verticalAlign: 'bottom',
formatter: function() {
return this.point.name;
}
},
}
},
I had to change the structure of the series to make it easy to display:
series: [{name:'Fruits',
data: [{y:4, name:'Apple'}, {y:14, name:'Banana'},{y:18, name:'Orange'}]
}, {name:'Vegetable',
data: [{y:5, name:'Carrot'}, {y:6, name:'Potato'}, {y:5, name:'Tomato'}]
}, {name:'Fish',
data: [{y:14, name:'Cod'}, {y:15, name:'Salmon'} ,{y:18, name:'Tuna'}]
}]
});
example jsfiddle
i have figure it out too with diffrent style [jsfiddle][1]
[1]: http://jsfiddle.net/rikad/gptrz8Lh/
read the comment in jsfiddle.
The space should not be there in rendered graph between blue one and green one in c1
http://www.jsfiddle.net/QnU9e/1/
In bar graph making 2 category and 3 series
series: [{
name: 'A',
data: [49.5, 71.5]
}, {
name: 'B',
data: [null, 78.8] // The space should not be there in rendered graph between blue one and green one in c1
}, {
name: 'c',
data: [30, 78.8]
}]
The only way I can find to do this is to control the bar spacing yourself by specifying X data values. Note, I set the pointPadding: 0 in the plotOptions so I could get total control.
series: [{
name: 'A',
data: [[0.075,49.5], [1,71.5]]
}, {
name: 'B',
data: [[0,null], [1.025,78.8]]// The space should not be there in rendered graph between blue one and green one in c1
}, {
name: 'c',
data: [[-0.075,30], [1.05,78.8]]
}]
Update fiddle.
Uforutnatley this options is not supported, but you can try to manipulate columns by translate() function which allows ot move SVG elements.
I have a scenario where a point does not render in zoomed-in mode. Wondering if it's a highchart bug or something I can do.
JSFiddle is here -- try zooming on the first point of series B (y value of 99.297). The chart zooms in but it seems like the focus is not in the right place
http://jsfiddle.net/HqMye/
Scatter chart with xy zoom; x axis is type datetime; series rendered in the scatterchart are as follows:
var zoomSeries = [{
name: "Series A",
data: [
[Date.parse("2013-05-16T11:01:25-04:00"), 99.75],
[Date.parse("2013-05-14T10:18:41-04:00"), 99.5]
]
}, {
name: "Series B",
data: [
[Date.parse("2013-05-16T10:58:34-04:00"), 99.489],
[Date.parse("2013-05-14T10:13:32-04:00"), 99.297]
]
}];
Your data should be sorted ascending by x.
Not sure if it is Highcharts bug.
You can fix this by adding min to yAxis. http://jsfiddle.net/yevkim/ujj2f/
for example:
yAxis: {
min:99.2
}
What is the best way to achieve a chart with multiple types when it should include a type that has the following kind of visual presentation.
| yellow |blue| gray | yellow | gray |
i.e. a type which is one dimensional (but visually has height), and the color indicates 'y' (which here consists of categories: yellow, blue, gray)
You should also be able to stack those:
| radical | senseless | high tension |
| yellow |blue| gray | yellow | gray |
I can achieve this with having a chart typed column with a series for each category:
http://jsfiddle.net/RCnYV/
But how can I also add another chart type above that, like:
yAxis (only for the line)
^ ___
|------- ___________________________ ____/
| \__________/ \/
| radical | senseless | high tension |
| yellow |blue| gray | yellow | gray |
-----------------------------------------------------------> xAxis (shared)
So the line series should be above (not hovering over) the others. Note that the xAxis is shared between all of the series, i.e. all of the series have exactly as many data points. It is just that some of the series are presented as type 'line', and others with the new type (that I don't know good name for, ribbon?).
Also what other ways are there to create a similar chart? One problem with the above is that I need to create one series for each catalog, that is 2 * series in total, and not just two as would be the case with basic chart.
Are you looking for something like this # http://jsfiddle.net/jugal/cABfL/ ?
You can stack the charts by specifying heights for your yAxis, and manipulating its top so that they stack one over the other
yAxis: [{
top: 300,
lineWidth: 2,
offset: 0,
height: 200,
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ": " + $wnd.Highcharts.numberFormat(this.y, 2);
}
}
},
{
height: 200,
lineWidth: 2,
offset: 0,
tooltip: {
enabled: true,
formatter: function() {
return this.value + 50;
}
}
}],
Similar stacking example is available # http://www.highcharts.com/stock/demo/candlestick-and-volume
EDIT
To answer to the second part of the question (Also what other ways are there to create a similar chart?). There isn't anything out of the box that highchart seems to bring to the table for such a visualization, so you would need to work yourself around the existing lines and columns to get this visualization.
This is how I went about it.
I tried using the stacked bar chart for each ribbon, hence would need 2 series, 1 for the line and 1 each for both the ribbons. But after giving it a try, turned out the bar chart is nothing but a rotated column chart (at least a sort of), it seems to have the vertical axis as the X and horizontal one as Y, hence it messes up any other chart, i.e. the line chart gets messed up as it wants the horizontal to be the X.
Basically using a bar chart didn't take me much far. I went ahead using the line chart (With a very thick line lineWidth:50) and drew a horizontal (Constant Y for each point) line chart with one series for each section of the ribbon, hence being able to give each section different color. Each ribbon would need a separate Y-axis, with different offset as mentioned above. Also removed all the tooltip, Y-axis labels and grid lines, to make it look as different from a line chart and more like the ribbon. Tooltip may be needed, but line charts give tooltip for points, in our case we want tooltip on section between two points, hence wrote a mouseOver event handler and calculated the length of the section in there. The only part that was hurting now was creating a series for each section of the ribbon, so went ahead and wrote the following utility function that accepted a list of values, basically the x intercepts for each section (you can improvise it to take section length instead) and returned an array of series.
// usage: createSeries([0, 3, 4, 6], 1)
// Creates 4 series and assigns them all to yAxis 1
// you can extend this to take colors etc too, as per requirement
function createSeries(data, yAxisIndex) {
var i;
var series = [];
for (i = 0; i < data.length - 1; i++) { // Node lenghth-1
var start = data[i];
var end = data[i + 1];
series.push({
yAxis: yAxisIndex,
animation: false,
stack: 0,
data: [[start, 0], [end, 0]],
lineWidth: 50,
marker: {
enabled: false
},
tooltip: {
pointFormat: function() {
return "";
}
},
events: {
mouseOver: function() {
alert(this.data[1].x - this.data[0].x);
}
},
showInLegend: false
});
}
return series;
}
All that was needed was to push these series into the existing series and then feed it to the highchart constructor.
Final jsFiddle: http://jsfiddle.net/jugal/cABfL/