Develop Reference

Setting a Property of an Object in Array 1 based on Value from Array 2

I have two arrays here. Array 1 is an array of arrays consisting of some objects as follows:
var house = [
[
{ x: 50, y: 50, selected: false },
{ x: 150, y: 50, selected: false },
{ x: 250, y: 50, selected: false },
{ x: 350, y: 50, selected: false },
{ x: 450, y: 50, selected: false },
{ x: 550, y: 50, selected: false },
{ x: 650, y: 50, selected: false },
{ x: 750, y: 50, selected: false },
{ x: 850, y: 50, selected: false },
{ x: 950, y: 50, selected: false },
],
[
{ x: 50, y: 130, selected: false },
{ x: 150, y: 130, selected: false },
{ x: 250, y: 130, selected: false },
{ x: 350, y: 130, selected: false },
{ x: 450, y: 130, selected: false },
{ x: 550, y: 130, selected: false },
{ x: 650, y: 130, selected: false },
{ x: 750, y: 130, selected: false },
{ x: 850, y: 130, selected: false },
{ x: 950, y: 130, selected: false },
]
]
And array 2 consisting of some boolean values
var isSelected = [
false,
false,
false,
false,
false,
false,
true,
false,
false,
false,
true,
false,
false,
false,
false,
false,
false,
false,
true,
false
]
How can I iterate over these arrays so that if the value of any element in array 2 is true, then I must set the value of the property "selected" of the object in the corresponding array in array 1 to true as well?

const isSelected = [
false,
false,
false,
false,
false,
false,
true,
false,
false,
false,
true,
false,
false,
false,
false,
false,
false,
false,
true,
false
]
let house = [
[
{ x: 50, y: 50, selected: false },
{ x: 150, y: 50, selected: false },
{ x: 250, y: 50, selected: false },
{ x: 350, y: 50, selected: false },
{ x: 450, y: 50, selected: false },
{ x: 550, y: 50, selected: false },
{ x: 650, y: 50, selected: false },
{ x: 750, y: 50, selected: false },
{ x: 850, y: 50, selected: false },
{ x: 950, y: 50, selected: false },
],
[
{ x: 50, y: 130, selected: false },
{ x: 150, y: 130, selected: false },
{ x: 250, y: 130, selected: false },
{ x: 350, y: 130, selected: false },
{ x: 450, y: 130, selected: false },
{ x: 550, y: 130, selected: false },
{ x: 650, y: 130, selected: false },
{ x: 750, y: 130, selected: false },
{ x: 850, y: 130, selected: false },
{ x: 950, y: 130, selected: false },
]
]
const res = []
house.forEach(el =>
res.push(
el.map(({selected, ...rest}, i) => ({ selected: isSelected[i], ...rest}))
))
console.log(res)

Someone have an idea how i can calculate the position?

So I have triangles and getting Information of which triangles is on what Connection.
like so:
[
{id:3
connected:[2,1,null]}
{id:1
connected:[null,null,3]}
{id:2
connected:[4,3,null]}
{id:4
connected:[2,null,null]}
]
It would look like this:
I need some method to calculate the X- and Y-position and rotation
When i hard code it would look like this:
[
{
id: 3,
x: 200,
y: 200,
radius: 100,
rotation: 0,
},
{
id: 1,
x: 300,
y: 150,
radius: 100,
rotation: 180,
},
{
id: 2,
x: 200,
y: 310,
radius: 100,
rotation: 180,
},
{
id: 4,
x: 300,
y: 360,
radius: 100,
rotation: 0,
},
]

How to stack bar from data with x and y in Chart JS

I am trying to plot a stack bar with data having the x and y values, eg {x: 1, y:1}.
But it seems that Chart JS follows indexing of array passed in the data with the index in the labels not the x.
I also tried using ticks: {source: 'data'} but no use.
I had to uncomment the labels: on and add index 1 and 2 in Africa dataset to see desired results.
Is there some way?
<canvas id="barchart" width="800" height="450"></canvas>
<script>
var ctx = document.getElementById("barchart").getContext('2d');
var barchart = new Chart(ctx, {
type: 'bar',
data: {
//labels: [0,1,2,3],
datasets: [{
data: [{x: 0, y: 2}, {x: 3, y: 1}],
label: "Africa",
backgroundColor: "#3e95cd",
fill: false
}, {
data: [{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}, {x: 3, y: 2}],
label: "Asia",
backgroundColor: "#8e5ea2",
fill: false
}, {
data: [{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}, {x: 3, y: 1}],
label: "Europe",
backgroundColor: "#3cba9f",
fill: false
}, {
data: [{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}, {x: 3, y: 1}],
label: "Latin America",
backgroundColor: "#e8c3b9",
fill: false
}, {
data: [{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}, {x: 3, y: 1}],
label: "North America",
backgroundColor: "#c45850",
fill: false
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
},
responsive: false,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
ticks: {source: 'data'}
}],
yAxes: [{
stacked: true
}]
}
}
});
</script>

