Comments by Member 12312733 (Top 8 by date)

Hello,

I want to access my database values, and draw lines according to the departure time of the user. and the thickness of the lines is basically the price, means higher the price, thicker is the line.

"Price" is saved in my database. Now, how am i supposed to use that ?



<canvas id="canvas" width=500 height=500></canvas>
<script>

var canvas = document.getElementById("canvas");
var e = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

draw(e, 40);

function circle(e, color, x, y, radius, startAngle, endAngle, clockwise) {
if (arguments.length < 9) return alert("Not enough arguments.\nThe function \"circle\" requires 9 arguments\nYou provided only " + arguments.length + ".");
e.beginPath();
e.arc(x, y, radius, startAngle, endAngle, clockwise);
e.strokeStyle = color;
e.stroke();
}

function draw(e, radius) {
var deg360 = Math.PI * 2;
circle(e, "#00688B", 125, 125, 125, deg360, 0, deg360, true);
e.fillStyle = '#00688B';
e.fill();



circle(e, "#0099CC", 125, 125, 110, deg360, 0, deg360, true);
e.fillStyle = '#0099CC';
e.fill();
circle(e, "#63D1F4", 125, 125, 95, deg360, 0, deg360, true);
e.fillStyle = '#63D1F4';
e.fill();
circle(e, "#05EDFF", 125, 125, 80, deg360, 0, deg360, true);
e.fillStyle = '#05EDFF';
e.fill();
circle(e, "#BFEFFF", 125, 125, 65, deg360, 0, deg360, true);
e.fillStyle = '#BFEFFF';
e.fill();

var X = [50, 65, 80, 95, 150, 170, 160];
var Y = [50, 65, 95, 70, 125, 170, 190];
//var Xlast = [50, 65, 95, 70, 125, 170, 190];
//var Ylast = [120, 165, 195, 170, 125, 170, 190];
var Xcent = 125;
var Ycent = 125;

for (var i = 0; i < X.length; ++i) {
var width = 0.5 + i / 2;
e.beginPath();
e.strokeStyle = "Black";
e.lineWidth = width;
e.moveTo(Xcent, Ycent);
//e.moveTo(0, 0);

e.lineTo(X[i], Y[i]);
e.stroke();

}


circle(e, "#E6E8FA", 125, 125, 50, deg360, 0, deg360, true);
e.fillStyle = '#E6E8FA';
e.fill();

e.fill();
e.fillStyle = "black"; // font color to write the text with
e.font = radius * 0.18 + "px arial";
e.textBaseline = "middle";
e.textAlign = "center";
e.fillText(0, radius, e);
for (num = 0; num < 25; num++) {

ang = num * Math.PI / 12;
e.translate(125, 125);

e.rotate(ang);
e.translate(0, -radius);
e.rotate(-ang);
e.fillText(num.toString(), 0, 0);
e.rotate(ang);
e.translate(0, +radius);
e.rotate(-ang);
e.setTransform(1, 0, 0, 1, 0, 0);

}

I am not finding any way to connect my database so that i can fetch values from database in canvas.