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',
}
};

pdfMake / html2canvas is way too big for PDF output, how to resize?

I'm trying to convert a section of my HTML page into a PDF file. I don't want the whole page because it contains buttons, etc. that aren't necessary.
So I created a div that has a height 0 and adding the content I need to print into the underlying div then removed elements and printed. All my code is below. It works well but the pdf is WAY too zoomed in and I can't fix it. I've attached my code and resulting pdf output below. I've tried so many different settings. Does anyone have tips?
<div style="overflow: hidden; height: 0;">
<div id="mainClone"></div>
</div>
function printPDF()
{
html2canvas($('#mainClone'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
pageSize: {
width: 1000,
height: 'auto'
},
content: [{
image: data,
//width: width,
//height: height,
}],
pageSize: 'letter',
pageOrientation: 'landscape',
pageMargins: [ 5, 5, 5, 5 ],
};
pdfMake.createPdf(docDefinition).download("test.pdf");
}
});
}
$('#PrintPDF').click(function () {
$('#mainClone').html($('#main').html());
$('#mainClone').find(".calendar-prev").hide();
//remove more html elemnent we don't need
printPDF();
});

You can make it while still using jspdf, instead of creating an extra div, go with your default page and with any unnecessary element(which you do not want into your PDF) add this
data-html2canvas-ignore="true"
to each unnecessary element.
this will ignore that element and will not put into your generated PDF.

Change the scale from number to percentage - Gauge Chart

I am creating Gauge chart from the below java script. I am almost there, just want to convert the scales to percentages. Link to java script - http://spotfired.blogspot.com/2016/03/custom-gauge-from-calc-value-70.html
And the JS is below:--
custom gauge from calc value (7.0+)
html:
calculated value:
<span id=calcValue><SpotfireControl id="y0ursp07f1r3c41cV41u3" />
</span>
<HR>
<DIV style="WIDTH: 400px; HEIGHT: 320px" id=gauge></DIV>
js
resource=[
"//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js",
"//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"
]
//add scripts to head
$.getScript(resource[0],function(){
$.getScript(resource[1],init)
})
init = function(){
var g = new JustGage({
id: "gauge",
value: "22",
min: 0,
max: 100,
title: "Visitors"
});
//refresh gauge when calcvalue changes
$(calcValue).on('DOMSubtreeModified',function(){
g.refresh($(this).text())
})
}
Really appreciate your time and help!!
Best,
Keyur Parekh

Multiplication with Jquery Ui Slider

I am trying to build a ui slider similar to the one on this site: http://www.solarcity.com/
I want to be able to show the monthly value and then a yearly value next to it. ( I would assume multiplying the value of the monthly by 12 of course)
Once upon a time I had my slider working properly until I tried to multiply the monthly value by 12.
What did I do wrong?
(Sorry I am totally new to JavaScript)
Here is my Jsfiddle: http://jsfiddle.net/7qDyq/1/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<span class="slider-output" id="monthly_bill">0</span>/month or <span class="slider-output" id="yearly_bill">0</span>/year
<div id="bill_slider">
</div>
$(document).ready(function(){
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (monthly_bill * 12 )
$("#monthly_bill").text(tasks_time);
$("#monthly_bill").text(tasks_done);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function() {
update();
}
});
});
Eventually after I figure this out I am also wondering how to change the color of the slider and words after the slider hits a certain point. (If then statement?) Not sure how to implement...
Any help on this is greatly appreciated. Thanks!

Most of the issues in your original jsFiddle traced back to bad JS var names; here is how you would achieve the desired effect:
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (bill_slider * 12)
$("#monthly_bill").text(bill_slider);
$("#yearly_bill").text(yearly_bill);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function () {
update();
}
});
Working jsFiddle, forked from yours: http://jsfiddle.net/6Bprf/5/
If you update your question with a description & example of the color-coding you want to do, we can include that in our answers.

Add tip text dynamically to a slider

In my project, I am trying to add the tip text (config) dynamically to a slider. How to do that?
I need to add it dynamically because I am generating the array of variables in a "Controller", which holds the text for each value of the slider (for tip text).
var slider = Ext.getCmp('slider')
slider.setTipText(arrayOfVariables) //What should I do here instead?
There is no such method like setTipText in docs. What should I use then?
EDIT:
{
xtype:'slider',
animate: false,
//plugins: [Ext.create('App.view.SliderOverride')],
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 36/2, //must be current month
//increment: 10,
minValue: 1,
maxValue: 36,
useTips: true,
tipText: function(thumb){
alert("hello");
App.getController('TaskController')._arrMonthView[thumb.value].month;
},
},

tipText requires a function config so you can add a function that will use your variables from controller;
Ext.create('Ext.slider.Multi', {
....
tipText: function(){
return App.getController('your controller').yourVariable
},
.....
});
This is added on the creation of the slider so you don't need to modify it , just your variables in controller. So you don't need to re set the tip text function.

I solved this issue by using getText method of Ext.slider.Tip.
Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider Thumb that the Tip is attached to. Override to customize.
For example in which situation it can be used, you have a look at this link