How to position legend on top instead of bottom in Plotly?

I want to display the legend on the top of chart, but under the title. I looked for the API, and did not find anything related changing position, but only setting orientation.
var myData = [
{
fcst_valid_local: "2013-01-04 22:23:00",
pop: 20,
temp: 38,
},
{
fcst_valid_local: "2013-02-04 22:23:00",
pop: 15,
temp: 39,
},
{
fcst_valid_local: "2013-03-04 22:23:00",
pop: 2,
rh: 70,
}
];
var data = [
{
x: myData.map(d => d.fcst_valid_local),
y: myData.map(d => d.temp),
type: 'line'
},
{
x: myData.map(d => d.fcst_valid_local),
y: myData.map(d => d.pop),
type: 'bar',
yaxis: 'y2'
}
];
var layout = {
title: 'Daily Forecast',
yaxis: {
autorange: true,
range: [0, 100],
},
yaxis2: {
range: [0, 100],
side: 'right',
overlaying: 'y',
type: 'linear'
},
legend: {orientation: 'h', side: 'top'}
};
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>

You can position the legend by setting its x and y values. For your graph it would be something like:
legend: {x: 0.4, y: 1.2}
var myData = [
{
fcst_valid_local: "2013-01-04 22:23:00",
pop: 20,
temp: 38,
},
{
fcst_valid_local: "2013-02-04 22:23:00",
pop: 15,
temp: 39,
},
{
fcst_valid_local: "2013-03-04 22:23:00",
pop: 2,
rh: 70,
}
];
var data = [
{
x: myData.map(d => d.fcst_valid_local),
y: myData.map(d => d.temp),
type: 'line'
},
{
x: myData.map(d => d.fcst_valid_local),
y: myData.map(d => d.pop),
type: 'bar',
yaxis: 'y2'
}
];
var layout = {
title: 'Daily Forecast',
yaxis: {
autorange: true,
range: [0, 100],
},
yaxis2: {
range: [0, 100],
side: 'right',
overlaying: 'y',
type: 'linear'
},
legend: {x: 0.4, y: 1.2}
};
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;">

add:
layout(legend = list(orientation = 'h', xanchor = "center", x = 0.5, y= 1))
to fit legend as horizontal, in the middle and at the top.

Changing the x-label in HTML Canvas charts

Hi I am using HTML Canvas charts. In one of the charts can I change the label of x-axis?
The source code for the chart is :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function () {
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
theme: "theme2",
title:{
text: "Multi Series Spline Chart - Hide / Unhide via Legend"
},
axisY:[{
lineColor: "#4F81BC",
tickColor: "#4F81BC",
labelFontColor: "#4F81BC",
titleFontColor: "#4F81BC",
lineThickness: 2,
},
{
lineColor: "#C0504E",
tickColor: "#C0504E",
labelFontColor: "#C0504E",
titleFontColor: "#C0504E",
lineThickness: 2,
}],
data: [
{
type: "spline", //change type to bar, line, area, pie, etc
showInLegend: true,
dataPoints: [
{ x: 10, y: 51 },
{ x: 20, y: 45},
{ x: 30, y: 50 },
{ x: 40, y: 62 },
{ x: 50, y: 95 },
{ x: 60, y: 66 },
{ x: 70, y: 24 },
{ x: 80, y: 32 },
{ x: 90, y: 16}
]
},
{
type: "spline",
axisYIndex: 1,
showInLegend: true,
dataPoints: [
{ x: 10, y: 201 },
{ x: 20, y: 404},
{ x: 30, y: 305 },
{ x: 40, y: 405 },
{ x: 50, y: 905 },
{ x: 60, y: 508 },
{ x: 70, y: 108 },
{ x: 80, y: 300 },
{ x: 90, y: 101}
]
}
],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
});
</script>
</body>
</html>
Now here we can see that x-values is 10,20,30... My question is can we change them to other format like 10am or 10pm?

You can add a suffix (or a prefix) to the x-axis with chart.options.axisX
chart.options.axisX = { suffix: "AM" };
Or you can add both like this:
chart.options.axisX = { prefix: "/", suffix: "AM" };