How do they draw the charts/graphs on stackoverflow?

Question

I spent ages learning VML and creating charts for a website once, but since VML only works in Internet Explorer, it's not much good these days.

I notice stackoverflow has graphs on my profile page, under 'reputation', but I wasnt able to see how they did it.

Can anyone suggest a way to create client-side charts or diagrams, that work in all browsers? I do not want to use the server-side method whereby an image file is created on the fly. I may wish to interact with the chart with JavaScript too.

[Edit - it's not just charts I want to draw. Perhaps little diagrams too!]

Thanks.

score 9 · Accepted Answer · answered Nov 12 '08 at 12:34

9

Flot is excellent.

answered Nov 12 '08 at 12:34

Galwegian

41,475
16
112
158

I was going to suggest SVG, but flot looks amazing. – John Ferguson Nov 12 '08 at 12:45
SVG requires users download and install a plugin i believe? – Magnus Smith Nov 19 '08 at 10:54
SVG works natively with pretty much everything but IE, which has VML instead. Google have a JS compatibility layer they're releasing (not quite sure if it's out yet) that emulates SVG in IE using VML - much the same way as ExCanvas simulates a canvas. So yes, you can use SVG now, without a plugin, and even in IE if you're feeling brave. – ijw Aug 26 '09 at 17:09

score 3 · Answer 2 · edited Feb 08 '17 at 14:09

3

Google created a great public chart API for this purpose.

Examples:

line chart pie chart alt text

edited Feb 08 '17 at 14:09

Community

1
1

answered Nov 12 '08 at 12:45

mkoeller

4,469
23
30

Great, I need to find a use for that ;-). – Toon Krijthe Nov 12 '08 at 12:54
1

I didn't think you could interact with Google Charts once they were rendered..? – Galwegian Nov 12 '08 at 13:03
I have used these before - they are great! But in the question I did say I wanted a client-side process. – Magnus Smith Nov 12 '08 at 13:06

score 3 · Answer 3 · edited Jan 18 '21 at 12:38

3

In episode 24 of the stack overflow podcast it is mentioned that jQuery is used. A commentor on this article suggests that flot is the library used.

edited Jan 18 '21 at 12:38

Community

1
1

answered Nov 12 '08 at 12:45

Chris Lowis

560
4
14

score 0 · Answer 4 · answered Nov 12 '08 at 12:45

0

Check out the Google Chart API. You can do all sorts of sophisticated things with minimal effort - by you at design time and by you server at run time. Nice.

answered Nov 12 '08 at 12:45

Daniel M

1,547
12
12

I have used these before - they are great! But in the question I did say I wanted a client-side process. – Magnus Smith Nov 12 '08 at 13:11

How do they draw the charts/graphs on stackoverflow?

4 Answers4