HTML5 Graph

November 21st, 2012

I started this project after I heard about the <canvas> tag that was included in the HTML5 spec. Since I wanted to learn more about HTML5 and the new things in it, I decided to focus on this particular tag and use it as a learning experience.

Check it out on Github!

Discussion

There are 18 comments so far. Join in!

Grosir baju bayi surabaya

– December 5th, 2012 at 8:51pm

Thanks like your HTML5 Graph Chris Valleskey

Reply
zahid ansari

– December 8th, 2012 at 6:35am

Hi Chris…nice graph. Are you thinking of expanding it to include other type of graphs as well? some simpler HTML5 graphs are here code.google.com/p/simple-jquery-linear-graph/

Reply
- Chris Valleskey
  
  – December 8th, 2012 at 10:40am
  
  At the moment I don’t plan on including any other types of graphs. Right now my time is filled up with other projects. But, that’s why I hosted it on Github. If people want to contribute and I am happy to merge in their additions!
  
  Reply
Mohsin Ahmed

– December 14th, 2012 at 12:50am

Nice work… really help me out….

Reply
Chris Averill

– December 16th, 2012 at 2:18pm

Love this script! It’s so clean and simple. Major props to you for pulling this together just as a learning project!

As it is, it doesn’t quite do what I need it to do. Can you give me a nudge in the right direction regarding the steps that will be necessary for me to tweak this to use a static data set?

And thanks again for sharing html5-graph. :)

Reply
Chris Averill

– December 16th, 2012 at 2:41pm

Oh, just kidding. I found the ‘data’: [x1, x2, x3, …] argument to replace the ‘call’ arg.

Thanks!

Reply
- Chris Valleskey
  
  – December 16th, 2012 at 2:44pm
  
  Cool, glad you found it!
  
  Reply
Felix

– January 29th, 2013 at 5:49am

how to display axis?

Reply
- Chris Valleskey
  
  – January 30th, 2013 at 2:45pm
  
  Do you mean labels for the grid? Unfortunately, there is no way to display that information at this time. Sorry!
  
  Reply
Skurt

– February 15th, 2013 at 9:17am

I’m possibly just stupid and I’d like to point out that I mean no offense to anyone,
but I’ve downloaded the .js file, launched notepad and inserted there what’s in usage section, changed the path to .js file to the correct one and save the text as a webpage.
It didn’t work :(
For quite a couple of years now I keep my faith that one day people will publish software that works simple or according to provided manual :(

Reply
- Chris Valleskey
  
  – February 15th, 2013 at 9:45am
  
  Hey, it’s not your fault! I left out the HTML canvas tag in the usage section, so I added that line in on github. If that fails to fix things, feel free to email me at “me (at) chrisvalleskey.com” (no quotes). Thanks for the feedback!
  
  Reply
Faraz

– February 22nd, 2013 at 6:35am

Thanks!
https://github.com/fffaraz/Realtime-Bandwidth-Grapher

Reply
Pete

– April 19th, 2013 at 8:00am

Is there a way to add multiple levels of charted data?
Say for example, I wanted to chart the value of the Dollar and the Pound on top of each other.
Cheers,
P

Reply
- Chris Valleskey
  
  – April 20th, 2013 at 3:11pm
  
  Hey Pete,
  
  Unfortunately there is no way to show multiple levels. If you’re looking for something more robust you could try JS Charts or Flot.
  
  Reply
  - Pete
    
    – April 23rd, 2013 at 4:20am
    
    It would be ok if I could get two of these graphs to appear on the same page… is there a trick I’m missing?
    
    Reply
    - Chris Valleskey
      
      – April 25th, 2013 at 12:21pm
      
      You’ll have to instantiate two graphs in the JS. Hopefully this example can help (see the bottom). Good luck!
      
      Reply
Joe M

– July 24th, 2013 at 7:26pm

Wow! Really Nice piece of HTML. I’m wondering if there is a simple way of just plotting a number of points, and not constantly refreshing? Either way this is very useful.

Reply
armin

– February 16th, 2015 at 7:09am

script is awesome. How to change range: [0,100] dynamicaly? I need to change max value for range to sometimes grater than 100. Is this posible?

Reply