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?

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?

• javascript
• jquery
• graphics
• graph

• 1 Why don't you want to use plugins? Google Charts is very powerfull tool – Daniil Ryzhkov Commented Aug 15, 2012 at 15:28
• What browser compatibility do you need? Is SVG okay? Canvas? Either of these would make it fairly easy, but would be incompatible with older browsers. If you need full cross-browser compatibility, you'll want to use a library like Raphael for it, otherwise you're in for a world of hurt. – SDC Commented Aug 15, 2012 at 15:31
• @Diode sure, canvas and svg will do – keinabel Commented Aug 16, 2012 at 8:30
• @SDC Chrome or IE8/9 should support it – keinabel Commented Aug 16, 2012 at 8:31
• 1 @keinabel - if you need IE8 support, then you can't use Canvas or SVG. – SDC Commented Aug 16, 2012 at 10:21

2 Answers 2

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

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.