Highcharts min and max xAxis - javascript

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
}
}],

Related

Display gaps between the timestamps having no data in ChartJS time series

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>

Compare and sort array using javascript

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);

Heatmap js min value 0

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>

Plotly restyle update error

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.

Graph not rendering correct scale with NVD3

I haven't been able to make the line chart render with a correct scale and the documentation is practically non existent for nvd3. It renders ok if I only use the first set of values (with the key Success).
I have a sample demo here: http://jsfiddle.net/LBqk3/1/
And the code / attached sample data:
nv.addGraph(function () {
var chart = nv.models.lineChart();
chart.xAxis.axisLabel('Requests')
.tickFormat(function (d) {
return d3.time.format('%d %b')(new Date(d));
});
var y = d3.scale.linear()
.range([400, 400]);
chart.yAxis.axisLabel('Amount')
.scale(y)
.tickFormat(d3.format('.2f'));
d3.select('#chart svg')
.datum([{
"values": [{
"x": 1387893600000,
"y": "170"
}, {
"x": 1387980000000,
"y": "416"
}, {
"x": 1388066400000,
"y": "743"
}, {
"x": 1388152800000,
"y": "633"
}, {
"x": 1388239200000,
"y": "500"
}, {
"x": 1388325600000,
"y": "604"
}, {
"x": 1388412000000,
"y": "683"
}, {
"x": 1388498400000,
"y": "485"
}, {
"x": 1388584800000,
"y": "509"
}, {
"x": 1388671200000,
"y": "677"
}, {
"x": 1388757600000,
"y": "610"
}, {
"x": 1388844000000,
"y": "607"
}, {
"x": 1388930400000,
"y": "538"
}, {
"x": 1389016800000,
"y": "596"
}, {
"x": 1389103200000,
"y": "609"
}, {
"x": 1389189600000,
"y": "581"
}, {
"x": 1389276000000,
"y": "503"
}, {
"x": 1389362400000,
"y": "524"
}, {
"x": 1389448800000,
"y": "515"
}, {
"x": 1389535200000,
"y": "580"
}, {
"x": 1389621600000,
"y": "592"
}, {
"x": 1389708000000,
"y": "573"
}, {
"x": 1389794400000,
"y": "597"
}, {
"x": 1389880800000,
"y": "717"
}, {
"x": 1389967200000,
"y": "2760"
}],
"key": "Missed"
}])
.transition()
.duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
The problem is that your y values are strings and you're treating them like numbers. Replacing
"y": "604"
with
"y": 604
and so on for all values should fix the issue.

Categories