We Keep Coding

Chart JS Shows wrong bars position in case of negative numbers in bar stacks Charts

I'm new to chart-js, I'm implementing Stacks bar charts in an app. everything work perfect , but in case of negative number bars are shown on wrong positions.
Click Here to see Image
In the Picture Downsell Should be before the churn , but on charts its displaying after the churn ,
Here is the code :
var ctx = document.getElementById('chartJSContainer').getContext('2d');
window.RevenueChangesByMonth = new Chart(ctx, {
"type": "bar",
"data": {
"labels": [
"Upsell",
"New",
"Downsell",
"Churn"
],
"datasets": [
{
"label": "New",
"type": "bar",
"order": 2,
"data": [
345,
842,
351,
155,
877,
705,
457,
224,
386,
689,
232,
332,
242,
142,
236,
342,
269,
232,
733,
247,
450,
306,
328,
345
],
"borderColor": "#a6cd95",
"backgroundColor": "#a6cd95"
},
{
"label": "Upsell",
"type": "bar",
"order": 1,
"data": [
586,
446,
868,
492,
324,
977,
301,
553,
254,
170,
919,
457,
226,
188,
356,
675,
136,
745,
646,
227,
821,
454,
315,
442
],
"borderColor": "#d3e7cb",
"backgroundColor": "#d3e7cb"
},
{
"label": "Downsell",
"type": "bar",
"order": -1,
"data": [
-13,
-64,
-94,
-66,
-24,
-37,
-33,
-81,
-75,
-18,
-26,
-18,
-34,
-94,
-97,
-82,
-93,
-15,
-51,
-47,
-22,
-90,
-54,
-68
],
"borderColor": "#fdcab6",
"backgroundColor": "#fdcab6"
},
{
"label": "Churn",
"type": "bar",
"order": -2,
"data": [
-72,
-81,
-23,
-66,
-88,
-100,
-34,
-71,
-96,
-10,
-47,
-42,
-1,
-64,
-70,
-33,
-74,
-88,
-33,
-22,
-55,
-5,
-93,
-15
],
"borderColor": "#ff6666",
"backgroundColor": "#ff6666"
}
]
},
"options": {
"animation": false,
"plugins": {
"title": {
"display": true,
"text": "Revenue Changes By Month"
},
"datalabels": {
"display": false
}
},
"tooltips": {
"mode": "index",
"intersect": true
},
"scales": {
"xAxes": {
"stacked": true
},
"yAxes": {
"stacked": true
}
},
"legend": {
"display": false
},
"maintainAspectRatio": false
}
});

How to draw the 3D cube using Javascript or SVG with given JSON?

I have JSON given below. Using this JSON need to create the 3D Box inside the 3D outline cube as shown in given image.I have this requirement but i am new in 3D kind of development. It will be great if someone can help on this. We can use skus array to create cube. Thanks in advance.
{
"request_id": "614bd0e3de7f3745708a9fa4",
"completed_time_UTC": "2022-02-06T20:56:19Z",
"tracks": [
{[![enter image description here][1]][1]
"purchase_orders": ["1153511"],
"vehicle_id": "be8c578a-c59c-4348-8148-50cfbeb5a6cd",
"vehicle_type": "TRAILER_48T",
"number_of_pallets": 14,
"pallets": [
{
"purchase_orders": ["1153511"],
"pallet_id": "fe76b310-d751-48eb-84f8-3ea47c7a94bd",
"pallet_type": "BLANCA",
"number_of_skus": 65,
"skus": [
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [0, 54, 26]
},
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [0, 0, 26]
},
{
"sku": "17503006575454",
"length": 26,
"width": 27,
"height": 26,
"position": [64, 59, 78]
},
{},
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [59, 54, 80]
}
]
},
{
"purchase_orders": ["1153511"],
"pallet_id": "e693e8bd-e841-4a05-8912-aa0e837ba256",
"pallet_type": "BLANCA",
"number_of_skus": 65,
"skus": [
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [0, 0, 0]
},
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [0, 0, 26]
},
{},
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [58, 54, 78]
}
]
}
]
}
],
"schemaName": "http://www.schema.org/logistics/1"
}

How can I iterate over this object to to get a new object?

