Making a dataplot in HTML 5's Canvas

Question

I'm working in canvas to take information and plot it onto a graph. Eventually it will go to php and retrieve the data from a server, but for now I just need it to plot any data correctly.

I have the canvas drawn out how I'd like it and began plotting the data, but when I do it doesn't give me a thin path, it's more like a giant blob that covers everything. When looking at my code, it's important to know that it is mostly just initialization of the canvas, but I need to post mostly all of it in order to give context for what is happening in the program.

var canvas ;
var context ;
var Val_max;
var Val_min;
var sections;
var xScale;
var yScale;
var Apple =  [10.25,10.30,10.10,10.20];

function init() {
            Val_max = 10.5;
            Val_min = 10;
            var stepSize = .049999999999999; //.5 results in inaccurate results
            var columnSize = 50;
            var rowSize = 20;
            var margin = 20;
            var xAxis = [" "," "," ", " ", " ", "10AM", " ", " ", " ", " ", " ", "11AM", " ", " ", " ", " ", " ", "12PM", " ", " ", " ", " ", " ",  "1PM", " ", " ", " ", " ", " ", "2PM", " ", " ", " ", " ", " ", "3PM", " ", " ", " ", " ", " ", "4PM"]; 
            sections = xAxis.length-1;

            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");
            context.fillStyle = "#808080";

            yScale = (canvas.height - columnSize - margin) / (Val_max - Val_min); // Total height of the graph/range of graph
            xScale = (canvas.width - rowSize - margin) / sections; // Total width of the graph/number of ticks on the graph

            context.strokeStyle="#808080"; // color of grid lines
            context.beginPath();
                // print Parameters on X axis, and grid lines on the graph

                context.moveTo(xScale+margin, columnSize - margin);
                context.lineTo(xScale+margin, columnSize + (yScale * 10 * stepSize) - margin);      //draw y axis       

            for (i=1;i<=sections;i++) {
                var x = i * xScale;
                context.moveTo(x + margin, columnSize + (yScale * 10 * stepSize) - margin);
                context.lineTo(x + margin, columnSize + (yScale * 10 * stepSize) - margin - 5); //draw ticks along x-axis
                context.fillText(xAxis[i], x,canvas.height - margin); //Time along x axis
            }
                // print row header and draw horizontal grid lines
            var count =  0;
            context.moveTo(xScale+margin, 260);
            context.lineTo(canvas.width - margin, 260); // draw x axis

            for (scale=Val_max;scale>=Val_min;scale = scale - stepSize) {
                scale = scale.toFixed(2);
                var y = columnSize + (yScale * count * stepSize) - margin; 

                context.fillText(scale, margin - 20,y);
                context.moveTo(xScale+margin, y);
                context.lineTo(xScale+margin+5, y); //Draw ticks along y-axis
                count++;
            }
            context.stroke();

            context.translate(rowSize,canvas.height + Val_min * yScale);
            context.scale(1,-1 * yScale);

                // Color of each dataplot items

            context.strokeStyle="#FF0066";
            //plotData(Apple);
            context.strokeStyle="#9933FF";
            //plotData(Samsung);
            context.strokeStyle="#000";
            //plotData(Nokia);


        }

Ok that's the initialization of the canvas, I know it's messy but I think I'll have to reference something from it for the next function.

        function plotData(dataSet) {
            var margin = 20;
            context.beginPath();
            context.moveTo(xScale+margin, dataSet[0]);
            for (i=0;i<sections;i++) {
                context.lineTo(i * xScale + margin, dataSet[i]);
            }
            context.stroke();
        }

This function is supposed to take the data from the array and plot it on the graph. I can get it to draw, but it's not a thin line. Here's a picture of the blob that I'm getting.

It also doesn't seem to be accurately plotting the coordinates from my array either.

I know this question is pretty in depth, but any help would be very appreciated!

Answer 1

The translate and scale are applied to the current transform. Each time you call them you translate and scale a little more.

Use save and restore to get back the original transform.

context.save();  // <--------------------- added
context.translate(rowSize,canvas.height + Val_min * yScale);
context.scale(1,-1 * yScale);

    // Color of each dataplot items

context.strokeStyle="#FF0066";
//plotData(Apple);
context.strokeStyle="#9933FF";
//plotData(Samsung);
context.strokeStyle="#000";
//plotData(Nokia);
context.restore();   // <-------------------- added