javascript charting framework to plot two charts together

javascript charting framework to plot two charts together - javascript

I use highcharts to plot and it works great. Right now I have a requirement to plot two charts and they are binding (in some sense) together.
I didn't find this in highcharts demo, the closest one plotting two charts in the same plot. Is there a name to call this? Is there any existed charting framework to handle this?

Based on your link and the embedded image, it's not exactly clear what you’re asking for. However, there are quite a few charting libraries that could likely accomplish what you're looking for. The examples below were built with ZingChart.
It seems you're looking for shared tooltips. The included code snippet demonstrates this. Run the snippet to see the chart.
var myChart = {
"graphset": [{
"type": "line",
"id": "chart1",
"legend": {
"shared": true,
"layout": "h"
},
"plotarea": {
"margin": "35 50"
},
"scaleX": {
"zooming": true
},
"zoom": {
"shared": true
},
"crosshair-x": {
"shared": true,
"plot-label": {
"multiple": false
}
},
"scaleY": {
},
"plot": {
},
"tooltip": {
"visible": false
},
"series": [{
"values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
"text": "Apple"
}, {
"values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
"text": "Microsoft"
}, {
"values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
"text": "Oracle"
}, {
"values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
"text": "Dell"
}]
}, {
"type": "line",
"id": "chart2",
"legend": {
"visible": false,
"shared": true
},
"plotarea": {
"margin": "35 50"
},
"scaleX": {
"zooming": true
},
"zoom": {
"shared": true
},
"scaleY": {
},
"crosshair-x": {
"shared": true,
"plot-label": {
"multiple": false,
"visible": false,
"offset-x": 15
}
},
"plot": {
},
"tooltip": {
"visible": false
},
"series": [{
"values": [79, 65, 34, 41, 40, 64, 95, 72, 78, 64, 59, 49],
"text": "Apple"
}, {
"values": [53, 63, 57, 50, 49, 57, 74, 62, 66, 57, 69, 68],
"text": "Microsoft"
}, {
"values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
"text": "Oracle"
}, {
"values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
"text": "Dell"
}]
}]
};
zingchart.render({
id: "myChart",
height: "300px",
width: "100%",
data: myChart
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
It also allows you to share information across multiple charts. (This uses a preview chart for zooming.)
If your concern is more for creating two charts in one plot without the shared tooltips, you can see an example of that here.
If you’d like to clarify what you’re trying to do, or know more about these demos, please feel free to message me or reach out to support#zingchart.com, I’m on the ZingChart team and happy to discuss.

you are probably looking for stock charts, amCharts would be a great alternative which is really easy to handle

Related

How to change the entire color of the selected stack bar on a click event in highchart

I am using a combination of stack bar and line chart at the same with the help of HighChart, I want to be able to select a bar(or in my case the entire stack bar as well as the point in the line graph) and change its color when I click on it,
Right now I am able to select a bar and change its color but not able to change the color of both bars and the point of the line which was clicked
Below is the click of the code which I tried from my end, I want to be able to select the entire bar and line when clicked, but I am only able to select one of them
SandBox Link

I tried this sorry that the sandbox link was broken
Highcharts.chart('container', {
"chart": {
"zoomType": "xy",
"height": 320
},
"credits": {
"enabled": false
},
"title": {
"text": "",
"align": "left",
"style": {
"fontFamily": "Poppins, Helvetica, \"sans-serif\"",
"fontWeight": "600"
}
},
"xAxis": {
"title": {
"text": ""
},
"categories": [
"0.01-0.05",
"0.06-0.10",
"0.11-0.15",
"0.16-0.20",
"0.21-0.25",
"0.26-0.30",
"0.31-0.35",
"0.36-0.40",
"0.41-0.45",
"0.46-0.50",
"0.51-0.55",
"0.56-0.60",
"0.61-0.65",
"0.66-0.70",
"0.71-0.75",
"0.76-0.80",
"0.81-0.85",
"0.86-0.90",
"0.91-0.95",
"0.96-1.00"
],
"crosshair": true,
"plotLines": [{
"color": "#A9A9A9",
"width": 3,
"value": 9.5,
"dashStyle": "longdashdot"
}]
},
"yAxis": [{
"title": {
"text": "Count"
},
"min": 0
},
{
"title": {
"text": "y1 count"
},
"opposite": true,
"min": 0
}
],
"tooltip": {
"shared": true
},
plotOptions: {
series: {
stacking: 'normal',
point: {
events: {
click() {
var indexP = this.x,
series = this.series.chart.series;
if (series[0].data[indexP].selected) {
//unselect
series[0].data[indexP].select(false, true);
series[1].data[indexP].select(false, true);
} else {
var i = 0;
var len = series[1].data.length;
for (i = 0; i < len; i++) { //clear all selection
series[0].data[i].select(false, true);
series[1].data[i].select(false, true);
series[2].data[i].select(false, true);
}
//select
series[0].data[indexP].select(true, true);
series[1].data[indexP].select(true, true);
series[2].data[indexP].select(true, true);
}
return false;
}
}
}
}
},
"legend": {
"layout": "horizontal",
"align": "right",
"verticalAlign": "top"
},
"exporting": {
"enabled": false
},
"series": [{
"name": "y1",
"type": "column",
"stack": 1,
"yAxis": 1,
"color": "rgb(217, 141, 39)",
"data": [
1,
13,
24,
25,
34,
74,
104,
66,
104,
121,
111,
89,
87,
97,
93,
92,
100,
147,
250,
567
],
"tooltip": {
"valueSuffix": " "
}
},
{
"name": "y3",
"type": "column",
"stack": 1,
"yAxis": 1,
"color": "rgb(44, 99, 143)",
"data": [
463,
287,
208,
201,
209,
197,
171,
150,
134,
102,
65,
50,
36,
24,
33,
20,
13,
13,
10,
9
],
"tooltip": {
"valueSuffix": ""
}
},
{
"name": "y3",
"type": "line",
"color": "#F1416C",
"data": [
1,
14,
38,
63,
97,
171,
275,
341,
445,
566,
677,
766,
853,
950,
1043,
1135,
1235,
1382,
1632,
2199
],
"tooltip": {
"valueSuffix": " "
}
}
]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>

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"
}

Chart.js max legend height

My scenario is:
I'm using phantomjs to generate fixed-size chart images, rendered using chart.js.
I've noticed that when there are too many labels, the legend starts to take up more and more of the availble (fixed) screen space, until the chart is practically invisible, as seen here:
Is there some way to forcibly limit the legend height? Or to set a hard minimum for the chart area height? From debugging and looking at the code here: https://github.com/chartjs/Chart.js/blob/v2.6.0/src/plugins/plugin.legend.js and here: https://github.com/chartjs/Chart.js/blob/v2.6.0/src/core/core.layoutService.js, I'm not seeing anything useful. Hope I missed something.
Using v2.6.0, and here is the chart definition JSON I'm using:
{
"type": "line",
"title": "DaTitle",
"xLabel": "DaLabel",
"yLabel": "DaYLabel",
"data": {
"labels": ["Time0", "Time1", "Time2", "Time3", "Time4", "Time5", "Time6", "Time7", "Time8", "Time9", "Time10", "Time11", "Time12", "Time13", "Time14", "Time15", "Time16", "Time17", "Time18", "Time19"],
"datasets": [{
"label": "RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR",
"data": [45, 19, 70, 96, 8, 44, 49, 3, 10, 75, 71, 80, 29, 44, 22, 30, 59, 67, 17, 34]
}, {
"label": "2222222222222222222222222222222222222222222222222222222222222222",
"data": [9, 60, 19, 71, 4, 47, 14, 35, 44, 2, 92, 8, 89, 73, 98, 15, 3, 41, 81, 20]
}, {
"label": "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD",
"data": [39, 73, 50, 32, 11, 17, 17, 1, 76, 76, 53, 0, 58, 41, 0, 5, 22, 38, 79, 16]
}, {
"label": "2222222222222222222222222222222222222222222222222222222222222222",
"data": [5, 6, 2, 87, 27, 6, 40, 17, 8, 27, 24, 57, 2, 2, 13, 52, 25, 24, 49, 61]
}, {
"label": "RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR",
"data": [72, 73, 82, 71, 0, 37, 31, 22, 88, 63, 81, 22, 63, 54, 89, 30, 47, 49, 5, 77]
}, {
"label": "2222222222222222222222222222222222222222222222222222222222222222",
"data": [95, 86, 96, 3, 64, 62, 47, 90, 21, 57, 14, 32, 29, 94, 29, 9, 82, 39, 79, 39]
}, {
"label": "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD",
"data": [59, 56, 73, 58, 99, 61, 0, 17, 97, 89, 49, 67, 81, 49, 22, 99, 89, 30, 86, 81]
}, {
"label": "2222222222222222222222222222222222222222222222222222222222222222",
"data": [5, 72, 51, 40, 97, 56, 40, 13, 0, 60, 65, 86, 58, 95, 67, 84, 4, 48, 37, 36]
}, {
"label": "RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR",
"data": [48, 80, 85, 84, 53, 65, 64, 87, 56, 0, 96, 90, 76, 36, 37, 91, 25, 37, 72, 36]
}, {
"label": "2222222222222222222222222222222222222222222222222222222222222222",
"data": [31, 84, 1, 12, 67, 74, 27, 86, 70, 38, 44, 27, 22, 57, 67, 39, 3, 1, 26, 44]
}, {
"label": "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD",
"data": [70, 66, 99, 63, 99, 26, 3, 71, 28, 91, 81, 28, 70, 46, 2, 57, 84, 51, 77, 15]
}, {
"label": "2222222222222222222222222222222222222222222222222222222222222222",
"data": [86, 92, 58, 98, 97, 25, 32, 69, 76, 94, 71, 85, 40, 15, 58, 56, 57, 9, 98, 97]
}, {
"label": "RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR",
"data": [4, 93, 76, 92, 9, 35, 96, 76, 54, 61, 21, 56, 71, 18, 79, 4, 90, 42, 77, 93]
}, {
"label": "2222222222222222222222222222222222222222222222222222222222222222",
"data": [78, 16, 40, 44, 11, 23, 93, 63, 94, 78, 57, 77, 75, 15, 63, 21, 12, 59, 56, 99]
}, {
"label": "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD",
"data": [85, 24, 28, 31, 17, 8, 10, 7, 60, 89, 36, 44, 8, 99, 49, 28, 6, 50, 43, 43]
}, {
"label": "2222222222222222222222222222222222222222222222222222222222222222",
"data": [46, 17, 73, 71, 66, 97, 84, 6, 12, 13, 38, 25, 40, 4, 36, 32, 65, 65, 3, 45]
}, {
"label": "RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR",
"data": [92, 43, 10, 40, 19, 34, 12, 48, 64, 89, 62, 61, 37, 25, 33, 31, 93, 83, 13, 16]
}, {
"label": "2222222222222222222222222222222222222222222222222222222222222222",
"data": [80, 34, 77, 13, 57, 42, 6, 69, 41, 5, 47, 76, 55, 43, 24, 52, 37, 69, 92, 78]
}, {
"label": "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD",
"data": [92, 62, 49, 59, 36, 15, 94, 5, 3, 13, 12, 2, 89, 14, 53, 49, 78, 36, 63, 77]
}, {
"label": "2222222222222222222222222222222222222222222222222222222222222222",
"data": [79, 42, 90, 42, 75, 49, 96, 33, 53, 18, 63, 44, 27, 87, 92, 89, 30, 27, 72, 5]
}, {
"label": "Example",
"data": [41, 32, 7, 16, 73, 8, 60, 63, 44, 72, 73, 53, 47, 50, 7, 48, 48, 61, 52, 1]
}, {
"label": "Linear",
"data": [87, 91, 61, 80, 97, 19, 99, 93, 88, 17, 94, 79, 64, 87, 36, 75, 82, 53, 39, 84]
}, {
"label": "Interpolation",
"data": [30, 77, 18, 39, 67, 10, 19, 70, 76, 72, 66, 60, 87, 37, 43, 56, 89, 22, 2, 94]
}]
}
}

I managed to do a stupid little hack to get exactly what I wanted, and it's good enough for me, though it might be a little too hacky for other people's tastes:
Chart.Legend.prototype.afterFit = function () {
console.log('Before afterFit: ' + JSON.stringify(this.minSize) + ' ' + this.height);
this.minSize.height = this.height = 100;
console.log('After afterFit: ' + JSON.stringify(this.minSize) + ' ' + this.height);
}
console log is:
Before afterFit: {"width":1664,"height":527} 527
After afterFit: {"width":1664,"height":100} 100
Before afterFit: {"width":1664,"height":527} 527
After afterFit: {"width":1664,"height":100} 100
And the result:
I suppose to do this more cleanly, I should probably extend the Legend to override its afterFit behaviour. Will look into it, and I'll update here if it's possible to do it without too much hassle.
EDIT 19/10/2017:
Here is a "nicer" way to do this, which will look to a user like it was a built-in feature:
var origAfterFit = Chart.Legend.prototype.afterFit;
Chart.Legend.prototype.afterFit = function () {
origAfterFit.call(this);
if (this.options && this.options.maxSize) {
var maxSize = this.options.maxSize;
if (maxSize.height !== undefined) {
this.height = Math.min(this.height, maxSize.height);
this.minSize.height = Math.min(this.minSize.height, this.height);
}
if (maxSize.width !== undefined) {
this.width = Math.min(this.width, maxSize.width);
this.minSize.width = Math.min(this.minSize.width, this.width);
}
}
};
And example chart descriptor json:
{
"type" : "line",
"data" : {},
"options" : {
"legend" : {
"position" : "bottom",
"maxSize" : {
"height" : 200
},
"labels" : {
"usePointStyle" : true
}
}
}
}

JQuery .sort() JavaScript Object by property value not working

I'm building a game which has a number of NPCs. these NPCs are contained within an array of objects like below:
"[
{
"name": "Stella",
"gender": "Female",
"trait": "Strategic",
"traitid": 3,
"relationship": [
78,
86,
17,
64,
22,
65,
22,
15,
94,
16,
90,
34,
19,
90,
74,
33,
53,
46,
12,
93,
18,
97,
72,
57
],
"power": 100,
"startingnum": 10
},
{
"name": "Sue",
"gender": "Female",
"trait": "Strategic",
"traitid": 3,
"relationship": [
72,
39,
89,
48,
74,
26,
93,
37,
48,
17,
79,
39,
82,
56,
15,
14,
10,
52,
67,
100,
19,
21,
76,
29
],
"power": 88.599348534202,
"startingnum": 12
},
{
"name": "Adam",
"gender": "Male",
"trait": "Logistical",
"traitid": 0,
"relationship": [
60,
71,
33,
72,
31,
90,
20,
71,
28,
93,
45,
57,
98,
46,
85,
92,
33,
18,
19,
66,
77,
31,
14,
26
],
"power": 80.94462540716614,
"startingnum": 1
},
{
"name": "Lela",
"gender": "Female",
"trait": "Diplomatic",
"traitid": 2,
"relationship": [
75,
61,
54,
74,
81,
47,
55,
83,
30,
39,
73,
21,
58,
67,
93,
79,
46,
12,
100,
72,
66,
18,
73,
47
],
"power": 80.13029315960914,
"startingnum": 8
},
{
"name": "Fanny",
"gender": "Female",
"trait": "Diplomatic",
"traitid": 2,
"relationship": [
38,
61,
61,
29,
45,
77,
17,
56,
88,
44,
48,
65,
82,
49,
64,
79,
95,
61,
98,
41,
53,
73,
87,
39
],
"power": 76.38436482084691,
"startingnum": 18
},
{
"name": "Bernice",
"gender": "Female",
"trait": "Diplomatic",
"traitid": 2,
"relationship": [
99,
82,
60,
35,
59,
22,
80,
41,
26,
64,
76,
75,
47,
86,
19,
12,
38,
81,
88,
78,
23,
34,
12,
38
],
"power": 67.75244299674269,
"startingnum": 5
},
{
"name": "Charlotte",
"gender": "Female",
"trait": "Logistical",
"traitid": 0,
"relationship": [
99,
30,
90,
34,
24,
71,
15,
86,
61,
40,
79,
55,
86,
19,
90,
41,
91,
98,
22,
13,
14,
92,
91,
39
],
"power": 64.33224755700327,
"startingnum": 19
},
{
"name": "Myrtie",
"gender": "Female",
"trait": "Tactical",
"traitid": 1,
"relationship": [
24,
32,
26,
93,
46,
93,
70,
78,
92,
69,
46,
18,
83,
42,
67,
46,
86,
73,
83,
20,
43,
66,
66,
54
],
"power": 61.56351791530946,
"startingnum": 0
},
{
"name": "Lily",
"gender": "Female",
"trait": "Logistical",
"traitid": 0,
"relationship": [
57,
66,
95,
67,
36,
61,
95,
85,
38,
72,
84,
97,
45,
12,
88,
16,
32,
26,
84,
72,
50,
13,
97,
39
],
"power": 61.07491856677526,
"startingnum": 21
},
{
"name": "Willie",
"gender": "Male",
"trait": "Strategic",
"traitid": 3,
"relationship": [
50,
89,
26,
24,
76,
95,
71,
62,
79,
33,
37,
33,
93,
10,
16,
24,
26,
38,
41,
60,
40,
70,
85,
46
],
"power": 51.79153094462542,
"startingnum": 13
},
{
"name": "Madge",
"gender": "Female",
"trait": "Strategic",
"traitid": 3,
"relationship": [
14,
57,
35,
68,
65,
27,
72,
24,
86,
94,
64,
39,
73,
94,
26,
41,
10,
88,
23,
85,
56,
88,
45,
46
],
"power": 51.62866449511403,
"startingnum": 3
},
{
"name": "Dollie",
"gender": "Female",
"trait": "Strategic",
"traitid": 3,
"relationship": [
30,
81,
57,
22,
82,
54,
60,
14,
56,
45,
79,
33,
46,
89,
52,
56,
89,
78,
36,
63,
31,
31,
15,
36
],
"power": 49.67426710097722,
"startingnum": 2
},
{
"name": "Dennis",
"gender": "Male",
"trait": "Tactical",
"traitid": 1,
"relationship": [
68,
17,
39,
34,
87,
17,
20,
81,
74,
62,
99,
88,
25,
92,
33,
51,
17,
87,
66,
100,
99,
89,
12,
58
],
"power": 44.46254071661239,
"startingnum": 7
},
{
"name": "Inez",
"gender": "Female",
"trait": "Tactical",
"traitid": 1,
"relationship": [
80,
79,
56,
73,
25,
51,
29,
71,
74,
95,
69,
12,
54,
79,
72,
100,
72,
19,
66,
15,
95,
41,
14,
39
],
"power": 41.04234527687297,
"startingnum": 22
},
{
"name": "Harry",
"gender": "Male",
"trait": "Logistical",
"traitid": 0,
"relationship": [
72,
52,
69,
94,
10,
24,
77,
65,
56,
51,
17,
20,
31,
39,
24,
28,
85,
51,
34,
34,
64,
70,
67,
29
],
"power": 39.90228013029318,
"startingnum": 16
},
{
"name": "Ronald",
"gender": "Male",
"trait": "Logistical",
"traitid": 0,
"relationship": [
63,
99,
63,
68,
45,
58,
71,
24,
13,
20,
77,
83,
35,
36,
51,
74,
100,
46,
70,
74,
42,
55,
38,
41
],
"power": 37.133550488599354,
"startingnum": 9
},
{
"name": "Isabella",
"gender": "Female",
"trait": "Strategic",
"traitid": 3,
"relationship": [
55,
76,
72,
83,
31,
48,
94,
65,
61,
39,
31,
63,
94,
82,
38,
50,
37,
15,
24,
54,
24,
32,
92,
49
],
"power": 35.99348534201956,
"startingnum": 14
},
{
"name": "Steve",
"gender": "Male",
"trait": "Diplomatic",
"traitid": 2,
"relationship": [
85,
79,
47,
29,
28,
13,
14,
48,
75,
55,
71,
20,
76,
53,
13,
88,
91,
26,
79,
47,
50,
75,
70,
29
],
"power": 32.736156351791536,
"startingnum": 15
},
{
"name": "Clara",
"gender": "Female",
"trait": "Diplomatic",
"traitid": 2,
"relationship": [
26,
59,
92,
76,
27,
93,
15,
40,
97,
69,
78,
23,
77,
21,
18,
13,
12,
34,
57,
100,
32,
21,
13,
54
],
"power": 31.433224755700323,
"startingnum": 20
},
{
"name": "Wesley",
"gender": "Male",
"trait": "Logistical",
"traitid": 0,
"relationship": [
29,
88,
19,
50,
13,
89,
24,
11,
63,
19,
28,
82,
71,
59,
26,
63,
49,
66,
94,
36,
86,
18,
47,
36
],
"power": 27.035830618892504,
"startingnum": 11
},
{
"name": "Douglas",
"gender": "Male",
"trait": "Diplomatic",
"traitid": 2,
"relationship": [
19,
41,
20,
67,
14,
93,
31,
63,
60,
54,
85,
68,
89,
50,
65,
69,
77,
23,
86,
10,
38,
87,
16,
40
],
"power": 25.89576547231271,
"startingnum": 17
},
{
"name": "Fannie",
"gender": "Female",
"trait": "Tactical",
"traitid": 1,
"relationship": [
77,
19,
80,
13,
21,
42,
44,
96,
66,
40,
72,
47,
45,
69,
53,
52,
60,
64,
33,
95,
88,
79,
52,
42
],
"power": 24.429967426710103,
"startingnum": 6
},
{
"name": "Isaac",
"gender": "Male",
"trait": "Tactical",
"traitid": 1,
"relationship": [
37,
75,
63,
53,
89,
73,
17,
31,
34,
42,
96,
72,
70,
28,
49,
50,
25,
22,
100,
46,
18,
87,
67,
52
],
"power": 11.400651465798038,
"startingnum": 4
},
{
"name": "You",
"gender": "squid",
"trait": "none",
"traitid": -1,
"power": 0,
"startingnum": 24,
"relationship": [
73,
60,
44,
49,
41,
89,
46,
28,
95,
58,
93,
24,
67,
52,
92,
32,
13,
37,
89,
23,
69,
89,
33,
37
]
}
]"
Etc. I'm trying to sort this array by the power level of each user(object). I'm using the code below to sort it:
function SortByPower(obj1, obj2) {
// Ascending: first power more than the previous
return obj2.power - obj1.power;
};
users.sort(SortByPower);//sort the users by power
However, it seems to either only be shifting the positions of the power values, or everything else. You can see what's going on and view it in action at labs.questionable.co.nz/projects/raise. Things you can use in the log:
updateplc() (sorts the users in the array, then sends it to the table)
users (shows the variable which contains all 24 users)

If you can use lodash it will would be something like this (taken from lodash documentation)
_.sortBy([1, 2, 3], function(num) { return Math.sin(num); });
// → [3, 1, 2]
_.sortBy([1, 2, 3], function(num) { return this.sin(num); }, Math);
// → [3, 1, 2]
var characters = [
{ 'name': 'barney', 'age': 36 },
{ 'name': 'fred', 'age': 40 },
{ 'name': 'barney', 'age': 26 },
{ 'name': 'fred', 'age': 30 }
];
// using "_.pluck" callback shorthand
_.map(_.sortBy(characters, 'age'), _.values);
// → [['barney', 26], ['fred', 30], ['barney', 36], ['fred', 40]]
// sorting by multiple properties
_.map(_.sortBy(characters, ['name', 'age']), _.values);
// = > [['barney', 26], ['barney', 36], ['fred', 30], ['fred', 40]]
An excellent example of what you are trying to do is the accepted answer on here: Sorting JavaScript Object by property value

We Keep Coding

JavaScript is the programming language of the Web.

javascript charting framework to plot two charts together - javascript

you are probably looking for stock charts, amCharts would be a great alternative which is really easy to handle

Related

How to change the entire color of the selected stack bar on a click event in highchart

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

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

Chart.js max legend height

JQuery .sort() JavaScript Object by property value not working

Categories

Resources