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',
}
};
Related
I'm using Chart.js v1.0.1-beta.3. I'm creating an interactive bar chart where users can click on a bar to increase the value of that bar.
By default, the histogram begins with empty values. The y-axis in that case defaults to a [0,1] scale. When users start adding data to the histogram, the y-axis maximum changes to adjust, which causes a jarring shift in the appearance of the graph at low values.
I'd like to have the y-axis default to, say, a [0,10] scale even when no data is entered. This StackOverflow question is the most relevant info I can find on how to address problems like this; the best solution on that page is to use the 'suggestedMax' parameter in the chart options:
scales: {
yAxes: [{
ticks: {
suggestedMax : 10
}
}]
},
although this might apply only to v2+ of the library, it's hard to tell. In any event, this doesn't work, and the y-axis defaults to [1,0] when there's no data. I've also tried every combination of every other suggestion on that page, including
using scaleOverride : true, display : true, setting explicit min and max parameters within 'ticks', scaleBeginsAtZero : true, beginAtZero : true, and scaleStartValue : 0,
If I try to upgrade to the most current release, v2.7.3, the charts don't appear on the rendered page at all. I don't have the time or inclination to debug what's happening there, so I'm stuck with v1.0.1.
How do I have a bar chart default to a suggested maximum in this version? Is it even possible?
Looking through the documentation included with v1.0.1 (zip file), there doesn't appear to be a way to do this. I can't see any option to set the scale values.
In v2.7.3 this is quite simple. A working example is below. The chart starts empty, with a y-axis scale from 0-10. Clicking 'Add Series' adds a new bar with a value of 5. Clicking a bar increments value by 1.
let btn1 = document.getElementById('add'),
canvas = document.getElementById('chart'),
chart = new Chart(canvas, {
type: 'bar',
data: {
labels: [],
datasets: []
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
suggestedMax: 10
}
}]
}
}
});
canvas.addEventListener('click', function(e) {
let idx = chart.getDatasetAtEvent(e)[0]._datasetIndex;
chart.config.data.datasets[idx].data[0]++;
chart.update();
});
btn1.addEventListener('click', function() {
chart.config.data.datasets.push({
data: [5]
});
chart.update();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<button id="add">Add Series</button> Click a bar to increment its value by 1.
<canvas id="chart"></canvas>
By default, JSXGraph's board renders with a grid in the background. When I instantiate it with the option axis: false, the grid disappears, but so do the axis labels and tickmarks.
Messing with JXG.Options like this doesn't seem to do anything:
JXG.Options.grid.strokeColor = '#ff0000';
JXG.Options.grid.strokeOpacity = 0;
The grid board option doesn't actually turn off the grid, just makes it behave differently on zoom, noted here.
Basically, making the board like this turns off the axis ticks and the grid for the Y axis:
var board = JXG.JSXGraph.initBoard(id, {
axis: true,
defaultAxes: {
y: { ticks: { visible: false } }
}
});
And changing visible to true makes the grid and the ticks visible.
How do I turn off just the background grid, leaving the axis labels intact?
Alright, I figured this out by looking at options.js in jsxgraph. The main grid is actually referred to as "ticks", closely related to the ticks on the axis line. In fact, it's drawn with the same piece of code I'm guessing. There's minorHeight and majorHeight for the ticks, referring to either ticks on the axis line or ticks on the entire background. minorHeight is 10 by default, and majorHeight is -1, a special case that means draw on the whole board. The solution is to change majorHeight so it draws like the minor ticks, just a little differently for clarity:
var board = JXG.JSXGraph.initBoard(id, {
axis: true,
defaultAxes: {
y: { ticks: { visible: true, majorHeight: 5 } }
}
});
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);
}
});
I am trying to use the google-chart polymer element (http://googlewebcomponents.github.io/google-chart/components/google-chart/) to draw a Ligth ON/OFF chart.
This is what I get using a "area" chart.
However I want a graph where I can read the "state" of the light, hence a better representation would be use a step chart. This is my code that uses the "stepped-area" chart.
this.$.chart.type = "stepped-area";
this.$.chart.cols = [{label:"Date", type:"date"}, {label:"On/Off", type:"number"}];
this.$.chart.rows = chartData;
this.$.chart.options = { strictFirstColumnType: "false", backgroundColor: "transparent" };
this.$.chart.drawChart();
However when I am trying to use a date type as my first column I get a "Stepped area series with value domain axis is not supported.".
Is there another way to do that?
Maybe setting some other option (strictFirstColumnType: "false" is not working)?
Eventually my workaround was using string dates.
Here it follows the code:
this.graphs[tuple.uuid].cols = [{label:"Date", type:"string"}, {label: tuple.behavior, type:"number"}];
this.graphs[tuple.uuid].rows = [];
this.graphs[tuple.uuid].options = {
backgroundColor: "transparent",
hAxis: {
slantedText: true
},
vAxis: {
minValue:0,
maxValue:1,
gridlines:{count:2},
ticks: [{v:1.00, f:'ON'}, {v:0.00, f:'OFF'}]
}
};
this.graphs[tuple.uuid].type = "stepped-area";
This is my final result:
The date label is still not easy to read but the final result is not bad at all.
You could also use a timeline-chart, like in this fiddle:
https://jsfiddle.net/dx0Lw52b/
Situation:
I have a function that dumps input data into an HTML block element, eg:
function national(){
x=Number($('#nationalBudget').val());
a=x*2;
$('#one').text(a);}
Then it prints the input into any element with the id="one"
<span id="one"></span>
This is fine, but I would like to incorporate a jQuery Bargraph. The bargraph that I am using is fed by an array:
coolnessGraph = new Array(
[100000,'ROI w/ Local Spending'],
[200000,'ROI w/o Local Spending']
$("#ROIchart").jqBarGraph({
data: coolnessGraph, // array of data for your graph
title: false, // title of your graph, accept HTML
barSpace: 10, // this is default space between bars in pixels
width: 400, // default width of your graph
height: 200, //default height of your graph
color: '#F8981D', // if you don't send colors for your data this will be default bars color
colors: false, // array of colors that will be used for your bars and legends
lbl: '', // if there is no label in your array
sort: false, // sort your data before displaying graph, you can sort as 'asc' or 'desc'
position: 'bottom', // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type
prefix: '', // text that will be shown before every label
postfix: '', // text that will be shown after every label
animate: true, // if you don't need animated appearance change to false
speed: 2, // speed of animation in seconds
legendWidth: 100, // width of your legend box
legend: false, // if you want legend change to true
legends: false, // array for legend. for simple graph type legend will be extracted from labels if you don't set this
type: false, // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type
showValues: true, // you can use this for multi and stacked type and it will show values of every bar part
showValuesColor: '#fff' // color of font for values
});
Problem:
I would like to replace the hard numbers (e.g. 100000 & 200000) in the array with the output that is dumped into my HTML object. I've tried the following:
var TestVariable = <span id="one"></span>;
coolnessGraph = new Array(
[TestVariable,'ROI w/ Local Spending'],
and just about every other iteration of syntax I could think up to make the process work. I also tried waiting to fire the graph after the first calculation has been run.
Is there an error my logic?...syntax?...any help would be greatly be appreciated.
If I'm reading correctly, you only need to pass $('#one').text(), or a variation of that, into the array. Am I missing something?