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.
Here I'm working on Highcharts 3D Scatter chart, based on the sample jsfiddle. In the fiddle,I used to redraw the chart, while emptying the div which contain chart,scatter points get removed ,but the 3D container is not removed.And hence chart is not redrawing.
javascript code :
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
width: 500,
height: 550,
marginTop:150,
margin: 100,
options3d: {
enabled: true,
drag: {
enabled: true,
flipAxes: true,
snap: 15,
animateSnap: true
},
alpha: 15,
beta: 30,
depth: 300,
viewDistance: 5,
fitToPlot: false,
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
}
}
},
title: {
text: 'Draggable box'
},
subtitle: {
text: 'Click and drag the plot area to rotate in space'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10,
showFirstLabel: false
},
legend: {
enabled: false
},
series: [{
name: 'Reading',
colorByPoint: true,
data: [[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3], [6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7], [3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9], [7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5], [6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1], [8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3], [5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8], [2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3], [9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0], [2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8], [8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5], [6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9], [5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2], [9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6], [5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5], [0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]]
}]
});
Please suggest a method to redraw 3d scatter chart.
Moving the color setting outside your method will fix your problem. See more information about that here: http://forum.highcharts.com/highcharts-usage/pie-char-uncaught-typeerror-a-indexof-is-not-a-function-t33161/
I also moved chart outside the method so that destroy() could be called on it. This will prevent memory leaks.
var chart;
// Give the points a 3D feel by adding a radial gradient
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.4,
cy: 0.3,
r: 0.5
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
]
};
});
function scatterChart(Data) {
// Set up the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
width: 500,
height: 550,
marginTop:150,
margin: 100,
options3d: {
enabled: true,
drag: {
enabled: true,
flipAxes: true,
snap: 15,
animateSnap: true
},
alpha: 15,
beta: 30,
depth: 300,
viewDistance: 5,
fitToPlot: false,
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
}
}
},
title: {
text: 'Draggable box'
},
subtitle: {
text: 'Click and drag the plot area to rotate in space'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10,
showFirstLabel: false
},
legend: {
enabled: false
},
series:Data
});
}
var scatterData = [{
name: 'Reading',
colorByPoint: true,
data: [[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3], [6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7], [3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9], [7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5], [6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1], [8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3], [5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8], [2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3], [9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0], [2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8], [8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5], [6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9], [5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2], [9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6], [5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5], [0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]]
}];
scatterChart(scatterData);
chart.destroy();
scatterChart(scatterData);
I have been having some really odd issues while trying to plot my website visitor data. I am using flots "visitors per day with zooming and weekends" example to build my own graph of visitors that visit my website. I generate identically formatted data for the plot and this is what I get (see link for picture).
Picture link: http://picpaste.com/flot_issue-sJ0X36HA.png
as you can see, There is a line under the peak that should not be there. If anyone knows how to fix this I would appreciate it!
here is the data I am using to plot the points:
[[1374273300000, 1], [1374274740000, 1], [1374275640000, 1], [1374276300000, 2], [1374277020000, 1], [1374254460000, 1], [1374254940000, 1], [1374255300000, 1], [1374255720000, 1], [1374256740000, 1], [1374258120000, 1], [1374258240000, 1], [1374259620000, 1], [1374260340000, 1], [1374261300000, 1], [1374261600000, 1], [1374261660000, 1], [1374262200000, 1], [1374262380000, 1], [1374262860000, 1], [1374263880000, 1], [1374264600000, 1], [1374265740000, 1], [1374266400000, 1], [1374266520000, 1], [1374266940000, 1], [1374268080000, 1], [1374268920000, 1], [1374315660000, 1], [1374320520000, 1], [1374278520000, 1], [1374278820000, 1], [1374280980000, 1], [1374325260000, 1], [1374282420000, 1], [1374325620000, 1], [1374326220000, 1], [1374326340000, 1], [1374326700000, 1], [1374327300000, 1], [1374288780000, 1], [1374289980000, 1], [1374290400000, 1], [1374291060000, 1], [1374293820000, 1], [1374294060000, 1], [1374299280000, 1], [1374302520000, 1], [1374303180000, 1], [1374303240000, 1], [1374303780000, 1], [1374304200000, 1], [1374307560000, 1], [1374308400000, 1], [1374309660000, 1], [1374311280000, 1]]
Thank you,
John
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.