I am relatively new to Javascript, and just learned basic for loops and for in loops. How can I iterate over this object to get certain keys and values? there are a bunch of nested objects in objects, so i am kind of confused. I was thinking of using some sort of "Object...()" method, but not sure which one to use.
desired output outcome is an object with the given champion key, followed by the champion id/name = {"266": "Aatrox", "103" : "Ahri"}
example input below
"type": "champion",
"format": "standAloneComplex",
"version": "10.16.1",
"data": {
"Aatrox": {
"version": "10.16.1",
"id": "Aatrox",
"key": "266",
"name": "Aatrox",
"title": "the Darkin Blade",
"blurb": "Once honored defenders of Shurima against the Void, Aatrox and his brethren would eventually become an even greater threat to Runeterra, and were defeated only by cunning mortal sorcery. But after centuries of imprisonment, Aatrox was the first to find...",
"info": {
"attack": 8,
"defense": 4,
"magic": 3,
"difficulty": 4
},
"image": {
"full": "Aatrox.png",
"sprite": "champion0.png",
"group": "champion",
"x": 0,
"y": 0,
"w": 48,
"h": 48
},
"tags": [
"Fighter",
"Tank"
],
"partype": "Blood Well",
"stats": {
"hp": 580,
"hpperlevel": 90,
"mp": 0,
"mpperlevel": 0,
"movespeed": 345,
"armor": 38,
"armorperlevel": 3.25,
"spellblock": 32.1,
"spellblockperlevel": 1.25,
"attackrange": 175,
"hpregen": 3,
"hpregenperlevel": 1,
"mpregen": 0,
"mpregenperlevel": 0,
"crit": 0,
"critperlevel": 0,
"attackdamage": 60,
"attackdamageperlevel": 5,
"attackspeedperlevel": 2.5,
"attackspeed": 0.651
}
},
"Ahri": {
"version": "10.16.1",
"id": "Ahri",
"key": "103",
"name": "Ahri",
"title": "the Nine-Tailed Fox",
"blurb": "Innately connected to the latent power of Runeterra, Ahri is a vastaya who can reshape magic into orbs of raw energy. She revels in toying with her prey by manipulating their emotions before devouring their life essence. Despite her predatory nature...",
"info": {
"attack": 3,
"defense": 4,
"magic": 8,
"difficulty": 5
},
"image": {
"full": "Ahri.png",
"sprite": "champion0.png",
"group": "champion",
"x": 48,
"y": 0,
"w": 48,
"h": 48
},
"tags": [
"Mage",
"Assassin"
],
"partype": "Mana",
"stats": {
"hp": 526,
"hpperlevel": 92,
"mp": 418,
"mpperlevel": 25,
"movespeed": 330,
"armor": 20.88,
"armorperlevel": 3.5,
"spellblock": 30,
"spellblockperlevel": 0.5,
"attackrange": 550,
"hpregen": 6.5,
"hpregenperlevel": 0.6,
"mpregen": 8,
"mpregenperlevel": 0.8,
"crit": 0,
"critperlevel": 0,
"attackdamage": 53.04,
"attackdamageperlevel": 3,
"attackspeedperlevel": 2,
"attackspeed": 0.668
}
}```

const obj = {
name: 'Sam',
old: 30,
nested: {
data: 'ABC',
time: '3:15'
}
}
for(let i in obj){
console.log(i); //returns values
console.log(obj[i]); //returns keys
for(let j in obj[i]){
console.log(j); //returns values of nested 2d level
console.log(obj[i][j]); //returns keys of nested 2d level
}
}

ClickMarker is not working in XY Amcharts

I have a requirement where I need to use customlegends in XY Amcharts.
I have implemented them, but When I have added event listeners to those legends, the function wasnt triggered. I dont know the reason, can anyone correct me what I have made a mistake.
You can check the following link for the output:
jsfiddle.net/u371jyjs/3/

clickMarker is a legend-specific event, not a top-level chart event. Put the listener for it inside the legend object:
legend: {
// ...
listeners: [{
"event": "clickMarker",
"method": function(event) {
// toggle the marker state
event.dataItem.hidden = !event.dataItem.hidden;
event.chart.validateNow();
}
}]
}
Demo:
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"path": "https://www.amcharts.com/lib/3/",
"theme": "light",
"dataProvider": [{
"y": 10,
"x": 2,
"value": 59,
"y2": 5,
"x2": 3,
"value2": 44,
"label": "Hello",
"category": "0",
"column-1": 32
}, {
"y": 5,
"x": 8,
"value": 50,
"y2": 15,
"x2": 8,
"value2": 12,
"label": "Hi",
"category": "1000",
"column-1": 14
}, {
"y": 10,
"x": 8,
"value": 19,
"y2": 4,
"x2": 6,
"value2": 35,
"label": "Yo"
}, {
"y": 6,
"x": 5,
"value": 65,
"y2": 5,
"x2": 6,
"value2": 168,
"label": "Howdy"
}, {
"y": 15,
"x": 4,
"value": 92,
"y2": 13,
"x2": 8,
"value2": 102,
"label": "Hi there"
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": 2,
"x2": 0,
"value2": 41,
"label": "Morning"
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": 3,
"value2": 16,
"label": "Afternoon"
}],
"valueAxes": [{
"position": "bottom",
"axisAlpha": 0,
"integersOnly": true,
//"labelRotation": 45,
"labelFunction": function(value) {
// define categories
var cats = [
"Nick",
"Sarah",
"Kevin",
"Dominick",
"Christy",
"Kate",
"Julian",
"Anita",
"Mike",
"Kyle",
"Tyrese"
];
return cats[value];
}
}, {
"axisAlpha": 0,
"position": "left"
}],
"startDuration": 1.5,
"graphs": [{
"balloonText": "[[label]]",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}, {
"balloonText": "[[label]]",
"bullet": "diamond",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value2",
"xField": "x2",
"yField": "y2",
"maxBulletSize": 100
}],
"legend": {
"switchable": true,
"textClickEnabled": true,
"data": [{
title: "One",
color: "#3366CC",
hidden: true
}, {
title: "Two",
color: "#FFCC33"
}],
"listeners": [{
"event": "clickMarker",
"method": function(event) {
event.dataItem.hidden = !event.dataItem.hidden;
event.chart.validateNow()
}
}]
}
});
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="clicked">
</div>

What is the correct way to edit the vertices of a box geometry?

So I'm editing the vertices of many box geometries to create unique shapes, or to modify the heights of the geometries. It works fine and my scenes look correct (here's an example http://imgur.com/sSx1bPk).
However, when I use the ObjectExporter and try to load the scene into http://threejs.org/editor/, none of my vertex changes are present. Also when I try to load the scene.json file into blender, I get an error (which I can't seem to copy/paste) which lists KeyError:'vertices'
Basically, I built a UI to edit the vertices of any box geometry, I save these edits into a matrix, then cross check that matrix when loading the scene. My function looks like this
setBaseTileVertices:function()
{
var scope = this;
scope.baseTiles.children.forEach(function(tile , t)
{
tile.geometry.vertices.forEach(function(vertex , v)
{
vertex.x = (tile.userData.vertices[v].x) ? tile.userData.vertices[v].x : vertex.x;
vertex.y = (tile.userData.vertices[v].y) ? tile.userData.vertices[v].y : vertex.y;
vertex.z = (tile.userData.vertices[v].z) ? tile.userData.vertices[v].z : vertex.z;
});
});
}
Is there some other more correct way to edit vertices so that the changes will be recognised by the editor and/or Blender? Am I using the right exporter? I tried used the THREE.SceneExporter but got errors as indicated here Three.js SceneExporter getting Uncaught Syntax error
Edit
After a bit of investigation, I've seen that in my output JSON, all my box geometries have a similar matrix value, while a square pyramid I created has the correct matrix. I guess I need to update the matrix of each geometry when I modify it. Not too sure how to do that right now but I think I'm on the right track.
Edit 2
Well it seems like the matrices for each of my geometries are getting updated, so I don't know what's going on now. The pyramid I've created renders fine, but all the box geometries just become flat, with no change to their vertices. Here's an example of how it looks in the editor http://imgur.com/oGury4e note that the bounding box helper knows the height of baseTiles which is an Object3D that contains each tile. It can only know this if its factoring in their edited vertices.
Edit 3
So I've done a test and modified lines 65 - 74 of ObjectExporter.js so that they now read
} else if ( geometry instanceof THREE.BoxGeometry ) {
data.type = 'Geometry';
data.data = geometryExporter.parse( geometry );
delete data.data.metadata;
//handleParameters( [ 'width', 'height', 'depth', 'widthSegments', 'heightSegments', 'depthSegments' ] );}
Now my level looks correct in terms of shape in the editor http://imgur.com/IDlYCJ6 however, seems like my colours or materials are not getting translated over? Everything is black, whereas the +Y faces of the geometries should be coloured green.
As requested here's an example from exporting with the non-edited ObjectExporter
{
"metadata": {
"version": 4.3,
"type": "Object",
"generator": "ObjectExporter"
},
"geometries": [{
"uuid": "25437534-318D-4BB9-9E97-207E390F1A8D",
"type": "BoxGeometry",
"width": 64,
"height": 32,
"depth": 64
}],
"materials": [{
"type": "MeshFaceMaterial",
"materials": [{
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "BCFDD918-A69C-4443-806A-A46E356C272C",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "4969265D-D0B2-4E4A-A60A-AB20EC541FD5",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "141153C7-C284-4120-9DB9-8386F4C90496",
"type": "MeshBasicMaterial",
"color": 6127158,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "B2CDDAE4-B690-41F7-84EC-377C73A7FF21",
"type": "MeshBasicMaterial",
"color": 6127158,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "0B21CD67-D4FA-447E-9CA1-56CA755C0872",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "3089DC93-85E8-42CD-BBE9-2D2A45441AB2",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}]
}],
"object": {
"uuid": "DE6BC181-ECA5-4B7A-85EA-64387C8B04E1",
"name": "tile_5_10",
"type": "Mesh",
"geometry": "25437534-318D-4BB9-9E97-207E390F1A8D",
"matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 640, 0, 320, 1]
}
}
And here is an example of the JSON (it's a different object so some values may be different) with my edits (box geometry is parsed as geometry, if I parse the entire scene like this, it gives this result http://imgur.com/IDlYCJ6)
{
"metadata": {
"version": 4.3,
"type": "Object",
"generator": "ObjectExporter"
},
"geometries": [{
"uuid": "4E8EFB7F-8225-4EAA-AE69-C25B23DDE642",
"type": "Geometry",
"data": {
"vertices": [32, 88, 32, 32, 88, -32, 32, -16, 32, 32, -16, -32, -32, 112, -32, -32, 112, 32, -32, -16, -32, -32, -16, 32],
"normals": [1, 0, 0, -1, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 1, 0, 0, -1],
"uvs": [
[0, 1, 0, 0, 1, 1, 1, 0]
],
"faces": [56, 0, 2, 1, 0, 1, 2, 0, 0, 0, 0, 56, 2, 3, 1, 1, 3, 2, 0, 0, 0, 0, 56, 4, 6, 5, 0, 1, 2, 1, 1, 1, 1, 56, 6, 7, 5, 1, 3, 2, 1, 1, 1, 1, 56, 4, 5, 1, 0, 1, 2, 2, 2, 2, 2, 56, 5, 0, 1, 1, 3, 2, 2, 2, 2, 2, 56, 7, 6, 2, 0, 1, 2, 3, 3, 3, 3, 56, 6, 3, 2, 1, 3, 2, 3, 3, 3, 3, 56, 5, 7, 0, 0, 1, 2, 4, 4, 4, 4, 56, 7, 2, 0, 1, 3, 2, 4, 4, 4, 4, 56, 1, 3, 4, 0, 1, 2, 5, 5, 5, 5, 56, 3, 6, 4, 1, 3, 2, 5, 5, 5, 5]
}
}],
"materials": [{
"type": "MeshFaceMaterial",
"materials": [{
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "E1E6A4F7-06B0-41E2-8131-F2E103D8F7F7",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "7D777F70-D279-4112-AD6F-FBAFCE1EE9E2",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "5BBC767A-F130-4F4D-8A5C-489C40D2F698",
"type": "MeshBasicMaterial",
"color": 6127158,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "F4F167E2-013E-4A6A-B7F1-80246DD15023",
"type": "MeshBasicMaterial",
"color": 6127158,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "CA2ADC0E-F20B-485B-B5D3-DE9B58A733B0",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "7BC988E6-B3A0-4BF2-B360-1C0F4976436F",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}]
}],
"object": {
"uuid": "809D131E-3F34-4DCB-8304-EDCA144BF1A6",
"name": "tile_9_9",
"type": "Mesh",
"geometry": "4E8EFB7F-8225-4EAA-AE69-C25B23DDE642",
"matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 576, 0, 576, 1]
}
}
Any ideas?

After a bunch of research, I've found that currently, the correct way to do this is to convert your BoxGeometry objects to BufferGeometry or regular Geometry objects. You can do this after editing their vertices.
So something like this
var box = new THREE.BoxGeometry(64 , 32 , 64);
box.verticesNeedUpdate = true;
box.vertices[0].y = 128;
box.vertices[1].y = 128;
var geometry = new THREE.BufferGeometry().fromGeometry(box);
//or alternatively
var geometry = new THREE.Geometry();
geometry.merge(box);
Now, if you export the object using the ObjectExporter it should load into http://threejs.org/editor fine.