Related
I have a 2d array in the following format:
export const dataBubble = [
[0, 0, 0],
[0, 1, 0],
[0, 2, 0],
[0, 3, 0],
[0, 4, 0],
[0, 5, 0],
[0, 6, 0],
[0, 7, 0],
[0, 8, 0],
[0, 9, 0],
[0, 10, 0],
[1, 0, 6],
[1, 1, 8],
[1, 2, 5],
[1, 3, 6],
[1, 4, 1],
[1, 5, 4],
[1, 6, 5],
[1, 7, 5],
[1, 8, 4],
[1, 9, 3],
[1, 10, 9],
[2, 0, 5],
[2, 1, 5],
[2, 2, 5],
[2, 3, 6],
[2, 4, 8],
[2, 5, 7],
[2, 6, 8],
[2, 7, 5],
[2, 8, 4],
[2, 9, 2],
[2, 10, 8],
[3, 0, 9],
[3, 1, 5],
[3, 2, 9],
[3, 3, 8],
[3, 4, 5],
[3, 5, 4],
[3, 6, 2],
[3, 7, 5],
[3, 8, 7],
[3, 9, 6],
[3, 10, 3],
[4, 0, 7],
[4, 1, 3],
[4, 2, 9],
[4, 3, 5],
[4, 4, 11],
[4, 5, 6],
[4, 6, 7],
[4, 7, 6],
[4, 8, 4],
[4, 9, 4],
[4, 10, 5],
[5, 0, 1],
[5, 1, 3],
[5, 2, 6],
[5, 3, 8],
[5, 4, 5],
[5, 5, 5],
[5, 6, 4],
[5, 7, 8],
[5, 8, 9],
[5, 9, 2],
[5, 10, 4],
[6, 0, 2],
[6, 1, 1],
[6, 2, 0],
[6, 3, 3],
[6, 4, 8],
[6, 5, 5],
[6, 6, 6],
[6, 7, 2],
[6, 8, 5],
[6, 9, 6],
[6, 10, 4],
[7, 0, 1],
[7, 1, 0],
[7, 2, 5],
[7, 3, 0],
[7, 4, 5],
[7, 5, 8],
[7, 6, 9],
[7, 7, 0],
[7, 8, 7],
[7, 9, 8]
];
We need to reverse the array elements based on the first two elements of the inner array, such that the resultant array becomes:
[
[0,10,0],
[0,9,0],
[0,8,0],
[0,7,0],
[0,6,0],
[0,5,0],
[0,4,0],
[0,3,0],
[0,2,0],
[0,1,0],
[1,10,9],
[1,9,3],
[1,8,4],
[1,7,5],
.
.
.
.
.
.
.
.
.
[7,0,1]
I use this in a react js project, so is there anyway we can use the JS map function of an array to do it? If not what will be the optimal solution?
If your second value is guaranteed to be less than an amount (for example I assumed 1000 in this case) then you can do this:
dataBubble.sort((x, y) => (x[0] - y[0])*1000 + y[1] - x[1]);
Basically we sum them up, but give the first element a higher coefficient, thus making it the primary sorter.
Otherwise, you need to involve an if check:
dataBubble.sort((x, y) => {
if(x[0] == y[0]) {
return y[1] - x[1];
} else {
return x[0] - y[0];
}
});
If you return a negative value from the sort function, JS will put x before y. Otherwise it will put x after y.
If x[0] and y[0] are equal, we need to sort depending on x[1] and y[1]. y[1] - x[1] will be negative if x[1] is larger, therefore if x[1] is larger x will come before y.
If x[0] and y[0] are different we need to sort based on them. x[0] - y[0] will be negative if x[0] is smaller, therefore if x[0] is smaller, x will come before y.
I am working with HighCharts JS, and am encountering some odd behavior. I am creating a basic heatmap, with days of week, and hours per day. It works great except for an odd "extra" parameter oddly labeled 24 (see screenshot)
Also note the "extra space" at the bottom. My yAxis parameters:
yAxis: {
categories: ['12am',
'1am',
'2am',
'3am',
'4am',
'5am',
'6am',
'7am',
'8am',
'9am',
'10am',
'11am',
'12pm',
'1pm',
'2pm',
'3pm',
'4pm',
'5pm',
'6pm',
'7pm',
'8pm',
'9pm',
'10pm',
'11pm'],
Note that there are 24 parameters, but none are labeled 24. I am thoroughly confused. See my full snippet below, (also note that I have exactly 24 plot points for the Y Axis in my snippet. What am I doing wrong?
Highcharts.chart('users_by_day', {
chart: {
type: 'heatmap',
marginTop: 15,
marginBottom: 40,
plotBorderWidth: 1
},
exporting: {
enabled: true
},
title: false,
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
},
yAxis: {
categories: ['12am',
'1am',
'2am',
'3am',
'4am',
'5am',
'6am',
'7am',
'8am',
'9am',
'10am',
'11am',
'12pm',
'1pm',
'2pm',
'3pm',
'4pm',
'5pm',
'6pm',
'7pm',
'8pm',
'9pm',
'10pm',
'11pm'],
title: null,
reversed: true
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 24,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + getPointCategoryName(this.point, 'y') + ', ' + getPointCategoryName(this.point, 'x') + '<br />' +
this.point.value + '</b> Visitors <b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
//data: graph_data,
data: [
[0, 0, 0],
[1, 0, 1],
[2, 0, 1],
[3, 0, 1],
[4, 0, 0],
[5, 0, 0],
[6, 0, 1],
[0, 1, 1],
[1, 1, 0],
[2, 1, 0],
[3, 1, 0],
[4, 1, 0],
[5, 1, 0],
[6, 1, 0],
[0, 2, 0],
[1, 2, 0],
[2, 2, 0],
[3, 2, 1],
[4, 2, 0],
[5, 2, 0],
[6, 2, 0],
[0, 3, 0],
[1, 3, 0],
[2, 3, 0],
[3, 3, 0],
[4, 3, 0],
[5, 3, 0],
[6, 3, 0],
[0, 4, 0],
[1, 4, 0],
[2, 4, 0],
[3, 4, 0],
[4, 4, 0],
[5, 4, 0],
[6, 4, 0],
[0, 5, 0],
[1, 5, 0],
[2, 5, 1],
[3, 5, 0],
[4, 5, 0],
[5, 5, 1],
[6, 5, 0],
[0, 6, 0],
[1, 6, 0],
[2, 6, 3],
[3, 6, 0],
[4, 6, 2],
[5, 6, 1],
[6, 6, 0],
[0, 7, 0],
[1, 7, 0],
[2, 7, 1],
[3, 7, 0],
[4, 7, 3],
[5, 7, 2],
[6, 7, 0],
[0, 8, 3],
[1, 8, 2],
[2, 8, 3],
[3, 8, 0],
[4, 8, 4],
[5, 8, 3],
[6, 8, 1],
[0, 9, 4],
[1, 9, 4],
[2, 9, 4],
[3, 9, 4],
[4, 9, 5],
[5, 9, 0],
[6, 9, 1],
[0, 10, 1],
[1, 10, 1],
[2, 10, 1],
[3, 10, 4],
[4, 10, 7],
[5, 10, 1],
[6, 10, 1],
[0, 11, 2],
[1, 11, 0],
[2, 11, 5],
[3, 11, 2],
[4, 11, 5],
[5, 11, 5],
[6, 11, 0],
[0, 12, 0],
[1, 12, 3],
[2, 12, 7],
[3, 12, 22],
[4, 12, 5],
[5, 12, 2],
[6, 12, 0],
[0, 13, 0],
[1, 13, 3],
[2, 13, 3],
[3, 13, 2],
[4, 13, 3],
[5, 13, 2],
[6, 13, 0],
[0, 14, 1],
[1, 14, 1],
[2, 14, 0],
[3, 14, 0],
[4, 14, 20],
[5, 14, 2],
[6, 14, 0],
[0, 15, 1],
[1, 15, 4],
[2, 15, 1],
[3, 15, 0],
[4, 15, 2],
[5, 15, 2],
[6, 15, 0],
[0, 16, 3],
[1, 16, 1],
[2, 16, 1],
[3, 16, 0],
[4, 16, 1],
[5, 16, 0],
[6, 16, 0],
[0, 17, 1],
[1, 17, 0],
[2, 17, 1],
[3, 17, 0],
[4, 17, 0],
[5, 17, 1],
[6, 17, 0],
[0, 18, 1],
[1, 18, 2],
[2, 18, 1],
[3, 18, 1],
[4, 18, 2],
[5, 18, 2],
[6, 18, 0],
[0, 19, 0],
[1, 19, 0],
[2, 19, 2],
[3, 19, 3],
[4, 19, 1],
[5, 19, 0],
[6, 19, 1],
[0, 20, 1],
[1, 20, 1],
[2, 20, 1],
[3, 20, 3],
[4, 20, 1],
[5, 20, 1],
[6, 20, 0],
[0, 21, 1],
[1, 21, 1],
[2, 21, 1],
[3, 21, 2],
[4, 21, 0],
[5, 21, 4],
[6, 21, 0],
[0, 22, 0],
[1, 22, 0],
[2, 22, 1],
[3, 22, 0],
[4, 22, 0],
[5, 22, 0],
[6, 22, 0],
[0, 23, 0],
[1, 23, 0],
[2, 23, 0],
[3, 23, 1],
[4, 23, 1],
[5, 23, 1],
[6, 23, 0]
],
dataLabels: {
enabled: false,
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
xAxis: {
labels: {
formatter: function () {
return this.value.charAt(0) + this.value.charAt(1)+ this.value.charAt(2);
}
}
}
}
}]
}
});
function getPointCategoryName(point, dimension) {
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="users_by_day"></div>
To anyone who runs into this issue .. It will label the number of fields you have at the bottom if the graph is too tall for the parent div. I made it (the parent div) 50px taller and solved the issue.
How can i increment one value of my matrix (using the math module; https://mathjs.org/)? The only way, I came up with, was the following (and this can't be the correct/easiest solution...):
matrix = math.ones(2, 2, 2, 2, 2)
//starting matrix: [[[[[1, 1], [1, 1]], [[1, 1], [1, 1]]], [[[1, 1], [1, 1]], [[1, 1], [1, 1]]]], [[[[1, 1], [1, 1]], [[1, 1], [1, 1]]], [[[1, 1], [1, 1]], [[1, 1], [1, 1]]]]]
matrix = math.subset(matrix, math.index(0, 0, 0, 0, 0), math.add(math.subset(matrix, math.index(0, 0, 0, 0, 0)), 1));
console.log(math.print('$x', {x: matrix}));
//output: [[[[[2, 1], [1, 1]], [[1, 1], [1, 1]]], [[[1, 1], [1, 1]], [[1, 1], [1, 1]]]], [[[[1, 1], [1, 1]], [[1, 1], [1, 1]]], [[[1, 1], [1, 1]], [[1, 1], [1, 1]]]]]
I've tried all the answers I could find here but I'm lost. I'm making a simple flask app to query a database and present information to my client. I'd like to use google charts but when I output a simple chart it shows up far down the page. I want it to align in the center at the top how can I achieve this without linking to external css? I've tried everything I could find so here is a cleaned up version of my html.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Patients');
data.addColumn('number', 'Date');
data.addRows([
['05/29', 26],
['05/30', 16],
['06/01', 32],
['06/02', 15],
['06/03', 23],
['06/04', 6],
['06/05', 16],
['06/06', 21],
['06/08', 29],
['06/09', 21],
['06/10', 19],
['06/11', 14],
['06/12', 14],
['06/13', 10],
['06/15', 17],
['06/16', 17],
['06/17', 12],
['06/18', 9],
['06/19', 9],
['06/20', 9],
['06/22', 8],
['06/23', 16],
['06/24', 9],
['06/25', 8],
['06/26', 6],
['06/27', 6],
['06/29', 2],
['06/30', 1],
['07/01', 1],
['07/02', 1],
['07/06', 9],
['07/07', 10],
['07/08', 8],
['07/09', 8],
['07/10', 11],
['07/11', 8],
['07/13', 7],
['07/14', 9],
['07/15', 8],
['07/16', 7],
['07/17', 8],
['07/18', 3],
['07/20', 8],
['07/21', 6],
['07/22', 1],
['07/23', 2],
['07/24', 6],
['07/25', 7],
['07/27', 4],
['07/28', 2],
['07/29', 3],
['07/30', 1],
['07/31', 5],
['08/01', 7],
['08/03', 6],
['08/04', 7],
['08/05', 7],
['08/06', 7],
['08/07', 3],
['08/08', 7],
['08/10', 8],
['08/11', 5],
['08/12', 3],
['08/13', 4],
['08/14', 5],
['08/15', 6],
['08/17', 5],
['08/18', 3],
['08/19', 4],
['08/20', 3],
['08/21', 3],
['08/22', 4],
['08/24', 3],
['08/25', 4],
['08/26', 5],
['08/27', 5],
['08/28', 6],
['08/29', 5],
['09/01', 4],
['09/02', 3],
['09/03', 1],
['09/04', 4],
['09/05', 3],
['09/07', 1],
['09/08', 2],
['09/09', 2],
['09/11', 2],
['09/12', 2],
['09/14', 5],
['09/15', 3],
['09/16', 2],
['09/17', 4],
['09/18', 6],
['09/19', 1],
['09/21', 2],
['09/22', 3],
['09/23', 3],
['09/24', 6],
['09/25', 4],
['09/26', 3],
['09/28', 7],
['09/29', 4],
['09/30', 5],
['10/01', 3],
['10/02', 2],
['10/03', 2],
['10/05', 4],
['10/06', 4],
['10/07', 5],
['10/08', 4],
['10/09', 5],
['10/10', 2],
['10/12', 2],
['10/13', 3],
['10/14', 3],
['10/15', 3],
['10/16', 4],
['10/17', 5],
['10/19', 3],
['10/20', 3],
['10/21', 3],
['10/22', 3],
['10/23', 7],
['10/24', 1],
['10/26', 4],
['10/27', 3],
['10/28', 4],
['10/29', 1],
['10/30', 2],
['11/02', 5],
['11/03', 1],
['11/04', 5],
['11/05', 6],
['11/06', 3],
['11/09', 7],
['11/10', 4],
['11/12', 4],
['11/13', 3],
['11/14', 2],
['11/16', 8],
['11/17', 1],
['11/18', 4],
['11/19', 7],
['11/20', 3],
['11/21', 4],
['11/23', 5],
]);
var options = {'title':'Future appointment projections',
'width':750,
'height':4000};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options); }
</script>
</head>
<body><div id="chart_div"></div></body></html>
I had to change the chart options like so:
var options = {'title':'Future appointment projections',
'width': 750,
'height': 4000,
'chartArea': {'height': '96%'},
'legend': {'position': 'bottom'}
};
Thanks to Approv3d of reddit for the assist.
I have 3 arrays in javascript. I'd like to combine them all into 1 var, but name each item (like PHP's associate array). So the first item is red, second is green, third is blue. And then how do I call each item separately after?
[[2, 1], [4, 1], [10, 1], [19, 1]],
[[3, 1], [14, 1], [18, 1], [19, 1]],
[[7, 1], [6, 1], [8, 1], [17, 1]]
Do you mean something like this?
var combined = {
red: [[2, 1], [4, 1], [10, 1], [19, 1]],
green: [[3, 1], [14, 1], [18, 1], [19, 1]],
blue: [[7, 1], [6, 1], [8, 1], [17, 1]]
};
Then you can access the arrays as combined.red, combined.green, and combined.blue.