Best way to go about making "simple" line graphs with a very light footprint? jquery? canvas? - 【StackMirror】|javascript|jquery|css|canvas|linegraph

I'm trying to create line graphs like the one in the image below.

It needs to have a very light weight(in kb), and needs to have points that I could hover(for a tooltip about that point, like in the image). I don't need pie charts or anything like that, just line graphs like above.

I'm just not sure how to go about it best, I don't know canvas, and i'm assuming that might be pretty complex trying to do what I need with canvas. I know jQuery decently well.

I'm wondering: Is there a very light weight framework/plugin that would allow me to do just the bare essentials like in the image? If not, how would you suggest going about this with jQuery?

All I need are the lines drawn, with points that I could trigger a hover on, I can take care of the tooltip and all that, i'm just trying to figure out how to draw all the lines the match up with the grid, and get the little circle elements in the right position.

Thanks so much. ps: light weight to me is not more than a few kb, because I want them to be interactive(not just a static image), but i'm not going to have so many of them that I need a huge jquery plugin, just something small.

Also: I'm trying to make it so it's responsive, and shrinks to fit a phones screen.

2012-04-03 23:34
by android.nick

If you're willing to use third-party frameworks, look into AmCharts. Pure JS charts with loads of features, plus its free - xbonez 2012-04-03 23:35

For really simple graphs, the basic canvas API is really not that bad. However, if you want something to make them look pretty, then something like flot or AmCharts would maybe save you some effort - Pointy 2012-04-03 23:41

SVG sounds just like what you are looking for. You can use a library such as JQuery SVG or Raphael (based on Prototype.js) to make it easier.

2012-04-03 23:45
by Clafou

I second that. Raphael is rather easy to use and works on browsers back to IE6. Highly recomende - Matthew Nichols 2012-04-03 23:48

Can you provide links to these - theJerm 2014-07-10 06:00

Google Chart API is very solid and easy to use. Here is an example of a simple Line Chart http://code.google.com/apis/ajax/playground/?type=visualization#line_chart

You can also Interact with the charts you create:

https://google-developers.appspot.com/chart/interactive/docs/basic_interactivity

https://google-developers.appspot.com/chart/interactive/docs/events

2012-04-04 00:46
by pgratton

I don't know how lightweight you could possibly get to do what you want, for that kind of thing I would normally use flot.

2012-04-03 23:41
by quodlibetor

If you are not planning any manipulation on the graphs. Use a PHP library called pChart

2012-04-04 00:09
by Starx

Check out Google Charts. It looks like the perfect thing. It doesn't use flash, so it's smaller than some, and it has tooltips. As a bonus, you can use live data on the web.

2012-04-04 00:43
by Ian