We Keep Coding

Wall collision in a maze with line segment intersection

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>

HighCharts heatmap from SQL Query in ASP.NET webForm

I am trying to Render a HeatMap chart with dynamic data from an SQL server Database.
the JavaScript below will render the Chart with Static data
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales by Product per Hour'
},
xAxis: {
categories: ['05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:30', '15:00']
},
yAxis: {
categories: ['Bakery', 'Butchery', 'Haba', 'Bread', 'Others'],
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 '' + this.series.xAxis.categories[this.point.x] + ' sold ' +
this.point.value + ' items on ' + this.series.yAxis.categories[this.point.y] + '';
}
},
series: [{
name: 'Sales per Department',
borderWidth: 1,
data: [
[0, 0, 10],
[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'
}
}]
});

How to point the range(dataClasses) for 2nd index in data using highcharts?

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

Redraw issue in Highcharts 3D Scatter Chart

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

BorderRadius Using HighCharts HeatMap

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/