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>
For the following
array1 = [{
"x": 0,
"y": 1,
"z": 1,
"i": "chart1"
}, {
"x": 0,
"y": 2,
"z": 1,
"i": "chart2"
}, {
"x": 1,
"y": 1,
"z": 1,
"i": "chart3 "
}
]
array2 = [{
"x": 1,
"y": 1,
"z": 1,
"i": "chart1"
}, {
"x": 0,
"y": 1,
"z": 1,
"i": "chart2"
}, {
"x": 0,
"y": 2,
"z": 1,
"i": "chart3"
}
]
compare x and y of array1 and array2 and find the position if it is equal and return the set of array of i value.
i.e in above case it should return:
array3=["chart2","chart3","chart1"]
I have a json as below:
json = [{
"visType:" bar "," visName ":" chart1 "},{" visType: "bar",
"visName": "chart2"
}, {
"visType:" Pie "," visName ":" chart3 "}]
And this need to be sort based on array3 = ["chart2","chart3","chart1"] the output should be as in updated json
updatedjson = [{
"visType:" bar "," visName ":" chart2 "},{" visType: "Pie",
"visName": "chart3"
}, {
"visType:" bar "," visName ":" chart1 "}]
I need a solution using lodash or javascript.
const array3 = [...array1, ...array2].filter(({x,y}) => x===y);
const updatedjson = array3.map(({i}) => json.find(({visName}) => i === visName));
Edit: Fixed the input data which was full of syntax errors:
var array1 = [{ "x": 0, "y": 1, "z": 1, "i": "chart1" }, { "x": 0, "y": 2, "z": 1, "i": "chart2" }, { "x": 1, "y": 1, "z": 1, "i": "chart3" }];
var array2 = [{ "x": 1, "y": 1, "z": 1, "i": "chart1" }, { "x": 0, "y": 1, "z": 1, "i": "chart2" }, { "x": 0, "y": 2, "z": 1, "i": "chart3" }];
var json = [
{ "visType": "bar", "visName": "chart1" },
{ "visType": "bar", "visName": "chart2" },
{ "visType": "Pie", "visName": "chart3" }
];
const array3 = [...array1, ...array2].filter(({ x, y }) => x === y);
const updatedjson = array3.map(({ i }) => json.find(({ visName }) => i === visName));
console.log(array3);
console.log(updatedjson);
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>
I am trying to update my plotly graph.
Here are the things I have tried.
This is my dataset
var scatter_data = [{
"product_id": 1,
"color": "#ff0000",
"text": "Size :14",
"y": 4,
"x": 6,
"z": 3,
"size": 14
}, {
"product_id": 2,
"color": "#FFFFFF",
"text": "Size :38",
"y": 5,
"x": 4,
"z": 4,
"size": 38
}, {
"product_id": 3,
"color": "#00ff00",
"text": "Size :20",
"y": 3,
"x": 5,
"z": 4,
"size": 20
}, {
"product_id": 4,
"color": "#FFFFFF",
"text": "Size :31",
"y": 6,
"x": 0,
"z": 1,
"size": 31
}, {
"product_id": 5,
"color": "#00ff00",
"text": "Size :20",
"y": 0,
"x": 5,
"z": 1,
"size": 20
}, {
"product_id": 6,
"color": "#ff0000",
"text": "Size :18",
"y": 6,
"x": 1,
"z": 5,
"size": 18
}, {
"product_id": 7,
"color": "#FFa500",
"text": "Size :15",
"y": 0,
"x": 4,
"z": 2,
"size": 15
}, {
"product_id": 8,
"color": "#00ff00",
"text": "Size :13",
"y": 2,
"x": 1,
"z": 1,
"size": 13
}, {
"product_id": 9,
"color": "#FFFFFF",
"text": "Size :11",
"y": 3,
"x": 0,
"z": 1,
"size": 11
}, {
"product_id": 10,
"color": "#FFa500",
"text": "Size :32",
"y": 4,
"x": 2,
"z": 2,
"size": 32
}, {
"product_id": 11,
"color": "#0000ff",
"text": "Size :30",
"y": 1,
"x": 0,
"z": 1,
"size": 30
}, {
"product_id": 12,
"color": "#0000ff",
"text": "Size :39",
"y": 3,
"x": 4,
"z": 3,
"size": 39
}, {
"product_id": 13,
"color": "#FFFFFF",
"text": "Size :33",
"y": 2,
"x": 2,
"z": 4,
"size": 33
}, {
"product_id": 14,
"color": "#ff69b4",
"text": "Size :21",
"y": 0,
"x": 6,
"z": 6,
"size": 21
}, {
"product_id": 15,
"color": "#FFa500",
"text": "Size :34",
"y": 4,
"x": 4,
"z": 2,
"size": 34
}, {
"product_id": 16,
"color": "#FFa500",
"text": "Size :28",
"y": 0,
"x": 0,
"z": 2,
"size": 28
}, {
"product_id": 17,
"color": "#ff69b4",
"text": "Size :10",
"y": 1,
"x": 3,
"z": 1,
"size": 10
}, {
"product_id": 18,
"color": "#00ff00",
"text": "Size :21",
"y": 0,
"x": 5,
"z": 2,
"size": 21
}, {
"product_id": 19,
"color": "#ff0000",
"text": "Size :32",
"y": 6,
"x": 6,
"z": 4,
"size": 32
}, {
"product_id": 20,
"color": "#FFa500",
"text": "Size :16",
"y": 0,
"x": 6,
"z": 1,
"size": 16
}, {
"product_id": 21,
"color": "#0000ff",
"text": "Size :39",
"y": 1,
"x": 4,
"z": 2,
"size": 39
}, {
"product_id": 22,
"color": "#FFa500",
"text": "Size :24",
"y": 2,
"x": 4,
"z": 4,
"size": 24
}, {
"product_id": 23,
"color": "#0000ff",
"text": "Size :25",
"y": 5,
"x": 1,
"z": 0,
"size": 25
}, {
"product_id": 24,
"color": "#FFFFFF",
"text": "Size :35",
"y": 0,
"x": 6,
"z": 4,
"size": 35
}, {
"product_id": 25,
"color": "#ff0000",
"text": "Size :29",
"y": 4,
"x": 2,
"z": 0,
"size": 29
}, {
"product_id": 26,
"color": "#FFa500",
"text": "Size :26",
"y": 2,
"x": 0,
"z": 3,
"size": 26
}, {
"product_id": 27,
"color": "#0000ff",
"text": "Size :27",
"y": 2,
"x": 5,
"z": 5,
"size": 27
}, {
"product_id": 28,
"color": "#ff0000",
"text": "Size :15",
"y": 2,
"x": 5,
"z": 2,
"size": 15
}, {
"product_id": 29,
"color": "#ff69b4",
"text": "Size :27",
"y": 3,
"x": 1,
"z": 4,
"size": 27
}, {
"product_id": 30,
"color": "#FFFFFF",
"text": "Size :16",
"y": 5,
"x": 6,
"z": 5,
"size": 16
}, {
"product_id": 31,
"color": "#00ff00",
"text": "Size :24",
"y": 4,
"x": 5,
"z": 6,
"size": 24
}, {
"product_id": 32,
"color": "#FFa500",
"text": "Size :22",
"y": 5,
"x": 6,
"z": 6,
"size": 22
}, {
"product_id": 33,
"color": "#ff0000",
"text": "Size :12",
"y": 4,
"x": 0,
"z": 4,
"size": 12
}, {
"product_id": 34,
"color": "#ff0000",
"text": "Size :33",
"y": 0,
"x": 3,
"z": 1,
"size": 33
}, {
"product_id": 35,
"color": "#FFa500",
"text": "Size :16",
"y": 0,
"x": 0,
"z": 1,
"size": 16
}, {
"product_id": 36,
"color": "#00ff00",
"text": "Size :32",
"y": 2,
"x": 5,
"z": 2,
"size": 32
}, {
"product_id": 37,
"color": "#ff0000",
"text": "Size :27",
"y": 2,
"x": 6,
"z": 6,
"size": 27
}, {
"product_id": 38,
"color": "#FFFFFF",
"text": "Size :20",
"y": 3,
"x": 4,
"z": 0,
"size": 20
}, {
"product_id": 39,
"color": "#FFa500",
"text": "Size :27",
"y": 6,
"x": 0,
"z": 3,
"size": 27
}, {
"product_id": 40,
"color": "#FFFFFF",
"text": "Size :16",
"y": 1,
"x": 3,
"z": 3,
"size": 16
}, {
"product_id": 41,
"color": "#0000ff",
"text": "Size :29",
"y": 2,
"x": 2,
"z": 0,
"size": 29
}, {
"product_id": 42,
"color": "#ff69b4",
"text": "Size :23",
"y": 6,
"x": 2,
"z": 3,
"size": 23
}, {
"product_id": 43,
"color": "#00ff00",
"text": "Size :10",
"y": 3,
"x": 1,
"z": 5,
"size": 10
}, {
"product_id": 44,
"color": "#FFa500",
"text": "Size :35",
"y": 0,
"x": 2,
"z": 4,
"size": 35
}, {
"product_id": 45,
"color": "#FFFFFF",
"text": "Size :21",
"y": 3,
"x": 3,
"z": 6,
"size": 21
}, {
"product_id": 46,
"color": "#FFa500",
"text": "Size :32",
"y": 2,
"x": 0,
"z": 6,
"size": 32
}, {
"product_id": 47,
"color": "#ff0000",
"text": "Size :24",
"y": 5,
"x": 6,
"z": 3,
"size": 24
}, {
"product_id": 48,
"color": "#FFFFFF",
"text": "Size :30",
"y": 0,
"x": 1,
"z": 6,
"size": 30
}, {
"product_id": 49,
"color": "#ff69b4",
"text": "Size :33",
"y": 3,
"x": 5,
"z": 5,
"size": 33
}, {
"product_id": 50,
"color": "#ff0000",
"text": "Size :10",
"y": 1,
"x": 3,
"z": 1,
"size": 10
}]
1) This is the code through which i am creating the graph
$(document).ready(function(){
trace = [];
data = []
$.each(scatter_data, function(index, value){
// console.log("here"+value);
index ++;
trace[index] = {
x : [value.x],
y: [value.y],
z:[value.z],
text:["Size: "+value.size],
mode : 'markers',
marker : {
color : [value.color],
size : [value.size],
symbol : 'circle',
line: {
color : 'rgb(204,204,204)',
width:1
},
opacity:0.9,
},
type: 'scatter3d',
name : 'category'+index,
title: 'title'+index
};
console.log(trace[index]);
data.push(trace[index]);
});
// var data = [trace[1],trace[2],trace[3]];
var layout = {margin: {
l: 0,
r: 0,
b: 0,
t: 0
}, showlegend : true};
Plotly.newPlot('plotly-div', data, layout, { modeBarButtonsToRemove: ['sendDataToCloud'], displaylogo : false } );
// There exist a event to click on the data point
// var graphDiv = document.getElementById('plotly-div')
// graphDiv.on('plotly_click', function(data){
// // do something using the event data
// console.log(data);
// });
});
Now i have a form through which i edit the data and get that data to update the graph.
for(i=1;i<=50;i++){
trace_no.push(i);
tempx.push($("#x-"+i).val());
tempy.push($("#y-"+i).val());
tempz.push($("#z-"+i).val());
tempsize.push($("#size-"+i).val());
tempcolor.push($("#rgb-combined-"+i).spectrum('get').toHexString());
temptext.push("size : "+$("#size-"+i).val());
}
var update = {
x : [tempx],
y : [tempy],
z : [tempz],
size : [tempsize],
'marker.color' : [tempcolor],
text : [temptext]
}
Plotly.restyle('plotly-div', update, trace_no)
The graph doesnt reflect changes and also all the legends gets colored in 1 particular color
Thanks in Advance!
So i Finally figured out the solution to this one with the help of the author of the library.
Here is the proper syntax :
var update = {
x : [[1],[2],[3],[4],[5]],
y : [[1],[2],[3],[4],[5]],
z : [[1],[2],[3],[4],[5]],
size :[[12],[13],[14],[15],[16]],
'marker.color' : [["#001"],["#005"],["#0f0"],["#f00"],["#00f"]],
text : "size"
}
Plotly.restyle('myDiv', update, [0,1,2,3,4]);
Every trace has to be given a seperate array.