aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Easy charts with HTML5 Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Easy charts with HTML5" Watch "Easy charts with HTML5" New topic
Author

Easy charts with HTML5

Roman Rodriguez
Greenhorn

Joined: Sep 19, 2012
Posts: 7
Hi Rob, welcome to the ranch!

I never tried to learn HTML5 yet: it looks promising, but I don't find the time for it. I usually have to write small applications just to plot some (x,y) points from an external file into a chart. I think it would be great to be able to do this easily on HTML5, ans sure it would cheer me up to finally learn it.

Do you happen to know some easy chart library with lots of examples for HTML5?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61421
    
  67

I've used HighCharts very successfully. It works with HTML5 and has fallbacks for earlier browsers.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Jayesh A Lalwani
Bartender

Joined: Jan 17, 2008
Posts: 2402
    
  28

How does HighCharts perform on IE8? Is it significantly slower than IE9?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61421
    
  67

I have not done any performance comparisons.
Jayesh A Lalwani
Bartender

Joined: Jan 17, 2008
Posts: 2402
    
  28

Fair enough. I was just wondering. I just tried out the demos and they don't look to be particularly slow on IE8. I don;t k anyone want to to do an app that shows large amounts of data on a webpage anyways. I mean if you want to draw 200K data points in your chart, you will probably have bigger problems than the performance of the java script
Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 296
    
    5

There are several HTML5 technologies which can be used for charts.

The best one is SVG, it is based on XML and so you have document object model you can manipulate dynamically just like you can manipulate the regular HTML DOM. A library which provides backwards compatibility with IE8 is Raphaƫl (http://raphaeljs.com/) and has a charting library built on top of it: http://g.raphaeljs.com/. However my current favourite SVG graphing library is D3 (http://d3js.org/), unfortunately I haven't yet had the chance to use it in a 'real' project.

The next (and more popular) technology for charts is the Canvas element. Although it is more for bitmap manipulation (eg. games) it has an API which developers seem to be comfortable with and so it has seen a lot of activity. There are many alternatives, have a Google for 'canvas charts html5' or something similar. For example I found this one: http://www.rgraph.net/

If you're feeling particularly adventurous and don't mind not really supporting IE you could also look at WebGL. If used the three.js library (http://mrdoob.github.com/three.js/) to build a 3D barchart as part of a prototype I built a few months back and it was quite straightforward. It can do software rendering to canvas for browsers which don't have WebGL (IE, anything without recent graphics cards) which works but is slow.


Read my books: Hello! HTML5 & CSS3 | HTML5 in Action | Read my blog
Jayesh A Lalwani
Bartender

Joined: Jan 17, 2008
Posts: 2402
    
  28

Any of these libraries allow the user to manipulate the chart? The use case that I am thinking of is :- the chart starts of with a line graph. the user should be able to pick a point on the line graph and drag it up and down. I want to be able to get notifications when user modifies the chart so I can have the backend do some processing.

Is this something that any of these libraries give right out of the bat, or do I need to build my own charting using Canvas to do this
Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 296
    
    5

I think all of them will allow that sort of thing (otherwise you might as well generate a static image server side) but the exact details of how you tie processing of user input back into the display of the graph is going to slightly different for each one.
Jayesh A Lalwani
Bartender

Joined: Jan 17, 2008
Posts: 2402
    
  28

Thanks Rob. Appreciate it
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Easy charts with HTML5