We Keep Coding

Convert hard-coded data into automated data in Javascript Chart.js

I have a data variable that needs to be represented on a line chart in Chart.js in React app. I am showing train and test data on the same line chart.
The values for the train dataset and test dataset are as follows:
train(y-axis): [369, 438, 329, 435, 359, 345, 406, 469, 457, 499, 352, 336, 480, 499, 354]
test(y-axis): [354, 354, 354, 354, 354]
The values for the train dataset indices and test dataset indices are as follows:
train_idx(x-axis): [0, 1, 2, 3, 4, 5,6,7 ,8 9, 10, 11, 12, 13, 14]
test_idx(x-axis): [14, 15, 16, 17, 18] /
I have hard-coded the values for now and the code looks as follows:
const [data, setData] = useState({
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
datasets: [{
label: 'Train Dataset',
data: [{x: 0, y: 369},
{x: 1, y: 438},
{x: 2, y: 329},
{x: 3, y: 435},
{x: 4, y: 359},
{x: 5, y: 345},
{x: 6, y: 406},
{x: 7, y: 469},
{x: 8, y: 457},
{x: 9, y: 499},
{x: 10, y: 352},
{x: 11, y: 336},
{x: 12, y: 480},
{x: 13, y: 499},
{x: 14, y: 354}],
//data: [369, 438, 329, 435, 359, 345, 406, 469, 457, 499, 352, 336, 480, 499, 354],
borderColor: 'blue',
}, {
label: 'Test Dataset',
data: [{x: 14, y: 354},
{x: 15, y: 354},
{x: 16, y: 354},
{x: 17, y: 354},
{x: 18, y: 354}],
//data: [354, 354, 354, 354, 354],
type: 'line',
borderColor: 'purple',
}],
})
From the above data, I get a graph that looks like this:
Now, I need the same graph but without hard-coding the values like above.
Please help me. The resulting graph without hard-coding the values needs to look like the picture.

How do you find the closet coordinate in the array from the target

This is the array. I want to filter the closet x and y coordinates from a target which is:
target.x = 310 and target.y = 280;
the correct value is the value in the array at number 8.
I just a filter scheme to filter the correct value from the array that's closest to the target x and y?
distFromBall = [
{y: 10, x: 300, number: 1},
{y: 23.333333333333314, x: 75, number: 2},
{y: 23.333333333333314, x: 225, number: 3},
{y: 23.333333333333314, x: 375, number: 4},
{y: 23.333333333333314, x: 525, number: 5},
{y: 270, x: 75, number: 6},
{y: 270, x: 225, number: 7},
{y: 270, x: 375, number: 8},
{y: 270, x: 525, number: 9},
{y: 290, x: 150, number: 10},
{y: 290, x: 450, number: 11}]
i tried something like this but no luck:
var f = distFromBall.filter(function (a,i) {
return a.x > 0;
});
f.sort(function (a, b) {
return a.x - b.x;
});
f.sort(function (a, b) {
return a.y - b.y;
});
var num = distFromBall[0].number;
var pl = arrayPlayerHome.find(function (a) {
return a.shirtNumber == num;
});
return pl;

With the pythagorean theorem and .reduce, you can keep the closest number object to the target as the accumulator and return it at the end.
const getDist = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
const findClosest = (target) => distFromBall
.reduce((a, item) => getDist(item, target) < getDist(a, target) ? item : a);
const distFromBall = [
{y: 10, x: 300, number: 1},
{y: 23.333333333333314, x: 75, number: 2},
{y: 23.333333333333314, x: 225, number: 3},
{y: 23.333333333333314, x: 375, number: 4},
{y: 23.333333333333314, x: 525, number: 5},
{y: 270, x: 75, number: 6},
{y: 270, x: 225, number: 7},
{y: 270, x: 375, number: 8},
{y: 270, x: 525, number: 9},
{y: 290, x: 150, number: 10},
{y: 290, x: 450, number: 11}]
console.log(findClosest({ x: 310, y: 280 }));

