[RESOLVED] Javascript and Canvas - Oh the headache - Graphing
Below is the code I have come up with so far.
I know its bloated and big and there are probably already examples out there already. But I haven't made them, so I want to be able to make it...
struggling though
What I'm attempting to do is make a graph on a webpage using the canvas object. Ultimately it will be mysql>php>javascript>canvas to display graphs (line n box).
Started out ok, this is the draft so far. Got the canvas, got a title, can gradient or not. got a box for the main graph bit, even got the dividers... probably.
But when I stroke on the lines I can't seem to get 2 pixels to show, only 1 and 4. And even though the major indicators on the x axis are fewer than the minor, they stroke the same width and colour. Pretty sure I change the colour.
Can someone please check whether I've messed it up, and where?
Sorry for the bloatedness, I want to get a basic graph that is flexible later on...
Code:
<!DOCTYPE HTML>
<html>
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="Expires" CONTENT="0">
<meta name="robots" content="noindex, nofollow">
<META NAME="AUTHOR" CONTENT="Vincent Buckner / VB Contracts">
<META NAME="COPYRIGHT" CONTENT="© 2014 Vincent Buckner">
<title>Drawing tests</title>
</head>
<body>
Simple 2d graphics<br/>
<canvas id="myGraph" width="500" height="400" style="border: 1px solid #000000; box-shadow: 3px 3px 6px #888888;"></canvas>
</body>
<script>
var c = document.getElementById("myGraph");
var ctx = c.getContext("2d");
if (!c.getContext) {
alert('Canvas doesn`t work...');
}
var loop;
var grd;
var cnvAreaX = c.width;
var cnvAreaY = c.height;
// Data
var minX = 0;
var minY = 0;
var maxX = 10;
var maxY = 12;
var divMajX = 2;
var divMinX = 1;
var divMajY = 2;
var divMinY = 1;
var dataItems = 6;
var blnFadeBack = false; // fade the background
var blnUseDataItems = false; // set to true to use the data items along the bottom
var blnUseShortForMin = false; //short line at min instead of a complete line
var TheTitle = "A Title to Display"; // Title to show
var titleMinY = 10;
var titleMaxY = 50;
var titleSpaceY = titleMinY+titleMaxY+4;
var areaDivMinX;
var areaDivMajX;
// --------------------------
//background
if ( blnFadeBack ) {
grd = ctx.createLinearGradient(0,cnvAreaY,0,0);
grd.addColorStop(0,"rgb(150,150,250)");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect(0,0,cnvAreaX,cnvAreaY);
}
// --------------------------
// Title Area
// text is from bottom left (when placing)
ctx.fillStyle = "#000000";
ctx.strokeRect(10,10,cnvAreaX-20,titleMaxY-titleMinY); // (10, 480, 10) = 500 x 60 = (10, 40, 10)
ctx.font = "Bold 24px Arial";
grd = ctx.createLinearGradient(0,40,0,15);
grd.addColorStop(0,"rgb(0,200,0)");
grd.addColorStop(1,"rgb(0,0,200)");
//ctx.fillStyle = "#000000";
ctx.fillStyle = grd;
ctx.fillText(TheTitle, 10+titleMinY, titleMaxY-10);
// for testing title colours
// ctx.fillRect(120,10,30,64);
// --------------------------
// Graph Area
ctx.fillStyle = "#000000";
ctx.strokeRect(10,titleSpaceY,cnvAreaX-20,cnvAreaY-titleSpaceY-10); // (10, 480, 10) = 500 x 340 = (4, 326, 10)
// --------------------------
// area / Lines
var areaMinX = 10;
var areaMaxX = cnvAreaX-10;
var areaMinY = titleSpaceY;
var areaMaxY = cnvAreaY-10;
// ctx.fillStyle = "rgb(00,200,000)";
// ctx.moveTo(100,100);
// ctx.lineTo(200,200);
// ctx.stroke();
// ctx.strokeRect(100,100,200,200);
if ( blnUseDataItems ) {
areaDivMinX = (areaMaxX-areaMinX)/((maxX-minX)/dataItems); // no min with items
areaDivMajX = (areaMaxX-areaMinX)/((maxX-minX)/dataItems);
// for (loop=1; loop<dataItems; loop++) {
// ctx.fillStyle = "rgb(200,200,200)";
// ctx.moveTo(0,0);
// ctx.lineTo(200,100);
// ctx.stroke();
// }
// ctx.fillStyle = "rgb(200,00,000)";
// ctx.moveTo(100,100);
// ctx.lineTo(200,200);
ctx.fillText("Use items",10,80);
} else {
areaDivMinX = (areaMaxX-areaMinX)/((maxX-minX)/divMinX);
areaDivMajX = (areaMaxX-areaMinX)/((maxX-minX)/divMajX);
ctx.fillText(areaDivMinX,10,100);
ctx.fillText(areaDivMajX,10,200);
// ctx.fillText(divMinX,10,300);
if (1==1) {
ctx.fillStyle = "rgb(100,100,100)";
for (loop=areaMinX; loop<areaMaxX; loop=loop+areaDivMinX) {
ctx.moveTo(loop, areaMaxY);
if ( blnUseShortForMin ) {
ctx.lineTo(loop, areaMaxY-((areaMaxY-areaMinY)*.1));
} else {
ctx.lineTo(loop, areaMinY);
}
ctx.lineWidth=1;
ctx.stroke();
}
}
if (1==1) {
ctx.fillStyle = "rgb(0,0,0)";
for (loop=areaMinX; loop<areaMaxX; loop=loop+areaDivMajX) {
ctx.moveTo(loop, areaMaxY);
if ( blnUseShortForMin ) {
ctx.lineTo(loop, areaMaxY-((areaMaxY-areaMinY)*.2));
} else {
ctx.lineTo(loop, areaMinY);
}
ctx.lineWidth=1;
ctx.stroke();
}
}
fillRect(100,100,300,300);
}
// Actual data points (series)
//var aryDx = [ 1 , 2, 3, 4, 5, 6 ];
//var aryDy = [ 10, 3, 5, 7, 2, 1 ];
//for (loop = 0; loop< aryDx.length; loop++) {
// ctx.beginPath();
// x, y, r, start deg, end deg, counter clockwise
// degs 0-2 *Math.PI
// ctx.fillStyle = "#000000";
// ctx.arc(aryDx[loop] * 10, aryDy[loop]*10, 4, 0, 2*Math.PI);
// ctx.stroke();
//}
</script>
</html>
Re: Javascript and Canvas - Oh the headache - Graphing
Found a useful link Here
explains the double pixel size and why the colours weren't changing...
Re: [RESOLVED] Javascript and Canvas - Oh the headache - Graphing
