We Keep Coding

Wall collision in a maze with line segment intersection - javascript

I am trying to make a sort of maze game based on something like this: https://tankstroubleunblocked.com/
I have a very big array containing the walls, where each wall has three elements: an x position, a y position, and a type. For example, the wall [13, 5, 1] Has a top left corner at (13, 5) and is vertical. Originally, I was going to use corners to detect collisions, but I realized that would not work in cases like this: I'm now doing a collision system with line segment intersection: https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection
However, I don't know how to move the tank away from the line. It's easy enough if I run into a wall head on - just stop the momentum in the direction of the wall. However, like in the case above, I am coming into the wall from one of its origin points. If it tries to stop my momentum by pushing me sideways, it will look like a glitch in-game, as what it really needs to do is push me backwards.
How do I fix this? Do I make a second, invisible wall on the end of every wall that ends like this? Is there an algorithm with angles? If I push the tank in the opposite direction, it will not move slightly sideways, like it is supposed to. What should I do?
Now that I am using code, I should tell you I am using the p5js library. Basically, what I want to know is what should I put in the wallCheck(arr) function? The array passed into it is the walls that it is going to test.
var walls = [[[0, 0, 1], [0, 0, 0], [0, 1, 1], [0, 2, 1], [0, 3, 1], [0, 4, 1], [0, 5, 1], [0, 6, 1], [0, 7, 1], [0, 8, 1], [0, 9, 1], [0, 10, 1], [0, 11, 1], [0, 12, 1], [0, 13, 1], [0, 14, 1], [0, 15, 1], [0, 16, 0], [1, 0, 0], [1, 16, 0], [2, 0, 0], [2, 16, 0], [3, 0, 0], [3, 16, 0], [4, 0, 0], [4, 16, 0], [5, 0, 0], [5, 16, 0], [6, 0, 0], [6, 16, 0], [7, 0, 0], [7, 16, 0], [8, 0, 0], [8, 16, 0], [9, 0, 0], [9, 16, 0], [10, 0, 0], [10, 16, 0], [11, 0, 0], [11, 16, 0], [12, 0, 0], [12, 16, 0], [13, 0, 0], [13, 16, 0], [14, 0, 0], [14, 16, 0], [16, 0, 1], [15, 0, 0], [16, 1, 1], [16, 2, 1], [16, 3, 1], [16, 4, 1], [16, 5, 1], [16, 6, 1], [16, 7, 1], [16, 8, 1], [16, 9, 1], [16, 10, 1], [16, 11, 1], [16, 12, 1], [16, 13, 1], [16, 14, 1], [15, 16, 0], [16, 15, 1]], [[1, 0, 1], [1, 1, 1], [0, 3, 0], [1, 2, 0], [1, 3, 0], [2, 3, 1], [2, 1, 0], [2, 2, 0], [3, 1, 0], [3, 2, 0], [3, 3, 0]], [[1, 5, 1], [1, 6, 1], [1, 7, 1], [1, 4, 0], [2, 4, 1], [2, 5, 1], [1, 7, 0], [3, 4, 1], [3, 6, 1], [2, 7, 0], [3, 5, 0], [3, 7, 0]], [[1, 8, 1], [0, 10, 0], [1, 11, 1], [2, 8, 1], [1, 9, 0], [1, 10, 0], [1, 11, 0], [3, 8, 1], [3, 9, 1], [2, 10, 0], [3, 10, 1], [3, 8, 0]], [[1, 13, 1], [1, 14, 1], [1, 12, 0], [2, 12, 1], [2, 13, 1], [1, 15, 0], [3, 12, 1], [2, 13, 0], [3, 14, 1], [2, 15, 0], [3, 12, 0], [3, 14, 0]], [[5, 0, 1], [4, 1, 0], [4, 2, 0], [4, 3, 0], [5, 3, 1], [6, 1, 1], [5, 2, 0], [6, 2, 1], [7, 0, 1], [6, 3, 0], [7, 3, 1], [7, 2, 0]], [[4, 4, 0], [4, 5, 0], [5, 5, 1], [4, 6, 0], [4, 7, 0], [5, 4, 0], [6, 4, 1], [5, 6, 0], [6, 6, 1], [6, 5, 0], [7, 5, 1], [6, 7, 0], [7, 7, 1], [7, 6, 0]], [[4, 10, 1], [4, 11, 1], [5, 8, 1], [4, 9, 0], [5, 9, 1], [4, 11, 0], [6, 8, 1], [5, 10, 0], [6, 11, 1], [6, 9, 0], [7, 9, 1], [7, 10, 1], [7, 8, 0], [7, 9, 0], [7, 11, 0]], [[4, 13, 1], [4, 15, 1], [5, 12, 1], [4, 13, 0], [4, 14, 0], [5, 14, 1], [5, 12, 0], [6, 14, 1], [6, 13, 0], [7, 13, 1], [6, 14, 0], [7, 15, 1], [7, 12, 0], [7, 14, 0], [7, 15, 0]], [[8, 1, 1], [8, 2, 1], [8, 3, 1], [8, 2, 0], [9, 1, 0], [10, 2, 1], [9, 3, 0], [11, 0, 1], [10, 1, 0], [10, 3, 0], [11, 2, 0]], [[8, 4, 1], [8, 6, 1], [8, 4, 0], [9, 5, 1], [8, 6, 0], [9, 7, 1], [9, 4, 0], [10, 4, 1], [9, 6, 0], [9, 7, 0], [10, 7, 1], [11, 4, 1], [10, 5, 0], [11, 6, 1], [11, 4, 0], [11, 6, 0]], [[8, 8, 0], [9, 8, 1], [8, 10, 0], [8, 11, 0], [9, 11, 1], [10, 9, 1], [9, 10, 0], [10, 11, 1], [11, 8, 1], [10, 9, 0], [10, 10, 0], [11, 10, 1], [11, 9, 0]], [[8, 12, 1], [8, 13, 0], [8, 14, 0], [9, 14, 1], [10, 12, 1], [9, 13, 0], [9, 14, 0], [10, 15, 1], [10, 12, 0], [10, 14, 0], [11, 14, 1], [11, 13, 0]], [[12, 1, 1], [12, 2, 1], [13, 1, 1], [12, 3, 0], [14, 0, 1], [13, 2, 0], [13, 3, 0], [15, 1, 1], [14, 2, 0], [14, 3, 0], [15, 3, 1], [15, 2, 0]], [[12, 7, 1], [12, 4, 0], [12, 5, 0], [12, 6, 0], [13, 6, 1], [13, 4, 0], [13, 5, 0], [14, 5, 1], [13, 7, 0], [14, 4, 0], [14, 5, 0], [15, 6, 1], [14, 7, 0], [15, 7, 1], [15, 5, 0]], [[12, 10, 1], [12, 11, 1], [12, 8, 0], [12, 9, 0], [13, 9, 1], [13, 10, 1], [12, 11, 0], [13, 8, 0], [14, 8, 1], [14, 9, 1], [13, 11, 0], [14, 11, 1], [14, 9, 0], [15, 10, 1], [15, 11, 1], [15, 9, 0]], [[12, 12, 1], [12, 13, 1], [12, 15, 1], [13, 12, 1], [12, 14, 0], [12, 15, 0], [13, 13, 0], [14, 13, 1], [14, 14, 1], [13, 15, 0], [14, 12, 0], [15, 12, 1], [14, 14, 0], [15, 15, 0]]];
var size = 20;
var ratio;
var testPlayer;
var scaleup = 2;
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
angleMode(DEGREES);
rectMode(CENTER);
testPlayer = new Player(15, 13, 0);
ratio = width/height;
}
function draw() {
background(210);
// for(var i = 0; i < walls.length; i ++) {
// for(var j = 0; j < walls[i].length; j ++) {
// if (walls[i][j][2] === 0) {
// line(walls[i][j][0]*size, walls[i][j][1]*size, walls[i][j][0]*size+size, walls[i][j][1]*size);
// } else if (walls[i][j][2] === 1) {
// line(walls[i][j][0]*size, walls[i][j][1]*size, walls[i][j][0]*size, walls[i][j][1]*size+size);
// }
// }
// stroke(255, 0, 0);
// strokeWeight(5);
// point(testPlayer.pos.x*size, testPlayer.pos.y*size)
// stroke(0);
// strokeWeight(1);
// }
translate(width/2, height/2);
scale(scaleup);
translate(width/-2, height/-2)
testPlayer.move();
testPlayer.wallCheck([]);
translate(width/2 + map(testPlayer.pos.x, 0, 16, 0, width)*-1, height/2 + map(testPlayer.pos.y, 0, 16, 0, height)*-1*ratio);
scale(width/320, height*ratio/320);
renderWalls(testPlayer.pos.x, testPlayer.pos.y/ratio);
scale(320/width, 320/(height*ratio));
testPlayer.show();
translate(width/2 + map(testPlayer.pos.x, 0, 16, 0, width), height/2 + map(testPlayer.pos.y, 0, 16, 0, height)*ratio);
}
//renders walls lol
function renderWalls(posx, posy) {
var renderedChunks = whichChunks(posx, posy);
for(var i = 0; i < walls.length; i ++) {
for(var j = 0; j < walls[i].length; j ++) {
if (walls[i][j][2] === 0) {
line(walls[i][j][0]*size, walls[i][j][1]*size, walls[i][j][0]*size + size, walls[i][j][1]*size);
} else if (walls[i][j][2] === 1) {
line(walls[i][j][0]*size, walls[i][j][1]*size, walls[i][j][0]*size, walls[i][j][1]*size+size);
}
}
}
}
//which chunks are wall tested with a certain player position
function whichChunks(posx, posy) {
var renderedChunks = [0];
for(var i = 0; i < 4; i ++) {
for(var j = 0; j < 4; j ++) {
if(posx > i * 4 - 1 && posx < i * 4 + 5 && posy > j * 4 - 1 && posy < j * 4 + 5) {
renderedChunks.push(i * 4 + j + 1);
}
}
}
return renderedChunks;
}
//test for line segment intersection for walls
function intersect(x1, y1, x2, y2, x3, y3, x4, y4) {
var t = (((x1 - x3) * (y3 - y4)) - ((y1 - y3) * (x3 - x4))) / (((x1 - x2) * (y3 - y4)) - ((y1 - y2) * (x3 - x4)));
var u = (((x1 - x3) * (y1 - y2)) - ((y1 - y3) * (x1 - x2))) / (((x1 - x2) * (y3 - y4)) - ((y1 - y2) * (x3 - x4)));
var x = x1 + t * (x2 - x1);
var y = y1 + t * (y2 - y1);
return [x, y, t, u];
}
var corners = [];
class Player {
constructor(x, y, dir) {
this.pos = createVector(x, y);
this.dir = dir;
this.sizex = 0.25;
this.sizey = 0.25;
}
move() {
if(keyIsDown(37)) {
this.dir -= Math.PI;
if(this.dir < 0) {
this.dir += 360;
}
}
if (keyIsDown(39)) {
this.dir += Math.PI;
if(this.dir > 360) {
this.dir -= 360;
}
}
if (keyIsDown(38)) {
var accel = createVector(cos(this.dir)*16/width, sin(this.dir)*16/height);
accel.mult(Math.PI/3);
accel.x *= ratio;
this.pos.add(accel);
}
if(keyIsDown(40)) {
var accel = createVector(cos(this.dir)*16/width, sin(this.dir)*16/height);
accel.x *= ratio;
this.pos.add(accel.mult(-1*Math.PI/3));
}
}
show() {
translate(map(this.pos.x, 0, 16, 0, width), map(this.pos.y, 0, 16, 0, height)*ratio);
rotate(this.dir);
fill(255)
rect(0, 0, map(this.sizex, 0, 16, 0, width), map(this.sizey, 0, 16, 0, height)*ratio);
fill(255, 0, 0);
rect(map(this.sizex, 0, 16, 0, width)/8*3, 0, map(this.sizex, 0, 16, 0, width)/4, map(this.sizey, 0, 16, 0, height));
rotate(this.dir*-1)
translate(map(this.pos.x, 0, 16, 0, width)*-1, map(this.pos.y, 0, 16, 0, height)*-1*ratio);
for(var j = 0; j < corners.length; j ++) {
translate(map(corners[j].x, 0, 16, 0, width), map(corners[j].y, 0, 16, 0, height)*ratio);
stroke(255, 0, 0);
strokeWeight(2);
point(0, 0)
strokeWeight(1);
stroke(0);
translate(map(corners[j].x, 0, 16, 0, width)*-1, map(corners[j].y, 0, 16, 0, height*ratio)*-1);
}
}
wallCheck(arr) {
corners = [createVector(this.pos.x, this.pos.y).add(createVector(cos(this.dir+45), sin(this.dir+45)).mult(sqrt(2*(pow(this.sizex, 2)))/2)), createVector(this.pos.x, this.pos.y).add(createVector(cos(this.dir+135), sin(this.dir+135)).mult(sqrt(2*(pow(this.sizex, 2)))/2)), createVector(this.pos.x, this.pos.y).add(createVector(cos(this.dir-135), sin(this.dir-135)).mult(sqrt(2*(pow(this.sizex, 2)))/2)), createVector(this.pos.x, this.pos.y).add(createVector(cos(this.dir-45), sin(this.dir-45)).mult(sqrt(2*(pow(this.sizex, 2)))/2))];
for(var i = 0; i < corners.length; i ++) {
if(corners[i].x > 15.99) {
this.pos.x = this.pos.x - corners[i].x + 15.99
}
if(corners[i].y > 15.99) {
this.pos.y = this.pos.y - corners[i].y + 15.99
}
}
var chunksToRender = whichChunks(this.pos.x, this.pos.y);
for(var i = 0; i < chunksToRender.length; i ++) {
for(var j = 0; j < walls[chunksToRender[i]].length; j ++) {
if(walls[chunksToRender[i]][j][2] === 0) {
var intersection = [intersect(walls[chunksToRender[i]][j][0], walls[chunksToRender[i]][j][1], walls[chunksToRender[i]][j][0]+1, walls[chunksToRender[i]][j][1], corners[0].x, corners[0].y, corners[1].x, corners[1].y), intersect(walls[chunksToRender[i]][j][0], walls[chunksToRender[i]][j][1], walls[chunksToRender[i]][j][0]+1, walls[chunksToRender[i]][j][1], corners[2].x, corners[2].y, corners[1].x, corners[1].y), intersect(walls[chunksToRender[i]][j][0], walls[chunksToRender[i]][j][1], walls[chunksToRender[i]][j][0]+1, walls[chunksToRender[i]][j][1], corners[2].x, corners[2].y, corners[3].x, corners[3].y), intersect(walls[chunksToRender[i]][j][0], walls[chunksToRender[i]][j][1], walls[chunksToRender[i]][j][0]+1, walls[chunksToRender[i]][j][1], corners[0].x, corners[0].y, corners[3].x, corners[3].y)];
for(var k = 0; k < intersection.length; k ++) {
if (intersection[k][2] > 0 && intersection[k][3] > 0 && intersection[k][2] < 1 && intersection[k][3] < 1) {
}
}
}
}
}
corners = [createVector(this.pos.x, this.pos.y).add(createVector(cos(this.dir+45), sin(this.dir+45)).mult(sqrt(2*(pow(this.sizex, 2)))/2)), createVector(this.pos.x, this.pos.y).add(createVector(cos(this.dir+135), sin(this.dir+135)).mult(sqrt(2*(pow(this.sizex, 2)))/2)), createVector(this.pos.x, this.pos.y).add(createVector(cos(this.dir-135), sin(this.dir-135)).mult(sqrt(2*(pow(this.sizex, 2)))/2)), createVector(this.pos.x, this.pos.y).add(createVector(cos(this.dir-45), sin(this.dir-45)).mult(sqrt(2*(pow(this.sizex, 2)))/2))];
}
}
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.3.0/math.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
<script src="player.js"></script>
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>

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.