Add multi color gradient for different points in d3.js

I have to add gradient inside a foot shape according to the value of a point inside the foot. I have X and Y coordinates of a point and a value is attached to it. According to the value I have to assign color gradient like in the picture below. Higher the value of a point, darker the area is
So far, I have created the foot and added 2 color gradient to the whole foot, but I am unable to add gradient like this in the picture. Below is what I have achieved. Please if anyone could help me to find any solution to this
Here is the Stackblitz Link
Sample data :
[
{sensor: 0, value: 7.4, x: 108, y: 406}
{sensor: 1, value: 8.1, x: 68, y: 412}
{sensor: 2, value: 3.6, x: 108, y: 346}
{sensor: 3, value: 4.5, x: 61, y: 350}
{sensor: 4, value: 0.5, x: 108, y: 280}
{sensor: 5, value: 1, x: 49, y: 288}
{sensor: 6, value: 1, x: 122, y: 200}
{sensor: 7, value: 0.5, x: 30, y: 218}
{sensor: 8, value: 3.3, x: 140, y: 109}
{sensor: 9, value: 3.4, x: 105, y: 114}
{sensor: 10, value: 2.7, x: 78, y: 119}
{sensor: 11, value: 2.3, x: 51, y: 124}
{sensor: 12, value: 1.6, x: 22, y: 136}
{sensor: 13, value: 3.5, x: 121, y: 41}
{sensor: 14, value: 1.2, x: 85, y: 45}
{sensor: 15, value: 1, x: 50, y: 59}
]

