I am trying to plot the heatmap using 'heatmap js' library .
For some value of inputs if the min value is 0 and max value is 1 then whole heatmap will be red instead of plotting actual values.
It works fine if the max value is other than 1 (ex. min: 0, max 2 or min:0 , max: 3) but only for this case the heatmap fails to map the data.
var data = null;
/* this set of data works fine though */
values = [{
"uid": "1",
"x": 100,
"y": 200,
"value": 0
},
{
"uid": "2",
"x": 100,
"y": 220,
"value": 0
},
{
"uid": "22",
"x": 100,
"y": 240,
"value": 0
},
{
"uid": "30",
"x": 100,
"y": 260,
"value": 0
},
{
"uid": "39",
"x": 100,
"y": 280,
"value": 0
},
{
"uid": "70",
"x": 100,
"y": 300,
"value": 1
},
{
"uid": "75",
"x": 120,
"y": 200,
"value": 0
},
{
"uid": "84",
"x": 140,
"y": 200,
"value": 1
},
{
"uid": "85",
"x": 160,
"y": 200,
"value": 1
},
{
"uid": "104",
"x": 180,
"y": 200,
"value": 0
},
{
"uid": "105",
"x": 200,
"y": 200,
"value": 0
}
];
var heatmap = h337.create({
container: $("#testcanvas").get(0)
});
data = {
max: 1,
min: 0,
data: values
}
heatmap.setData(data);
heatmap.repaint();
#testcanvas {
width: 600px;
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<div id="testcanvas"></div>
If I understand correctly your problem then I guess Script understand 0 = false and 1 = true so you need to pass 0 as "0" and 1 as "1"
var data = null;
/* this set of data works fine though */
values = [{
"uid": "1",
"x": 100,
"y": 200,
"value": "0"
},
{
"uid": "2",
"x": 100,
"y": 220,
"value": "0"
},
{
"uid": "22",
"x": 100,
"y": 240,
"value": "0"
},
{
"uid": "30",
"x": 100,
"y": 260,
"value": "0"
},
{
"uid": "39",
"x": 100,
"y": 280,
"value": "0"
},
{
"uid": "70",
"x": 100,
"y": 300,
"value": "1"
},
{
"uid": "75",
"x": 120,
"y": 200,
"value": "0"
},
{
"uid": "84",
"x": 140,
"y": 200,
"value": "1"
},
{
"uid": "85",
"x": 160,
"y": 200,
"value": "1"
},
{
"uid": "104",
"x": 180,
"y": 200,
"value": "0"
},
{
"uid": "105",
"x": 200,
"y": 200,
"value": "0"
}
];
var heatmap = h337.create({
container: $("#testcanvas").get(0)
});
data = {
max: "1",
min: "0",
data: values
}
heatmap.setData(data);
heatmap.repaint();
#testcanvas {
width: 600px;
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<div id="testcanvas"></div>
Related
In short, I have events that have data (y) and timestamp (t) and I want to show them on the chart.
Currently, if I have three events:
10:00 AM: 42
11:00 AM: 43
11:20 AM: 44
The chart won't show there is a gap (I refer to the gap of one hour) of data but will simply connect them.
For example, there is a gap between 10PM and 5AM in the following example.
Is there an option to automatically display 0 values if the gap between two points is more than X seconds?
var ctx = document.getElementById('chart').getContext("2d");
var data = [
{
"y": "0.58",
"t": 1565665819571
},
{
"y": "0.84",
"t": 1565665218436
},
{
"y": "1.69",
"t": 1565664625228
},
{
"y": "0.24",
"t": 1565640019245
},
{
"y": "0.24",
"t": 1565639418937
},
{
"y": "0.25",
"t": 1565638819713
},
{
"y": "0.25",
"t": 1565638219190
},
{
"y": "0.23",
"t": 1565637619961
},
{
"y": "0.24",
"t": 1565637018574
},
{
"y": "0.24",
"t": 1565636426432
},
{
"y": "0.24",
"t": 1565635825187
},
{
"y": "0.25",
"t": 1565635218607
},
{
"y": "0.25",
"t": 1565634618853
},
{
"y": "0.26",
"t": 1565634020604
},
{
"y": "0.26",
"t": 1565633419088
},
{
"y": "0.27",
"t": 1565632819216
},
{
"y": "0.27",
"t": 1565632218830
},
{
"y": "0.28",
"t": 1565631620692
},
{
"y": "0.29",
"t": 1565631019620
},
{
"y": "0.29",
"t": 1565630418738
},
{
"y": "0.30",
"t": 1565629818050
},
{
"y": "0.31",
"t": 1565629218872
},
{
"y": "0.33",
"t": 1565628126871
}
]
var chart = new Chart(ctx, {
"type": "line",
"data": {
"datasets": [
{
"label": "Foo",
"backgroundColor": "lightblue",
"borderColor": "blue",
"data": data,
"type": "line",
"pointRadius": 0,
"fill": false,
"lineTension": 0,
"borderWidth": 2,
"spanGaps": false
}
]
},
"options": {
"scales": {
"xAxes": [
{
"type": "time",
"distribution": "series",
"ticks": {
"source": "data",
"autoSkip": true
}
}
],
"yAxes": [
{
"scaleLabel": {
"display": true,
"labelString": "Y"
}
}
]
},
"tooltips": {
"intersect": false,
"mode": "index",
"callbacks": {}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>
Since v3 chart.js has an ability to set spanGap as a number, determining the maximum gap to span. So in this case, 1 hour gap can be used in order to keep the data points connected, but at the same time have a gap between 11pm and 5 am
Docs: https://www.chartjs.org/docs/latest/charts/line.html#line-styling
Official example: https://www.chartjs.org/docs/latest/samples/scales/time-max-span.html
Here's the adjusted code:
const ctx = document.getElementById('chart');
const data = [{
"y": "0.58",
"x": 1565665819571,
},
{
"y": "0.84",
"x": 1565665218436,
},
{
"y": "1.69",
"x": 1565664625228
},
{
"y": "0.24",
"x": 1565640019245
},
{
"y": "0.24",
"x": 1565639418937
},
{
"y": "0.25",
"x": 1565638819713
},
{
"y": "0.25",
"x": 1565638219190
},
{
"y": "0.23",
"x": 1565637619961
},
{
"y": "0.24",
"x": 1565637018574
},
{
"y": "0.24",
"x": 1565636426432
},
{
"y": "0.24",
"x": 1565635825187
},
{
"y": "0.25",
"x": 1565635218607
},
{
"y": "0.25",
"x": 1565634618853
},
{
"y": "0.26",
"x": 1565634020604
},
{
"y": "0.26",
"x": 1565633419088
},
{
"y": "0.27",
"x": 1565632819216
},
{
"y": "0.27",
"x": 1565632218830
},
{
"y": "0.28",
"x": 1565631620692
},
{
"y": "0.29",
"x": 1565631019620
},
{
"y": "0.29",
"x": 1565630418738
},
{
"y": "0.30",
"x": 1565629818050
},
{
"y": "0.31",
"x": 1565629218872
},
{
"y": "0.33",
"x": 1565628126871
}
]
const chart = new Chart(ctx, {
"type": "line",
"data": {
datasets: [{
label: 'Foo',
backgroundColor: "lightblue",
borderColor: "blue",
fill: false,
data: data,
pointRadius: 0,
spanGaps: 1000 * 60 * 60, // 1 hour
}]
},
options: {
responsive: true,
scales: {
xAxis: {
type: "time"
}
},
"tooltips": {
"intersect": false,
"mode": "index",
"callbacks": {}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon#^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon#^1"></script>
<canvas id="chart"></canvas>
In nodeJS, let's say that I have a little setInterval:
setInterval(() => {
// ...
}, 50)
And it sends to client entities:
setInterval(() => {
socket.emit("entities", { ... })
}, 50)
Entities looks like this:
{
"0": {
"collisionRadius": 40,
"entityClass": "Prop",
"health": 100,
"maxHealth": 100,
"model": "Tree",
"position": {
"x": 1970,
"y": 1477
},
"uid": 0,
"damage": 10,
"dead": 0,
"height": 32,
"hits": [],
"interpolatedYaw": 0,
"slowed": 0,
"stunned": 0,
"timeDead": 0,
"width": 32,
"yaw": 0
},
"1": {
"collisionRadius": 40,
"entityClass": "Prop",
"health": 100,
"maxHealth": 100,
"model": "Tree",
"position": {
"x": 1240,
"y": 1866
},
"uid": 1,
"damage": 10,
"dead": 0,
"height": 32,
"hits": [],
"interpolatedYaw": 0,
"slowed": 0,
"stunned": 0,
"timeDead": 0,
"width": 32,
"yaw": 0
},
"2": {
"collisionRadius": 40,
"entityClass": "Prop",
"health": 100,
"maxHealth": 100,
"model": "Tree",
"position": {
"x": 2195,
"y": 2034
},
"uid": 2,
"damage": 10,
"dead": 0,
"height": 32,
"hits": [],
"interpolatedYaw": 0,
"slowed": 0,
"stunned": 0,
"timeDead": 0,
"width": 32,
"yaw": 0
}
}
How do I, at every interval, only send updated properties from the all entities, and if all the entity didn't change, only send true?
Received entities should look like this:
{
"0": true,
"1": {
"health": 99,
"position": {
"x": 1245, /** position and health changed, send them **/
"y": 1866 /** even if only the x changed, send y too **/
}
},
"2": true /** all the entity stayed the same, so send `true` **/
}
first of all, excuse me for my English, I'm French.
I am coming to you because I have a problem. I would like help browsing a complex JSON object with a loop in Javascript (because it generates itself with JOINTJS) but I am not being able to do it. I can do it manually by json [ "cells"] ["7"] ["attrs"] ["text"] ["text"]. Here is an example of JSON for one element:
{"cells":[
{
"type":"basic.Image",
"position":{
"x":50,
"y":350
},
"size":
{
"width":100,
"height":50
},
"angle":0,
"id":"4a2802a8-0bd6-4d06-9343-921092a1decd",
"z":1,
"attrs":{
"text":{
"text":"230004",
"fill":"black"
},
"image":{
"xlink:href":"/uploads/documents/computer.png",
"width":100,
"height":50
}
}
}
]}
and parse JSON :
I would get the "text": "230004" (which changes depending on the item).
Thank you in advance for your help !
You can access the object like this: obj.cells[7].attrs.text.text, where obj is a variable holding the object.
Also note that as the cells property holds an array, you can loop through that array and get each individual value separately, like this:
var obj = {
"cells": [{
"type": "basic.Image",
"position": {
"x": 50,
"y": 350
},
"size": {
"width": 100,
"height": 50
},
"angle": 0,
"id": "4a2802a8-0bd6-4d06-9343-921092a1decd",
"z": 1,
"attrs": {
"text": {
"text": "230004",
"fill": "black"
},
"image": {
"xlink:href": "/uploads/documents/computer.png",
"width": 100,
"height": 50
}
}
}, {
"type": "basic.Image",
"position": {
"x": 50,
"y": 350
},
"size": {
"width": 100,
"height": 50
},
"angle": 0,
"id": "4a2802a8-0bd6-4d06-9343-921092a1decd",
"z": 1,
"attrs": {
"text": {
"text": "230005",
"fill": "black"
},
"image": {
"xlink:href": "/uploads/documents/computer.png",
"width": 100,
"height": 50
}
}
}, {
"type": "basic.Image",
"position": {
"x": 50,
"y": 350
},
"size": {
"width": 100,
"height": 50
},
"angle": 0,
"id": "4a2802a8-0bd6-4d06-9343-921092a1decd",
"z": 1,
"attrs": {
"text": {
"text": "230006",
"fill": "black"
},
"image": {
"xlink:href": "/uploads/documents/computer.png",
"width": 100,
"height": 50
}
}
}]
}
obj.cells.forEach(function(cell) {
console.log(cell.attrs.text.text);
});
I'm using fusioncharts library. I am not able to find what's wrong with data which I'm sending for scatter chart.
Demo - JSFiddle
{
"chart": {
"animation": 0,
"yaxisname": "OAE (%)",
"xaxisname": "Week",
"xaxismaxvalue": 54,
"xaxisminvalue": 0,
"showregressionline": "1",
"regressionlinethickness": "2",
"regressionLineColor": "008ee4",
"bgcolor": "FFFFFF",
"canvasborderthickness": "1",
"canvasbordercolor": "CCCCCC",
"showalternatehgridcolor": "0",
"divlineColor": "#FFFFFF",
"showLegend": "1",
"showValues": "1"
},
"categories": [{
"verticallinecolor": "c7c7c7",
"category": [{
"label": "46",
"x": "46",
"showverticalline": "1"
}, {
"label": "47",
"x": "47",
"showverticalline": "1"
}, {
"label": "48",
"x": "48",
"showverticalline": "1"
}, {
"label": "49",
"x": "49",
"showverticalline": "1"
}, {
"label": "50",
"x": "50",
"showverticalline": "1"
}, {
"label": "51",
"x": "51",
"showverticalline": "1"
}, {
"label": "52",
"x": "52",
"showverticalline": "1"
}, {
"label": "53",
"x": "53",
"showverticalline": "1"
}, {
"label": "01",
"x": "01",
"showverticalline": "1"
}, {
"label": "02",
"x": "02",
"showverticalline": "1"
}, {
"label": "03",
"x": "03",
"showverticalline": "1"
}, {
"label": "04",
"x": "04",
"showverticalline": "1"
}]
}],
"dataset": [{
"seriesname": "Target",
"color": "93cc1a",
"regressionLineColor": "93cc1a",
"showValues": "0",
"anchorradius": "0",
"anchorSides": "8",
"regressionLineThickness": "5",
"anchorBorderColor": "2A612D",
"anchorBgColor": "93cc1a",
"data": [{
"y": "40%",
"x": "46"
}, {
"y": "40%",
"x": "47"
}, {
"y": "40%",
"x": "48"
}, {
"y": "40%",
"x": "49"
}, {
"y": "40%",
"x": "50"
}, {
"y": "40%",
"x": "51"
}, {
"y": "40%",
"x": "52"
}, {
"y": "40%",
"x": "53"
}, {
"y": "40%",
"x": "01"
}, {
"y": "40%",
"x": "02"
}, {
"y": "40%",
"x": "03"
}, {
"y": "40%",
"x": "04"
}]
}, {
"seriesname": "OAE",
"color": "008ee4",
"anchorradius": "5",
"anchorSides": "7",
"anchorBorderColor": "008ee4",
"anchorBgColor": "008ee4",
"data": [{
"y": "29.73",
"x": "46"
}, {
"y": "100.36",
"x": "47"
}, {
"y": "69.37",
"x": "48"
}, {
"y": "55.55",
"x": "49"
}, {
"y": "64.4",
"x": "50"
}, {
"y": "135.43",
"x": "51"
}, {
"y": "55.02",
"x": "52"
}, {
"y": "NA",
"x": "53"
}, {
"y": "NA",
"x": "01"
}, {
"y": "73.36",
"x": "02"
}, {
"y": "8.28",
"x": "03"
}, {
"y": "137.91",
"x": "04"
}],
"dashed": "1"
}]
}
You can see there are space in between the chart X-axis. Also I want that chart should plot X-axis as I'm passing in categories object. Why it's automatically sorted.
In the fiddle, if you check the minimum value for x-axis ranges from 01-04 and max values from 46 to 52.
Since, there isn't any labels in between 04 and 46, the space in-between is empty. The chart actually is plotted from 01 to 52, the space in between where there is no value or labels will not be skipped.
You can achieve what you want using label. Its just a work around.
Updated Fiddle
"categories": [{
"verticallinecolor": "c7c7c7",
"category": [{
"label": "46",
"x": "0",
"showverticalline": "1"
}, {
"label": "47",
"x": "1",
"showverticalline": "1",
} //......
I have a problem with Hightcharts.
I want to display my graph in a complete day (between 08/12/2012 0:00 and 08/12/2012 23:59)
So I use the xAxis.min and xAxis.max of the Highcharts documentation.
But when I display my graph I don't see the min and max value.
"ic": "images/ciblerouge.png",
"icTrack": "",
"color": "255,0,0,0.5",
"title": "skywaveUnitTest - 08/10/2012",
"xAxis": {
"min": 1349661600000,
"max": 1349747999000,
"startOnTick": false
},
"aData": [{
"name": "Vitesse (Km/h)",
"data": [{
"x": 1349711130233,
"y": 10,
"l": 16789
},
{
"x": 1349711388379,
"y": 10,
"l": null
},
{
"x": 1349711388380,
"y": 290,
"l": 16790
},
{
"x": 1349711861797,
"y": 290,
"l": 16791
},
{
"x": 1349717896097,
"y": 290,
"l": 16792
},
{
"x": 1349718759813,
"y": 290,
"l": 16793
},
{
"x": 1349719132107,
"y": 290,
"l": 16794
}],
"visible": true,
"yAxis": 1,
"marker": {
"enabled": false,
"radius": 0
}
},
{
"name": "Altitude",
"data": [{
"x": 1349711130233,
"y": 0,
"l": 16789
},
{
"x": 1349711388379,
"y": 0,
"l": null
},
{
"x": 1349711388380,
"y": -800,
"l": 16790
},
{
"x": 1349711861797,
"y": -800,
"l": 16791
},
{
"x": 1349717896096,
"y": -800,
"l": null
},
{
"x": 1349717896097,
"y": 0,
"l": 16792
},
{
"x": 1349718759812,
"y": 0,
"l": null
},
{
"x": 1349718759813,
"y": 2400,
"l": 16793
},
{
"x": 1349719132107,
"y": 2400,
"l": 16794
}],
"visible": false,
"yAxis": 1,
"marker": {
"enabled": false,
"radius": 0
}
}],