HighCharts freezing when adding large number of Series - highcharts

Am trying to generate a scientific bubble chart and it is suppose to be presented as a dashboard. The chart is intended to reflect bubbles and these bubbles will be changing in size and location using an ajax call.
I was able to do must of that, but am facing a performance issue. The ajax is returning an average of 80 to 150 items each presented by a Series of type bubble.
As such, am faced with two problems
1) The browser freezes at every request, I tried to make the javascript sleep between each add operation but did not solve the problem.
2) After the first ajax call, other calls will need to alter existing Series of their facts has changes. How can I retrieve an existing Series and change its values in case it needs to be altered?
$(function () {
function addPoint(chart){
$.get("{{ main_site_url }}/dashboard/likelihood/ajax/",
function(data) {
$.each(data, function(k, dic) {
var newSeries = new Highcharts.Series();
newSeries.type = 'bubble';
newSeries.id = dic.id
newSeries.data = [[dic.id, dic.views, dic.likes] ];
setTimeout(function() {
chart.addSeries(newSeries);
}, 2000);
});
}, "jsonp"
);
}
$(document).ready(function() {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var chart = this;
setInterval(function() {
addPoint(chart)
}, 3000);
}
}
},
title: {
text: 'Likelihood bubbles'
}
});
});
});

Related

Drilldown event in Highcharts column chart

In this Highcharts column chart the user can drill down by clicking on the column.
This works fine, however all the data, including the data of the drilled column, needs to be available when the chart is firstly created.
What I need is to capture the drilldown event click and populate the chart with that information, sending the data only when the user clicked on a specific column. Is this possible?
Yes, it is possible and simple. You need to use drilldown event callback function, call API request in it and use addSeriesAsDrilldown method - as in the example below:
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
...
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function() {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e9m74kgp/
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown

How to programmatically set selection Highchats master-detail chart?

I have created my own master-detail chart following the Highcharts docs and this example: https://www.highcharts.com/demo/dynamic-master-detail
Eveything works fine but I would like to add a feature: When the chart is loaded the last 50 data points should automatically be selected in the master chart and thus shown in the detail chart.
I tried to manually trigger the selection event but it did not work out. Any idea how to solve this?
You can fire selection event in chart load event and set correct extremes:
chart: {
...
events: {
load: function() {
var points = this.series[0].points,
xAxis = this.xAxis[0];
Highcharts.fireEvent(this, 'selection', {
xAxis: [{
min: points[points.length - 51].x,
max: points[points.length - 1].x
}],
});
},
selection: function(event) {
...
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/xy8qug9h/
API: https://api.highcharts.com/highcharts/chart.events.load

Refresh highchart after hiding bar data

How do I hide the bar data by clicking the bar and refresh the chart? I would like to have almost the same functionality as clicking on the legend.
Jsfiddle: https://jsfiddle.net/Nadiyaka/005z7dut/1/
For example, if I click on 'Asia' bar, I want the data to become hidden and the chart to be reloaded to see other data bigger.
So far I'm able only to hide the data, but the chart isn't refreshing:
series: [{
data: [1052, 954, 4250, 740, 38],
events: {
click: function(e) {
var chart = $("#container").highcharts();
index = event.point.x;
chart.series[0].data[index].graphic.hide();
chart.series[0].data[index].dataLabel.hide();
}
}
}]
There is no option for hiding points (except the points in pie series), but you can achieve the same effect by setting the point's value to null.
events: {
click: function(e) {
var point = e.point;
point.series.chart.pointer.reset(false); // this is needed to prevent the tooltip from moving around
point.update({
y: null,
holdY: point.y // I preserve original value needed on showing
});
}
}
For showing the columns, attach events to labels
load: function() {
var chart = this,
points = this.series[0].data;
points.forEach(function(point) {
chart.xAxis[0].ticks[point.x].label.on('click', function() {
if (point.y === null) {
point.update({
y: point.holdY
});
}
});
});
}
example: https://jsfiddle.net/005z7dut/2/

Highcharts rangeSelector ytd

I have a highstock chart with navigator synced with 4 highcharts graphs. I'd like to initially display YTD on all 5 charts, but the following gives me an xaxis error. Looks like it needs to be set after all charts are rendered. I've tried several places to no avail.
rangeSelector: {
selected: 3
},
Any suggestions?
If it's not too much trouble,here's the site I'm working on. The code of 5 charts is too lengthy to display here. Click on any icon.
The problem is that setting rangeSelector.selected: 3 triggers your xAxis.events.setExtremes function, which refers to your other charts that have not yet been initialized, and it causes an error.
To fix this you could simply move your chart1 constructor to the end, and do the other charts first.
In short:
$('#container2').highcharts({
// ...
});
$('#container3').highcharts({
// ...
});
$('#container4').highcharts({
// ...
});
$('#container5').highcharts({
// ...
});
$('#container1').highcharts('StockChart', {
rangeSelector: {
selected: 3
},
xAxis: {
events: {
setExtremes: function (e) {
var thisMin = e.min,
thisMax = e.max,
chart2 = $('#container2').highcharts();
chart3 = $('#container3').highcharts();
chart4 = $('#container4').highcharts();
chart5 = $('#container5').highcharts();
chart2.xAxis[0].setExtremes(thisMin, thisMax);
chart3.xAxis[0].setExtremes(thisMin, thisMax);
chart4.xAxis[0].setExtremes(thisMin, thisMax);
chart5.xAxis[0].setExtremes(thisMin, thisMax);
}
}
},
// ...
});

individual point settings in a scatter/line plot

In a scatter HighCharts plot, I want to set some properties only for some data points of my series. Here is a toy example:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
type: 'line',
data: [[1,1],
{x:3,y:2,marker:{enabled:false}},
[4,1]]
}]
});
});
});
I need (in decreasing order of priority) the second point to NOT have:
the marker (already done in my code, working);
the tooltip (tried but without success, I don't know how to do it working)
the line coming from previous point (tried but without success, I don't know
how to do it working)
Here is a jfiddle version.
For your second point, improvised from a similar answer:
Disable tooltip on certain points in Highcharts
tooltip: {
formatter: function() {
if (this.point.x != 1) { //enable for each point except the second point
return this.x;
}
else return false;
}
}
for your third point you might try to use a trick. If you set the y value as null, that point won't be displayed in the line. So draw your line, and enter two data with null y values to create a lonely point on the chart.
Here is an example: http://jsfiddle.net/8U8nx/14/

Resources