Here is a hit map with 'populated' data (based on average value of closest points):
Just add the mask of the foot contour...
const data = [
{sensor: 0, value: 7.4, x: 108, y: 406},
{sensor: 1, value: 8.1, x: 68, y: 412},
{sensor: 2, value: 3.6, x: 108, y: 346},
{sensor: 3, value: 4.5, x: 61, y: 350},
{sensor: 4, value: 0.5, x: 108, y: 280},
{sensor: 5, value: 1, x: 49, y: 288},
{sensor: 6, value: 1, x: 122, y: 200},
{sensor: 7, value: 0.5, x: 30, y: 218},
{sensor: 8, value: 3.3, x: 140, y: 109},
{sensor: 9, value: 3.4, x: 105, y: 114},
{sensor: 10, value: 2.7, x: 78, y: 119},
{sensor: 11, value: 2.3, x: 51, y: 124},
{sensor: 12, value: 1.6, x: 22, y: 136},
{sensor: 13, value: 3.5, x: 121, y: 41},
{sensor: 14, value: 1.2, x: 85, y: 45},
{sensor: 15, value: 1, x: 50, y: 59},
];
const populateData = (points, width, height, step) => {
const populated = [];
for (let x = 0; x < width; x += step)
for (let y = 0; y < height; y += step) {
const distances = points.map(p =>
({...p, distance: Math.hypot(p.x - x, p.y - y)})).filter(d => d.distance < 100);
const sum = distances.reduce((s, d) => s + 1 / d.distance, 0);
const value = distances.reduce((a, d) => a + 1 / sum / d.distance * d.value, 0);
populated.push({x, y, value});
}
return populated;
};
const pd = populateData(data, 300, 500, 10);
const RECT_SIZE = 20;
const getColor = v => `rgb(255,${255 - v * 25},0)`
const svg = d3.select('svg');
pd.forEach(d => {
svg.append('rect')
.attr('x', d.x - RECT_SIZE / 2)
.attr('y', d.y - RECT_SIZE / 2)
.attr('width', RECT_SIZE / 2)
.attr('height', RECT_SIZE / 2)
.style('fill', getColor(d.value));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="500" />

Here is a simple plot with the data you provided:
If you have more points, it can be a more precise picture
const data = [
{sensor: 0, value: 7.4, x: 108, y: 406},
{sensor: 1, value: 8.1, x: 68, y: 412},
{sensor: 2, value: 3.6, x: 108, y: 346},
{sensor: 3, value: 4.5, x: 61, y: 350},
{sensor: 4, value: 0.5, x: 108, y: 280},
{sensor: 5, value: 1, x: 49, y: 288},
{sensor: 6, value: 1, x: 122, y: 200},
{sensor: 7, value: 0.5, x: 30, y: 218},
{sensor: 8, value: 3.3, x: 140, y: 109},
{sensor: 9, value: 3.4, x: 105, y: 114},
{sensor: 10, value: 2.7, x: 78, y: 119},
{sensor: 11, value: 2.3, x: 51, y: 124},
{sensor: 12, value: 1.6, x: 22, y: 136},
{sensor: 13, value: 3.5, x: 121, y: 41},
{sensor: 14, value: 1.2, x: 85, y: 45},
{sensor: 15, value: 1, x: 50, y: 59},
];
const RECT_SIZE = 20;
const getColor = v => `rgb(255,${255 - v * 25},0)`
const svg = d3.select('svg');
data.forEach(d => {
svg.append('rect')
.attr('x', d.x - RECT_SIZE / 2)
.attr('y', d.y - RECT_SIZE / 2)
.attr('width', RECT_SIZE / 2)
.attr('height', RECT_SIZE / 2)
.style('fill', getColor(d.value));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="500" />

find lowest and highest in array of object

I need to find 4 values in this order in a array of object:
lowest x & y
highest x and lowest y
highest x & y
highest y & lowest x
my object is like this :
object: [
{id: 1, x: 160, y: 160},
{id: 2, x: 192, y: 160},
{id: 3, x: 224, y: 160},
{id: 4, x: 224, y: 192},
{id: 5, x: 192, y: 192},
{id: 6, x: 160, y: 192},
{id: 7, x: 160, y: 224},
{id: 8, x: 192, y: 224},
{id: 9, x: 224, y: 224}
],
the result must be an array with those 4 object .
Thanks

This is not the complete answer; highest x and lowest y and vice versa remained but it might give other contributors some insights how to solve the problem:
const object = [
{id: 9, x: 224, y: 224},
{id: 2, x: 192, y: 160},
{id: 3, x: 224, y: 160},
{id: 4, x: 224, y: 192},
{id: 5, x: 192, y: 192},
{id: 6, x: 160, y: 192},
{id: 7, x: 160, y: 224},
{id: 8, x: 192, y: 224},
{id: 1, x: 160, y: 160},
{id: 9, x: 224, y: 224}
];
object.sort((objA, objB) => (objA.x * objA.y) - (objB.x * objB.y));
const HighestXAndHighestY = object[object.length-1];
const lowestXAndlowestY = object[0];
console.log(HighestXAndHighestY)
console.log(lowestXAndlowestY)

Highcharts drilldown doesn't work for 3+ levels

I want to have highchart drilldown with more than 3 levels.
Also, I have tried referring below articles, but I was not able to figure out.
Drilldown multiple levels Highchart
Highcharts - drill down to multiple series
I could do only till 3 levels. After that, bar is not clickable.
Not sure where the mistake is, but this is what I have done so far.
2 Level Drill down - Works fine
Multilevel - Works only till Month level, cannot filter Day level
https://jsfiddle.net/foodiepanda/2ec7d6fz/9/
Below is code (only jquery)
/*Start*/
$('#chart1').highcharts({
chart: {type: 'column'},
title: {text: 'Multi Drilldown'},
xAxis: {type: 'category'},
legend: {enabled: false},
plotOptions:
{
series:
{
dataLabels:
{
enabled: true, //Shown at top of column
}
}
},
series:
[
{
name: 'Year',
//colorByPoint: false,
data:
[
{name: '2019',y: 200,drilldown: '2019'}, //200 clicks in 2018
{name: '2020',y: 450,drilldown: '2020'}, //450 clicks in 2019
]
}
],
drilldown:
{
series:
[
{
id: '2019', //For 2019
name: 'Quarter', //Splitting 200 as 50,100,20,30
data:
[
{
name: 'Q1',
y: 50,
drilldown: 'Q1'
},
{
name: 'Q2',
y: 100,
drilldown: 'Q2'
},
{
name: 'Q3',
y: 20,
drilldown: 'Q3'
},
{
name: 'Q4',
y: 30,
drilldown: 'Q4'
}
]
},
{
id: 'Q1',
name: 'Month', //Splitting 50 as 10,30,20
data:
[
{
name: 'Jan',
y: 10,
drilldown: 'Jan'
},
{
name: 'Feb',
y: 30,
drilldown: 'Feb'
},
{
name: 'Mar',
y: 20,
drilldown: 'Mar'
}
]
},
{
id: 'Jan',
name: 'Day', //Splitting 10 as ...[days]
data:
[
{name:'1', y: 0},
{name:'2', y: 0},
{name:'3', y: 2},
{name:'4', y: 0},
{name:'5', y: 0},
{name:'6', y: 0},
{name:'7', y: 0},
{name:'8', y: 0},
{name:'9', y: 0},
{name:'10', y: 0},
{name:'11', y: 1},
{name:'12', y: 2},
{name:'13', y: 0},
{name:'14', y: 1},
{name:'15', y: 0},
{name:'16', y: 0},
{name:'17', y: 0},
{name:'18', y: 0},
{name:'19', y: 0},
{name:'20', y: 0},
{name:'21', y: 0},
{name:'22', y: 0},
{name:'23', y: 0},
{name:'24', y: 0},
{name:'25', y: 2},
{name:'26', y: 0},
{name:'27', y: 0},
{name:'28', y: 0},
{name:'29', y: 0},
{name:'30', y: 1},
{name:'31', y: 1}
]
},
{
id: 'Q2',
name: 'Month', //Splitting 100 as 80,10,10
data:
[
['Apr', 80],
['May', 10],
['Jun', 10]
]
},
{
id: 'Q3',
name: 'Month', //Splitting 20 as 5,10,5
data:
[
['Jul', 5],
['Aug', 10],
['Sep', 5]
]
},
{
id: 'Q4',
name: 'Month', //Splitting 30 as 5,15,10
data:
[
['Oct', 5],
['Nov', 15],
['Dec', 10]
]
},
//For 2020
{
id: '2020',
name: 'Quarter', //Splitting 450 as 50,100,50,250
data:
[
{
name: 'Q1',
y: 50,
drilldown: 'Q1'
},
{
name: 'Q2',
y: 100,
drilldown: 'Q2'
},
{
name: 'Q3',
y: 50,
drilldown: 'Q3'
},
{
name: 'Q4',
y: 250,
drilldown: 'Q4'
}
]
},
{
id: 'Q1',
name: 'Month', //Splitting 50 as 10,35,5
data:
[
['Jan', 10],
['Feb', 35],
['Mar', 5]
]
},
{
id: 'Q2',
name: 'Month', //Splitting 100 as 40,35,25
data:
[
['Apr', 40],
['May', 35],
['Jun', 25]
]
},
{
id: 'Q3',
name: 'Month', //Splitting 50 as 5,25,20
data:
[
['Jul', 5],
['Aug', 25],
['Sep', 20]
]
},
{
id: 'Q4',
name: 'Month', //Splitting 250 as 75,125,50
data:
[
['Oct', 75],
['Nov', 125],
['Dec', 50]
]
},
] //End Series
} //End Year Drilldown
}); //End Highchart function
//Explicitly change Y axis
var curChart = $('#chart1').highcharts();
curChart.yAxis[0].update({
title:{
text:"Number of Hits"
}
});
/*End*/

I was able to figure out what the issue was.
The name parameter and drilldown parameter were having same values.
I just renamed name parameter from 'Q1' to '_Q1' and it worked like a charm.
{
name: 'Q1',
y: 50,
drilldown: '_Q1'
}
Updated JSFiddle :
https://jsfiddle.net/foodiepanda/2ec7d6fz/11/