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 have plotted a heatmap using highchart , but i wanted to give color range for y axis ie 2nd index in the data array but it takes 3rd index automatically.
Below is the jsfiddle code.
Links for my code
colorAxis: {
dataClasses: [{
from: 0,
to: 10,
color: 'rgb(191, 27, 0)'
},{
from:10,
to:30,
color:'rgb(234, 100, 96)'
},{
from:30,
to:100,
color:'rgb(242, 201, 109)'
},{
from:100,
color:'rgb(98, 158, 81)'
}]
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 99], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
The actual data is in below format
data: [[0, 0, 10], [0, 1, 19]]
Now range is plotted on the base of 2nd index ie 10,19 but i want to plot based on 1st index ie 0,1.
Change the default name of the property (of point object) that'll be used to compute the color :
Highcharts.seriesTypes.heatmap.prototype.colorKey = 'x'; // 'value' by default
Live demo: http://jsfiddle.net/BlackLabel/z3b1Lcqg/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Would I be able to round the edges of a heatmap made with highcharts?
See their example here:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/heatmap/
I'm trying to get each square to have rounded edges, but the borderRadius command isn't working when I add it.
E.g.
series: [{
name: 'Sales per employee',
// My addition
borderRadius: 5,
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
I have also tried:
plotOptions:{
heatmap:{
borderRadius:5
}
},
Neither seem to work.
In general it is no supported, but there is a very easy hack to implement this:
Highcharts.seriesTypes.heatmap.prototype.pointAttrToOptions.r = 'borderRadius';
Demo: http://jsfiddle.net/uds4vvfa/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 a JSON array of data which is
[ [[2, 5], [6, 10], [10, 7], [11, 15]],
[[0, 9], [1, 16], [3, 19], [4, 15]],
[[0, 7], [5, 16], [8, 17], [12, 19]] ]
but when I try to get the first array of [[2, 5], [6, 10], [10, 7], [11, 15]] using jsonData[0] I get the data as 2,5,6,10,10,7,11,15.
I would like to get the data in the JSON format and not the plain text format. Any ideas?
You should get the data as an array. Did you alert jsonData[0] because that will display the results as a flattened string.
Instead console.log(jsonData[0]) to see the actual array.
Here's the output I see when using your array.
var a = [[[2, 5], [6, 10], [10, 7], [11, 15]],[[0, 9], [1, 16], [3, 19], [4, 15]],[[0, 7], [5, 16], [8, 17], [12, 19]]];
alert(a[0]); // 2,5,6,10,10,7,11,15
console.log(a[0]); // [[2, 5], [6, 10], [10, 7], [11, 15]]
See an example.
Also, "JSON raw format" is misleading. What you have is a plain JavaScript array.
Are you asking how to convert it to a JSON string rather than simply getting the default toString behaviour of an array? If so you should just do:
JSON.stringify(jsonData[0])
Or whatever it is you want to stringify