How to draw line graph with JavaScript without using external libraries

Question

To make it short:

I want to draw a line graph with JavaScript without using a (open-source) library. All I work with is JavaScript and jQuery (no-plugins!).

How can I manage this?

Solution 1

I think you're overlooking some very powerful libraries, however if you're determined to do this yourself you're going to need to use HTML5 and the Canvas object. Have a look at this great tutorial to get you started. Here's a snapshot of what you'll need to get to grips with:

$(document).ready(function() {
    var graph = $('#graph'),
        c = graph[0].getContext('2d');

    c.lineWidth = 2;
    c.strokeStyle = '#333';
    c.font = 'italic 8pt sans-serif';
    c.textAlign = "center";

    c.beginPath();
    c.moveTo(xPadding, 0);
    c.lineTo(xPadding, graph.height() - yPadding);
    c.lineTo(graph.width(), graph.height() - yPadding);
    c.stroke();
});

Solution 2

The best solution (besides external libraries) is probably the canvas, introduced in HTML5.

Here is a tutorial, and you can find much more information with Google.