This is a combine chart types which are heatmap and scatter.
When i'm using boost.js with more data points, the scatter will be hidden under heatmap.
WITHOUT boost.js https://jsfiddle.net/chuasteve/ogwv9yxm/
WITH boost.js https://jsfiddle.net/chuasteve/0gas59xt/1/
How to solve it? Here is the coding:-
var chart = Highcharts.chart('container', {
chart: {
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
boost: {
enable: true,
useGPUTranslations: true,
usePreAllocated: true,
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'A',
type: 'heatmap',
turboThreshold: 0,
boostThreshold: 1,
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]]
}]
});
chart.addSeries({
name: 'scatter',
type: 'scatter',
turboThreshold: 0,
boostThreshold: 1,
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], [10, 5, 91],[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], [10, 5, 91],[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], [10, 6, 91],[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], [10, 7, 91],[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], [10, 8, 91],[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], [0, 5, 91],[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], [10, 5, 91],[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], [10, 5, 91],[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], [10, 6, 91],[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], [10, 7, 91],[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], [10, 8, 91],[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], [0, 5, 91]]
});

This problem is a bug in the Highcharts boost module. As a workaround you can set a negative z-index on the heatmap series:
chart.series[0].group.attr({
zIndex: -1
});
Live demo: https://jsfiddle.net/BlackLabel/4b06yvwe/

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

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);