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?

Why don't you want to use plugins? Google Charts is very powerfull tool — Daniil Ryzhkov
– 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
– SDC, Commented Aug 15, 2012 at 15:31
@keinabel - if you need IE8 support, then you can't use Canvas or SVG. — SDC
– SDC, Commented Aug 16, 2012 at 10:21

Farokh KH · Accepted Answer · 2017-08-21 17:03:06Z

9

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

edited Aug 21, 2017 at 17:03

Farokh KH

233 bronze badges

answered Aug 15, 2012 at 15:33

Paul Aldred-Bann

6,0306 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SDC Over a year ago

Canvas isn't supported by IE8, which the OP states he needs to support. However, he's accepted the answer, so one assumes he's happy with it.

Paul Aldred-Bann Over a year ago

@SDC very good point, and IE9 is only available on Windows 7. The OP could use the explorercanvas which emulates the canvas' VML in older browsers (available at code.google.com/p/explorercanvas)

SDC Over a year ago

well yes he could use that.... except that he's set against using any libraries. I agree with you that he really ought to consider using one, because he's not going to get anywhere without one.

Kendall Frey · Accepted Answer · 2012-08-15 15:31:31Z

3

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.

answered Aug 15, 2012 at 15:31

Kendall Frey

44.6k21 gold badges113 silver badges151 bronze badges

Collectives™ on Stack Overflow

How to draw line graph with JavaScript without using external libraries

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related