I am currently trying to plot the values of a thermographic (AMG8833) inside a heatmap using highcharts module. As the values update in real time, these values are being sent through a nodemcu board and received in the html file. It is very strange as when I try to plot the value by itself using: (this part of the code repeats for each pixel of the camera)
setInterval(function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var pixel_0 = parseFloat(this.responseText);
document.getElementById("pixel_0").innerHTML = pixel_0;
pixel_0.innerHTML = pixel_0;
}
};
xhttp.open("GET", "/pixels[0]", true);
xhttp.send();
}, 1000 );
and
<h3>"The value for pixel 0 is: " <span id="pixel_0"></span></h3>
It shows the value perfectly. The problem comes when I try to put this value inside the data for my heatmap:
$(function () {
$('#Thermographic_camera').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 8,
plotBorderColor: '#FFFFFF'
},
title: {
text: 'Thermographic camera'
},
xAxis: {
categories: ['', '', '', '', '', '', '', ''],
},
yAxis: {
categories: ['', '', '', '', '', '', '', ''],
title: null
},
colorAxis: {
//min: 0,
//minColor: '#FFFFFF',
//maxColor: Highcharts.getOptions().colors[8]
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a']
],
min: 20,
max: 40
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
series: [{
name: 'Value',
borderColor: 'white',
borderWidth: 1,
data: [[0, 0, pixel_0],
[0, 1, pixel_1],
[0, 2, pixel_2],
[0, 3, pixel_3],
[0, 4, pixel_4],
[0, 5, pixel_5],
[0, 6, pixel_6],
[0, 7, pixel_7],
[1, 0, pixel_8],
[1, 1, pixel_9],
[1, 2, pixel_10],
[1, 3, pixel_11],
[1, 4, pixel_12],
[1, 5, pixel_13],
[1, 6, pixel_14],
[1, 7, pixel_15],
[2, 0, pixel_16],
[2, 1, pixel_17],
[2, 2, pixel_18],
[2, 3, pixel_19],
[2, 4, pixel_20],
[2, 5, pixel_21],
[2, 6, pixel_22],
[2, 7, pixel_23],
[3, 0, pixel_24],
[3, 1, pixel_25],
[3, 2, pixel_26],
[3, 3, pixel_27],
[3, 4, pixel_28],
[3, 5, pixel_29],
[3, 6, pixel_30],
[3, 7, pixel_31],
[4, 0, pixel_32],
[4, 1, pixel_33],
[4, 2, pixel_34],
[4, 3, pixel_35],
[4, 4, pixel_36],
[4, 5, pixel_37],
[4, 6, pixel_38],
[4, 7, pixel_39],
[5, 0, pixel_40],
[5, 1, pixel_41],
[5, 2, pixel_42],
[5, 3, pixel_43],
[5, 4, pixel_44],
[5, 5, pixel_45],
[5, 6, pixel_46],
[5, 7, pixel_47],
[6, 0, pixel_48],
[6, 1, pixel_49],
[6, 2, pixel_50],
[6, 3, pixel_51],
[6, 4, pixel_52],
[6, 5, pixel_53],
[6, 6, pixel_54],
[6, 7, pixel_55],
[7, 0, pixel_56],
[7, 1, pixel_57],
[7, 2, pixel_58],
[7, 3, pixel_59],
[7, 4, pixel_60],
[7, 5, pixel_61],
[7, 6, pixel_62],
[7, 7, pixel_63],
],
dataLabels: {
enabled: false,
color: '#000000'
}
}]
});
});
When I do so, I obtain the answer in the heatmap that the variable i am trying to put inside the heatmap is an [object HTMLSpanElement] and it does not put the actual value of the variables of each pixel.
Any clue on what could I be doing wrong?
Thank you very much for the help
Related
Attached is an image of the problem I'm currently having.
Attached is an example of the issue manually created with JSFiddle
https://jsfiddle.net/ekjrLsz2/
My goal is to have each of the blocks be next to each other without all the space in-between like the default demos for the heatmap show.
I can get it to work correctly if the data is going 1 by 1, for example; 1,2,3,4,5,6
But if the data is going 5,10,15,20, etc... then you get what you see in my attached image.
So to be more clear the X direction is going 1 by 1 in my demo image and shows without spacing, the Y direction however has the large spacing since the data does not have numbers 21,22,23,24 or the space inbetween every 5 so to speak.
Below is the code I use to generate the chart.
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
Highcharts.chart('heatmap-container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Report Data'
},
xAxis: {
//categories: ['1%', '2%', '3%', '4%', '5%', '6%', '7%', '8%', '9%', '10%'],
title: {text:$('#x-values').val()},
//showEmpty:true,
},
yAxis: {
categories: ['5', '10', '15', '20', '25'],
title: {text:$('#y-values').val()},
reversed: false,
//visible: true,
//showEmpty:true,
},
colorAxis: {
max: goodColorVal,
min: badColorVal,
reversed: false,
tickInterval: 1,
//min: -150,
//minColor: '#FFFFFF',
//maxColor: '#00FF00',//Highcharts.getOptions().colors[4]
stops: [
[0.0,'#FF0000'],
[0.5,'#FFFFFF'],
[1.0,"#00FF00"]]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280,
reversed:true
},
tooltip: {
headerFormat: '',
pointFormat: `<b style="text-transform:capitalize;">${$("#x-values option:selected").text()}</b>:{point.x:,.2f} - <b style="text-transform:capitalize;">${$("#y-values option:selected").text()}</b>:{point.y:,.2f} - <b style="text-transform:capitalize;">${$("#z-values option:selected").text()}</b>:{point.value:,.2f}`
// formatter: function () {
// return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
// this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
// }
},
series: [{
name: 'Report Data For Input 1',
borderWidth: 1,
//data: [[0, 0, 10], [0, 1, 19], [0, 2, 9], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
data: arraydata, //[[0,0,-87],[1,0,22],[2,0,33],[3,0,55]],
dataLabels: {
enabled: false,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
I have tried pointInterval and tickInterval with no luck so far.
The simplest way to have your points next to each other (without any spaces) is to give them x attributes without skipping any number, e.g 1,2,3,4...
Why don't you try to do it this way?
Demo:
https://jsfiddle.net/BlackLabel/39vx468s/
To skip the empty spaces between points you can use breaks functionality.
API references:
https://api.highcharts.com/highcharts/xAxis.breaks
Demo:
https://jsfiddle.net/BlackLabel/et4kryvz/
xAxis: {
breaks: [{
from: 0.5,
to: 1.5,
breakSize: 0
}]
}
There is also another solution, which uses colsize and rowsize properties. Thanks to that you can avoid using the breaks altogether this way and it even works with floating-point data.
Demo: https://jsfiddle.net/87tL3ogh/1/
I want to control the legends of different traces all at once for particular range lets say x=0 to x=5. How can we do it?
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
type: 'scatter'
};
var trace3 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [5, 7, 3, 2, 8, 6, 1, 9, 3],
type: 'scatter'
};
var data = [trace1, trace2, trace3];
var layout = {showlegend: true,
legend: {"orientation": "h"}};
Plotly.newPlot('myDiv', data, layout);
For example, when we click a legend, the encircled portion should get hid.
Sample code: Codepen_Sample
Update 2: what if trace(curve) is defined by set of different sub-traces whose ranges of the legends to be controlled are different but trace[name] are same for all the curves. For e.g this is the pseudo code:
for(let i=0; i<5; i++){
initialise trace1;
trace2;
trace3;
}
You can break up each of your three traces into starting and ending segments, then assign the starting segments the same name, same legendgroup, and only display one of these in the legend using the showlegend attribute.
Since plotly.js will make each trace a new color by default, you probably want to make the starting and ending segments of each trace to be the same color. Fixing the xaxis range will avoid having the entire plot resize when you toggle the legend entry.
Here is the javascript and codepen sample:
var trace1_start = {
x: [0, 1, 2, 3, 4, 5],
y: [0, 3, 6, 4, 5, 2],
type: 'scatter',
marker: {color: 'orange'},
name: 'start',
showlegend: true,
legendgroup: 'start'
};
var trace1_end = {
x: [5, 6, 7, 8],
y: [2, 3, 5, 4],
type: 'scatter',
marker: {color: 'orange'},
name: 'trace1',
};
var trace2_start = {
x: [0, 1, 2, 3, 4, 5],
y: [0, 4, 7, 8, 3, 6],
marker: {color: 'steelblue'},
type: 'scatter',
name: 'start',
showlegend: false,
legendgroup: 'start'
};
var trace2_end = {
x: [5, 6, 7, 8],
y: [6, 3, 3, 4],
type: 'scatter',
marker: {color: 'steelblue'}
};
var trace3_start = {
x: [0, 1, 2, 3, 4, 5],
y: [5, 7, 3, 2, 8, 6],
type: 'scatter',
marker: {color: 'forestgreen'},
name: 'start',
showlegend: false,
legendgroup: 'start'
};
var trace3_end = {
x: [5, 6, 7, 8],
y: [6, 1, 9, 3],
type: 'scatter',
marker: {color: 'forestgreen'}
};
var data = [trace1_start, trace1_end, trace2_start, trace2_end, trace3_start, trace3_end];
var layout = {showlegend: true,
legend: {"orientation": "h"}, xaxis: {"range": [0,8]}};
Plotly.newPlot('myDiv', data, layout);
I've a heat map using Highcharts where I'm facing some issues with text clippings.
When I add a label on the colorAxis the text gets clipped:
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0],
labels: {
format: '{value} test test test'
},
}
I've only added the colorAxis.labels.format property.
See my example here:
http://jsfiddle.net/dennismadsen/7sp8ddpq/1/
It's based/forked on this official Highchart sample:
http://jsfiddle.net/highcharts/4aqhB/
HighCharts does have its quirks in the legend layout. You have to explicitly set the width, i.e.
legend: {
...
width: 140,
...
},
Found a way to make it dynamic, based on a post by TorsteinHonsi on GitHub. The code basically measures the width of the label and redraws the chart. See if it suits your needs.
$(function () {
var leg = 'Whatever';
var aChart = new Highcharts.Chart({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40,
renderTo: 'container'
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0],
labels: {
format: '{value} ' + leg,
style: {
textOverflow: "clip",
overflow: "visible",
whiteSpace: "nowrap"
}
},
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: 'none'
}
}
}]
});
Highcharts.Legend.prototype.update = function (options) {
this.options = Highcharts.merge(this.options, options);
this.chart.isDirtyLegend = true;
this.chart.isDirtyBox = true;
this.chart.redraw();
};
aChart.legend.update({
width: 50 + $('.highcharts-axis-labels tspan').outerWidth()
});
});
I am working with high charts, I have a set of controls on a web page that allows the user to select months and locations. The issue is if they select a location that has no data. So lets say they select January and Hawaii but there is no data for Hawaii in January. Nothing will be displayed at all, but I would like the axis to appear along with the labels.
NOTE: I am trying to create a heatmap so I don't want to see the minimun color when there is no data.
A value of null seems to work. You can change your tooltip to not display if the value is null too: http://jsfiddle.net/SheldonNeilson/95um4x0q/1/
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: Highcharts.getOptions().colors[0],
maxColor: '#FFFFFF'
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
if(this.point.value == null){
return 'No data' ;
}else{
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, null], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
});
I don't really know how to do this.
I need to change background color of this highcharts chart:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/polar-spider/
But I don't seem to be able to do so - there doesn't seem to be any clear place to put the background color setting?
I've tried to write many different values in this section:
chart: {
polar: true,
type: 'line'
},
But it didn't do anything ( it occasionally broke this script ).
Do I need to change it somewhere in the included .js files? Or can it be done from the level of this loaded script?
JS is really confusing. Can anyone help me?
Take a look at the Highcharts API here: https://api.highcharts.com/highcharts/chart.backgroundColor and you will see it's a property of the chart object that can take a solid color:
{
chart: {
backgroundColor: '#FCFFC5',
polar: true,
type: 'line'
}
}
Or Gradiant:
{
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
},
polar: true,
type: 'line'
}
}
There is a backgroundColor tag you can use: (http://jsfiddle.net/aeP4E/)
chart: {
polar: true,
type: 'line',
backgroundColor:'blue'
},
That's you want
`
chart: {
polar: true,
type: 'line',
backgroundColor:'rgba(255, 255, 255, 0.1)'
}
`
Demo
You can data: [[0, 0, true], you can hide value by 'false' and you can set your gradient
by
colorAxis: {
min: 0,
stops: [
[0, '#5DBA76'],
[0.4, '#ffff00'],
[0.8, '#F30000']
],
minColor: '#ff0000',
maxColor: '#ffff00'
},
Thanks :)
you can hide value by 'false'
data: [[0, 0, false], [0, 1, 2], [0, 2, 3], [0, 3, 4], [0, 4, 5], [1, 0, 2], [1, 1, 4], [1, 2, 6], [1, 3, 8], [1, 4, 10], [2, 0, 3], [2, 1, 6], [2, 2, 9], [2, 3, 12], [2, 4, 15], [3, 0, 4], [3, 1, 8], [3, 2,12], [3, 3, 16], [3, 4, 20], [4, 0, 5], [4, 1, 10], [4, 2, 15], [4, 3, 20], [4, 4, 25]
http://jsfiddle.net/3527r4ty/1/