In my HighCharts implementation I'm dynamically changing the data of all series of the chart. This all works as expected, but the legend gets refreshed each time aswell causing the filtered legend to become unfiltered.
Let me explain with the following example.
If you look at this sample by HighCharts themselves you will see the legend showing 'John', 'Jane' and 'Joe' : http://www.highcharts.com/demo/column-stacked
If you click on John you'll only see the series of Jane and Joe. If you'd now refresh the underlieing series the legend will refresh and John his data will be visible again.
I need to prevent this from happening. Anybody got an idea on how I could do this?
FYI; I'm updating the data like this:
function updateSeries(data, chart, vm) {
for (var i = 0, len = chart.series.length; i < len; i++) {
chart.series[0].remove();
}
var series = calculateSeries(data, vm);
_.each(series, function (serie) {
chart.addSeries(serie, false);
});
chart.redraw();
}
I'm aware that I'm actually removing and re-adding the series, but that's because I'm unsure of how to do this otherwise.
Related
I have seen similar questions just like these (even with similar title) but none of them provide the answer I need.
I have a bar-negative-stack chart with drilldown.
In order to keep the Y-axis centered, I am calculating the maximum value among the series and setting it as the extremes of the chart.
The thing is I haven't find a good place to put this logic. I have tried putting it on redraw or render events but, since I am changing the yAxis, this causes a stackoverflow.
What I have so far that is more or less working is having the drilldown event set up with a setTimeout to delay the calculation, otherwise it would get the values before the drilldown. I would need some event like drilldownFinish.
Here's a working fiddle with this drilldown logic (not on negative-bar-stack though): http://jsfiddle.net/6qpq78do/
Any ideas on how to do this without a setTimeout?
Thanks
Maximum callstack exceeded message is caused by setExtremes function. Its third argument is redraw - it's true by default: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
So setExtremes will call the redraw event again and the redraw event will call setExtremes and so on...
The solution here is to create a flag (redrawEnbaled) that is going to control the access to the logic placed in redrawEvent and prevent this infinite recursive loop:
var redrawEnabled = true;
(...)
events: {
redraw: function() {
if (redrawEnabled) {
redrawEnabled = false;
let values = [];
this.series.forEach(s => {
s.yData.forEach(v => values.push(Math.abs(v)));
});
let max = values.reduce((acc, val) => (acc > val) ? acc : val, 0);
this.yAxis[0].setExtremes(-max, max);
redrawEnabled = true;
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/zjuy21k5/
I'm using ChartJS to plot a dataset to a bar chart. When I hover over the bars the name of the series with values will appear, so far so good.
However in my application it's possible that I get back a single group (one serie) from my database call. When I hover over the single bar the name of the serie and value is missing.
Preferred output would be the same as image 1 with only the single serie displayed. How to achieve this?
code to watch for data and push to dataset for chart. No custom options are set.
$scope.$watch("obtainedVouchers|groupBy:'voucherTitle'", function(collection){
if (!_.isEmpty(collection)) {
$scope.voucherChart_data = [];
$scope.voucherChart_label = ["Ingeleverde vouchers"];
$scope.voucherChart_series = [];
$scope.voucherChart_colours = ["#43A7BF", "#5ADFFF", "#163840", "#2D6F7F", "#51C8E5"];
for (var key in collection) {
var x = collection[key].length;
$scope.voucherChart_series.push(key);
$scope.voucherChart_data.push([x]);
}
}
}, true);
Multiple serie chart
data collection
Single serie chart
data collection
I have added some function into my graph and all of them work
separately, but after i changed marker style and then change the line color the graph disappear.
the code looks like this:
function(chart){
$('#colorchange').click(function() {
chart.series[0].update({color:document.getElementById("selectcolor").value});
});
$('#stylechange').click(function() {
chart.series[0].update({dashStyle: document.getElementById("selectStyle").value});
});
$('#pointchange').click(function() {
var l = chart.series[0].points.length;
var p = chart.series[0].points;
for(var len = 0; len < l; len++) {
p[len].update({
marker: {
symbol: document.getElementById("selectpoint").value,
}
}, false);
}
});
}
I am not sure why it is happening but I have found a work-around and with it a possible reason :-)
I suppose that when you call p[len].update({...}) without specifying the x and y values these values get lost. Therefore when you are calling chart.series[0].update the points itself are erased. What makes me wonder is that the points are only erased after the update of the series and not after setting the new marker. Maybe highcharts has some sort of cache that is only rebuild when the series is updated.
A quick fix for your problem is to manually set the x and y properties to their old values when updating the points:
p[len].update({
x: p[len].x,
y: p[len].y,
marker: {
symbol: document.getElementById("selectpoint").value
}
}, false);
See http://jsfiddle.net/doc_snyder/2wwzgz0p/1/ for a working example. If you remove the lines where the x and y values are set the line disappears after setting the color, just like you experienced.
I am just starting out with Highstock and I want to provide our users with the option of toggling the connection of the null data points via a button. Here is how I have tried to solve it: jsFiddle
// create the chart
var chart = new Highcharts.StockChart({
[...]
plotOptions : {
series : {
connectNulls : false // default
}
},
[...]
});
// Toggle connect nulls
var connectNulls = true;
$('#connectNulls').click(function() {
chart.plotOptions.series.connectNulls = connectNulls;
connectNulls = !connectNulls;
});
But it has no impact on the graph. All the examples I've found so far concerning toggling on chart configuration are doing dynamic manipulation on the series via the update method, but for the connectNulls I guess this is not possible.
I can always repaint the graph from scratch but I want to avoid this if possible. Say if one user has zoomed into the graph, repainting would cause the zoom to be lost.
Any suggestions?
You can use series.update() and then modify this param.
http://jsfiddle.net/vsmn60gL/3/
I often have charts that require a design element like a curly brace to call attention to call attention to a range or comparison in a graph, such as the y-difference in two points at the end of a graph.
My first take is that this would be a job for Highcharts Renderer API. Load the graph, and run a callback that adds an image (or line, shape, whatever) via chart.renderer.image(...) or similar.
That's the approach I have started down, but I'm just missing how to get the coordinates for chart data points within the callback. Here's a working codepen of the code below. What doesn't work is that there's no logic to give it proper placement on the canvas (suppose I want the bracket to go from the final top point to the final bottom point)
$('#container').highcharts({
data: { table: document.getElementById('datatable') },
chart: { type: 'line' },
title: { text: 'Data extracted from a HTML table in the page'
}
}, function(chart){
var img = 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Curly_bracket_right.svg/30px-Curly_bracket_right.svg.png';
// How can I populate these values?
var x = 0; // should programmatically get x-position of last point
var y = 0; // should programmatically get y-position of last point
var h = 100; // should programmatically get distance between y-position of top and bottom points
var w = 50;
chart.renderer.image( img, x, y, w, h ).add();
});
Is there a straightforward way to populate those values? Or is there a better way to do this entirely?
to get the position you want you can use few methods provided by highcharts in their API.
methods like toPixels(), toValue() will help you to alter your required position as per the chart demogrphics.
please refer their api
toPixels() : http://api.highcharts.com/highcharts#Axis.toPixels()
toValue() : http://api.highcharts.com/highcharts#Axis.toValue()
hope using this will solve your requirement of positioning