For some time I had performance issues on my chart redraw
E.g. when I tried to redraw a single series on the chart with setData function - it redraw all the series
While my debug I found that there's some isDirty option on every axis / series, and if it's true on any - the whole chart would be redraw
Then I tried to find which of my elements have that option - and recognized that only one element have it:
yAxis.push({
max: 100,
min: 0,
visible: false
});
That's invisible axis that I use for some additional data on chart
The problem is exactly is on visible flag, when it true - everything working fast and fine
When it false - it takes a huge part of performace
I didn't find any mentioning about isDirty flag or visible: false that affects the performance
So is there any possibility to have a hidden axis w/o isDirty flag?
UPD
Simple fiddle to show it
https://jsfiddle.net/q6ntdxsy/8/
Change first axis visible flag in js section, and isDirty would be false
Internal 'isDirty' flag is set to false for each axis after axis render. Invisible axes are never rendered, so this flag will be set to false until the visible status changes. If one axis is dirty, all axes are redrawn.
You can deduce how it works from Highcharts source code: https://code.highcharts.com/highcharts.src.js
The solution could be experimental overwrite 'render' method to disable 'isDirty' flag for hidden axes.
// Axes
if (chart.hasCartesianSeries) {
each(axes, function(axis) {
if (axis.visible) {
axis.render();
// Disable 'isDirty' flag for invisible axes
} else {
axis.isDirty = false;
}
});
}
Live demo: https://jsfiddle.net/BlackLabel/yb4qf1s6/
Related
I have two charts that are synchronized. They have a margin left to make sure they are uniformly aligned. I have situations where I have multiple yAxis that can get turned on and they are on the right side opposed to the left. I attempted to use the same marginRight approach but when a second, third, or fourth axis gets added to the right it won't show up because there isn't enough room. So I am dealing with a dynamic amount of space over there on the right side. Highcharts handles the dynamic aspects when it's just one chart but I need my second chart to have the same margin even tho it doesn't have these additional yAxis. It's important that this time series data remains aligned in the two charts.
What is the approach to handle this?
UPDATE:
I created a simple jsFiddle here: http://jsfiddle.net/28hrffv7/
In my real-world example, I have showEmpty set to false and a series which is hidden by default.
{ opposite: true, title: { text: 'Random Text' }, showEmpty: false}
When they turn it own the series is rendered and the axis and title is added. This example shows that the first charts doesn't realize that the 3rd chart has 3 axis and as a result should have more marginleft
Update 2: Updated JS fiddle to show the more dynamic nature of the problem. When you toggle a series in the legend you can observe axes getting added and removed which is feature that is wanted. What is required is to keep all the charts synchronized in the width of the plotable area so they all line up correctly. http://jsfiddle.net/28hrffv7/3/
You could hard-code marginRight as well as marginLeft.
Demo #1: http://jsfiddle.net/28hrffv7/1/
Or check which marginRight is the highest and update all chart with the new setting. Relevant part of the code:
}, {
data: []
}]
}, function(chart){
if (chart.marginRight > topMarginRight) {
topMarginRight = chart.marginRight;
console.log(topMarginRight);
}
});
}); // end of the each function creating the charts
$.each(Highcharts.charts, function (i, chart) {
chart.margin[1] = topMarginRight;
chart.isDirtyBox = true;
chart.redraw(false);
})
Demo #2: http://jsfiddle.net/28hrffv7/4/ (for Highcharts < 5.0.0)
UPDATE:
With Highcharts 5+ the same is possible through a chart update.
$.each(Highcharts.charts, function (i, chart) {
chart.update({
chart: {
marginRight: topMarginRight
}
});
})
Demo #3: http://jsfiddle.net/28hrffv7/5/
In case of multiple series in each chart you could call a custom function for events like load, redraw, afterAnimate.
Demo #4: http://jsfiddle.net/acjaLxj1/1/
I am using Highstock charts with single series having flags on it where x-axis is 'datetime' type and y-axis is any numerical value. Now initially when chart loads I provide bit of padding on x-axis using attribute "max" so that end point doesn't touch the edge (which is working fine) but as I drag the navigator, the padding gets lost and the point touches the edge.
Is there any way of maintaining that padding on graph line even after I drag the navigator?
Any help would be greatly appreciated...
Unfortnately maxPadding works only for first time, as you ddescribed, but you can catch adterSetExtremes and then (setExtremes](http://api.highcharts.com/highstock#xAxis.events.setExtremes) to modify range on chart.
Thanks a lot Sebastian Bochan.....It worked for me!!!!. Just in case if anyone needs it. Here is what I have done
events: {
setExtremes: function(e) {
if (e.trigger === "navigator") {
var max=e.max+padding_value;
var x=this;
setTimeout(function(){
x.setExtremes(e.min,max);
}, 4);
}
}
},
Padding_value is a variable proving padding every time navigator is triggered
With Highcharts 3.0 it is possible to create charts with type 'bubble', whereas prior to 3.0 it was necessary to use a 'scatter' chart and modify marker size to make bubble charts. The nice thing about the old way is you had complete control over the visible pixel radius of each bubble--the new bubble charts automatically resize the bubbles so they are sized relative to each other. Is there any way to turn off this behavior or set bubble radius manually?
I am having a hard time seeing how a bubble chart, where the bubbles are not sized relative to each other, would be of any use.
You should be able to use the minSize and maxSize options, however, to control them the way that you need to:
bubble: {
minSize:2,
maxSize:50
}
{{edit:
I don't see them in the docs either, actually. But you can see an example here: http://jsfiddle.net/fXzke/13/ use either number as pixel value, or string with percent of chart height
}}
I found that adding an "empty" bubble to the series helps keep the size of all bubbles in the chart relative to each other:
name: '',
data: [{x:0,y:0,z:0}],
showInLegend: false,
color: 'transparent',
enableMouseTracking: false
Here's a sample on JSFiddle: http://jsfiddle.net/9bebT/2/. The legend, color, and mouse tracking variables each help keep the item in the series but otherwise invisible to the user. If you simply remove the empty bubble or set its visibility to "false," the chart doesn't register the empty bubble's z axis (diameter) as the minSize.
In chart, the x-axis labels are overlapping, when chart data is big.
I have used "step" property as follows :
xAxis: {
labels:{
step: (stepVal ? stepVal : 0),
},
}
I calculate the value of stepVal, depending upon data.
This resolves the issue of overlapping labels on x-axis.
But, when I zoom the chart, I want to see all the labels on x-axis.
How to get it?
In Highcharts 3.0 you can use
chart.xAxis[0].update({
labels: {
step: newValue
}
}
for updating step. Just setting new value in options for new chart won't work.
I believe what you are looking for is this..
http://api.highcharts.com/highcharts#chart.events.selection
You would need to change the xAxis labels steps in the event of a zoom action. You will need to determine how many labels you would want to show, based on how many labels are visible as a result of the zoom.
I have a chart that has a custom legend i.e. it isn't part of Highcharts at all, it's completely my own code, the Highcharts legend is disabled for this chart.
Is it possible to turn series data AND plot bands on/off in a Highcharts chart using the API?
I found an example that triggered the click event of a legend item to do this, but this obviously relies on a legend being present, so this is no use to me: http://birdchan.com/home/2013/01/23/trigger-a-click-event-on-a-legend-item-in-highchart/
I also tried to set the series data .visible property to false and then redraw the chart and although it sets the visible property just fine, it doesn't redraw the chart so nothing changes:
var chart = new Highcharts.Chart(myoptions);
$("#custom_legend_link").click(function (e) {
chart.series[0].visible = !chart.series[0].visible;
chart.redraw();
}
Here is a jsFiddle using the basic line demo showing my problem:
http://jsfiddle.net/gfyans/zsaV4/
Thanks,
Greg.
To toggle the series, use Series.setVisible(). When called without parameters, it toggles.
Plot bands are a bit different, since they don't have methods like hide(), show() or setVisible. To toggle a plot band, you need to remove it by Axis.removePlotBand() and add a new one with the same options by Axis.addPlotBand().