Develop Reference

Plotly.js Heatmap Performance

I am using Plotly.js to show a heatmap of electrochemical data. It works really well, however, sometimes the data matrix can be a bit large (3000x4000). I paste the code here if it is of any help, as it is a method of a class you will see many references to "this" to get the array, name strings, etc.
My main problem is that for large data arrays, the heatmap takes a lot to render when I load the data or press a button to replot, for example, after filtering. It usually takes approximately between 1500 - 2000 ms. By looking into Plotly.js issues, I have tried several things which did not work, or made it worse:
Use 'heatmapgl' as plot type instead of 'heatmap' when the data goes beyond a million points.
Use plotly.react() instead of plotly.newPlot(). It did not change although in the plotly.js reference they claim it is more efficient when replotting in the same division.
Remove the axes and ticks.
I have also tried to use a canvas to show the heatmap as an image.. but the fact that I need to cast the array to 0-255 and therefore lose resolution in the range of values is also not great for this particular application.
I was wondering if anyone new any other way to improve the performance of heatmaps in plotly.js or if they know of any other workaround. Thanks in advance!
//Function to plot the main color plot.
var graph_data = [{
z:this.current.array,
x:this.cycling_time.array,
type:this.plot_type,
colorscale:this.color_palette,
colorbar: {len:0.5, xpad:30, title:this.current.name+' ('+this.current.units+')'},
zsmooth: false
}];
this.plot_layout = this.plot_settings.plot_layout;
this.plot_layout.title.text = "<b>"+this.name_of_file+"</b>";
this.plot_layout.xaxis = {
title:this.cycling_time.name+' ('+this.cycling_time.units+')'
};
this.plot_layout.yaxis = {
title:'Samples'
};
console.time('plot');
Plotly.newPlot(div, graph_data, this.plot_layout, this.plot_settings.plot_configuration);
_(div).on('plotly_click', function(data){main_graph_clicked(data)});
console.timeEnd('plot');
Edit
The plot settings and configurations are below. I keep them separated because I use them in several different plots and it saves space to save them in the class.
this.plot_configuration = {
showEditInChartStudio: true,
plotlyServerURL: "https://chart-studio.plotly.com",
displayModeBar: true,
displaylogo: false,
responsive: true,
toImageButtonOptions: {
format: 'svg',
filename: 'plot',
height: 600,
width: 800,
scale: 1
}};
this.plot_layout = {
autosize: true,
title: {
text: '<b> Blank </b>',
font: {
size: 20,
family:'Arial'
},
x: 0.05,
y: 1.2,
xanchor: 'left',
yanchor: 'bottom',
}
};

Incorrect data point value in highcharts navigator series when extending min and max date

I recently updated highstock in which I used a chart that displayed values with an "extended range", i.e. where the min and max date is set outside the boundaries of the chart data.
After the update (which fixed some other bugs) I noticed that the last data point in the navigator series at the bottom is not correct according to the data in the actual series. As can be seen, there's an additional data point at the far right in the bottom that doesn't exist in the actual series.
This can be viewed at http://jsfiddle.net/ab96pnjf/ as well
The code that creates the chart is the following
$(function () {
var fromdate = new Date('2011-04-01');
var todate = new Date('2012-05-21');
var series = [{
color: 'red',
data: MSFT,
name: 'MSFT'
}];
$('#container').highcharts('StockChart', {
navigator: {
series: {
data: series[0].data,
color: '#4572A7',
fillOpacity: 0.05
}
},
xAxis: {
ordinal: false,
min: fromdate.getTime(),
max: todate.getTime()
},
legend: {
enabled: true
},
series: series
});
});
Now, if I change the navigator.series property to
navigator: {
series: series
}
the navigator chart is correct, as in the values are cut off at the right when there is no more data available. This is what I want; the only problem is that the color is the same as the series, and I want it to use my custom color, as in the first example.
So how do I configure HighStock to cut off the last value in the navigator chart while at the same time being able to use a custom color for the series?

Hm, well I have a "quick fix" to this problem, as I am not sure how I would configure highcharts to do it for me.
Using jQuery I can extract the line in the navigator, since highcharts (at least) applies a class to the series. It sets the class name for all series including the one in the "main area", but the last one is the navigator series it seems, or every odd series if there is more than one highcharts chart in the document.
$(function () {
// ... as previous
$('#container').highcharts('StockChart', {
navigator: {
series: series
},
// ... as previous
});
// added code to apply a custom style to the navigator line diagram
var navseries = $('.highcharts-series:last').children();
// can be undefined if the series has no data points
if (navseries) {
navseries.css('stroke', '#4572A7');
navseries.css('strokeWidth', 1);
navseries.css('fillOpacity', 0.05);
}
});

Highcharts markers on line only where there are labels

I have successfully labeled a time series for a subset of the points (where the time is either 3am or 3pm), but now to make the chart look cleaner I would like to only have the markers show up at the points where there are labels. Anyone out there know how to accomplish this? I am trying to add a graphic.destroy command in the label but I can't seem to get it to work.
js fiddle: http://jsfiddle.net/abbike18/z2k8h/1/
dataLabels: {
enabled: true,
y: -10,
formatter: function() {
if(Highcharts.dateFormat('%l',this.x) == '3')
{return Highcharts.numberFormat(this.y, 0, '.');}
//else{data.graphic.destroy();}
}
}

You can use this.point.destroy() function
http://jsfiddle.net/z2k8h/2/

google-graph axis formatting

I am using google charts and want to place the x and y axes directly inside the graph, like this:
BCG-Matrix
putting the axis into the center is possible with
hAxis: { baseline: 50 }
the axis title is however still at the bottom/side of the graph, even with
textposition: 'in'
I'd also appreciate nicer axes (with arrowheads etc.), and nicer bubble shapes! There is only
bubble: { textStyle: { fontSize: 11 }, opacity: 0.8, stroke: '#ccc' }
I want to format the edge of the bubble, and move the bubble title outside of the bubble

Graph showing value even if the value is specified to 0 using flot

This is my fiddle code http://jsfiddle.net/coderslay/WnC9B/44/
It is successfully plotting the graph. The problem which i am facing is that it is showing the value of two(one of the legends in the graph) below the red line even if i specify it to zero. Why is this happeneing?

Under the bars option, set the lineWidth to 0:
bars : {
fill : 1,
show: true,
barWidth: 0.7,
lineWidth: 0
}