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);
Related
I want to find differences between States in React. But also movements inside the state should be detected. For example, if I deleted the first item:
{"state":[
{"x": 1, "y": 3},
{"x": 4, "y": 5},
{"x": 2, "y": 6},
{"x": 0, "y": 9}
]
}
{"state":[
{"x": 4, "y": 5},
{"x": 2, "y": 6},
{"x": 0, "y": 9}
]
}
I use the jsondiffpatch package, but it works only when the last Item is deleted. but for diff(state, state1) I get this:
{
"state": {
"0": {
"x": [
1,
4
],
"y": [
3,
5
]
},
"1": {
"x": [
4,
2
],
"y": [
5,
6
]
},
"2": {
"x": [
2,
0
],
"y": [
6,
9
]
},
"_t": "a",
"_3": [
{
"x": 0,
"y": 9
},
0,
0
]
}
}
But I want to check if an item was just moved also. So the Difference should be:
{
"state": {
"0": [
{
"x": 1,
"y": 3
},
0,
0
]
}
}
I use the diff and patch from jsondiffpatch for an undo function and the undo state.
Is this possible?
Thank you!
You basically want to get the difference or we can say the intersection of two arrays.
You can use Lodash or Ramda to get your desired output.
Both of them has a variety of util functions available.
I need to get data from a nested array of objects, given an ID that I have.
I have been trying to get data from it so that I can pass it in to Angular Gridster 2, but even when using array.filter, I am struggling to get the results I want.
Data I start with:
[
{
"0": {
"cols": 15,
"id": "5-1564645705217",
"rows": 7,
"type": 0,
"x": 0,
"y": 0
},
"1": {
"cols": 15,
"id": "5-1564645705217",
"rows": 7,
"type": 1,
"x": 15,
"y": 0
},
"2": {
"cols": 15,
"id": "5-1564645705217",
"rows": 8,
"type": 2,
"x": 0,
"y": 7
},
"id": "1zk66HvI97C03751LNQm"
},
{
"0": {
"cols": 5,
"id": "5-1564545",
"rows": 7,
"type": 0,
"x": 0,
"y": 0
},
"1": {
"cols": 5,
"id": "5-1564545",
"rows": 7,
"type": 1,
"x": 15,
"y": 0
},
"id": "8gdfg897C03751LNQm"
}
]
I have an id (such as 1zk66HvI97C03751LNQm) and want to be able to fetch the contents so that I end up with:
[
{
"cols": 15,
"id": "5-1564645705217",
"rows": 7,
"type": 0,
"x": 0,
"y": 0
},
{
"cols": 15,
"id": "5-1564645705217",
"rows": 7,
"type": 1,
"x": 15,
"y": 0
},
{
"cols": 15,
"id": "5-1564645705217",
"rows": 8,
"type": 2,
"x": 0,
"y": 7
}
]
Using Array.prototype.find you can easily locate element you want (granted it will only return first found entry, so if your id can be non unique you should use filter instead) after which i remove id from the found object, and turn the rest of the data into desired format.
const data = [{"0": {"cols": 15, "id": "5-1564645705217", "rows": 7, "type": 0, "x": 0, "y": 0}, "1": {"cols": 15, "id": "5-1564645705217", "rows": 7, "type": 1, "x": 15, "y": 0}, "2": {"cols": 15, "id": "5-1564645705217", "rows": 8, "type": 2, "x": 0, "y": 7}, "id": "1zk66HvI97C03751LNQm"}, {"0": {"cols": 5, "id": "5-1564545", "rows": 7, "type": 0, "x": 0, "y": 0}, "1": {"cols": 5, "id": "5-1564545", "rows": 7, "type": 1, "x": 15, "y": 0}, "id": "8gdfg897C03751LNQm"}]
const searchId = "1zk66HvI97C03751LNQm";
const {id, ...elementFound} = data.find(({id})=> id === searchId) || {}; // skip id as unnecessary, return empty object in case of no entries matching search criteria
const elementParsed = Object.values(elementFound); // get values of other fields
console.log(elementParsed);
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>
I have two objects.
Scenario: I want a function that sums up two different objects which is stored in the local file, and returns an object in the same style as other two objects.
First JSON
{
"data": [{
"x": "Q1 (J, F, M)",
"y": [100, 500, 0],
"tooltip": "this is tooltip"
}, {
"x": "Q2(A, M, J)",
"y": [300, 100, 100]
}, {
"x": "Q3(J, A, S)",
"y": [351,200,700]
}, {
"x": "Q4 (Q, N, D)",
"y": [54, 0, 879]
}]
}
Second JSON
{
"data": [{
"x": "Q1 (J, F, M)",
"y": [100, 500, 200],
"tooltip": "this is tooltip"
}, {
"x": "Q2(A, M, J)",
"y": [300, 100, 100]
}, {
"x": "Q3(J, A, S)",
"y": [351,400,555]
}, {
"x": "Q4 (Q, N, D)",
"y": [54, 30, 879]
}]
}
result will be sum of both objects
{
"data": [{
"x": "Q1 (J, F, M)",
"y": [200, 1000, 200],
"tooltip": "this is tooltip"
}, {
"x": "Q2(A, M, J)",
"y": [600, 200, 200]
}, {
"x": "Q3(J, A, S)",
"y": [702,600,1255]
}, {
"x": "Q4 (Q, N, D)",
"y": [108, 30, 1758]
}]
}
Does anyone know of a solution to this?
Assuming your arrays have always the same number of elements (4 in the example, 1 for each quarter), then you could use this ES6 function:
function addObjects(obj1, obj2) {
return obj1.data.map( (o1, i) => Object.assign({}, o1,
{ y: o1.y.map( (n1, j) => n1 + obj2.data[i].y[j] ) }
));
}
// Sample data
var obj1 = {
"data": [{
"x": "Q1 (J, F, M)",
"y": [100, 500, 0],
"tooltip": "this is tooltip"
}, {
"x": "Q2(A, M, J)",
"y": [300, 100, 100]
}, {
"x": "Q3(J, A, S)",
"y": [351,200,700]
}, {
"x": "Q4 (Q, N, D)",
"y": [54, 0, 879]
}]
};
var obj2 = {
"data": [{
"x": "Q1 (J, F, M)",
"y": [100, 500, 200],
"tooltip": "this is tooltip"
}, {
"x": "Q2(A, M, J)",
"y": [300, 100, 100]
}, {
"x": "Q3(J, A, S)",
"y": [351,400,555]
}, {
"x": "Q4 (Q, N, D)",
"y": [54, 30, 879]
}]
};
console.log(addObjects(obj1, obj2));
.as-console-wrapper { max-height: 100% !important; top: 0; }
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
}
}],