Interactive JavaScript charts for your web projects

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9072
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I recently have been looking into frontend charts to display to visitors, mainly for use of our upcoming tools area on Ozzu. My two choices were either going to be a Flash based chart like we currently use for polls here, or a Javascript based chart. I preferred to have a Javascript based solution for numerous reasons including having the chart work on the iPhone. As you should know, Flash does not work on the iPhone or iPad.

As far as Flash based charts, the coolest I have found in my opinion was FusionCharts, and it seems to be a popular choice and have outdone every other choice I have looked at, both Flash and Javascript based charts except for ONE:

Highcharts JS

As soon as I visited the website I was impressed with the style of the charts, the smooth animation effects, and how much you can adapt the charts to suit your purpose. Here is a screenshot:


Take at numerous highcharts demos here:

Highcharts Demo Gallery

After going through many of the demos, all I can say is wow. It looks awesome, its cross-browser compatible, and its just as cool as a Flash based chart. This is all Javascript based and works off of the jQuery framework, or alternatively you can use Moo Tools or the Prototype framework instead. These interactive Javascript based charts can be used on your website or web applications and supports numerous charting types including line, spline, area, areaspline, column, bar, pie, and scatter.

It works in all of the modern browsers including Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Opera, and Safari. Since this chart is all Javascript based and uses no Flash it will also work on Apple's iPhone and iPad. Perfect! In the majority of the browsers Highcharts usings SVG for graphics rendering, while it uses VML for Internet Explorer. Internet Explorer doesn't actually support SVG until version 9, so this allows the charts to work in Internet Explorer 6, 7, and 8.

Features worth noting include:

Free for Non-commercial
Open Source - allows for your own personal modifications and flexibility
Based on native browser technologies (no flash or proprietary software required)
Pure Javascript and works with any of the following frameworks: jQuery, MooTools, or Prototype
Numerous Chart types
Simple Configuration Syntax
Dynamic - you can add, remove, or modify the chart in real time after chart creation (very cool)
Multiple Axes - allows you to compare variables on different scales (ie temperature versus rainfall)
Tooltip Labels
Datetime Axis - Since many users tend to use dates with charts, Highcarts is very intelligent about time values
Export and Print - If you enable the export module, users can export to PNG, JPG, PDF, or SVG format (also very cool!)
External Data Loading (very cool)
Inverted Chart or Reversed Axis
Text Rotation for Labels

When you go through the Highcharts Demo Gallery you can get ideas for all sorts of different uses that you can use. One example that stands out to me is how you could show your daily visits from Google Analytics via AJAX to show a much better chart (I have never liked Google Analytic's charts). A screenshot is below:


If you take a look at the Highcharts Options Reference you can see how customizable this Javascript Chart library is. Includes all sorts of great options which makes this, in my opinion, the best choice for what you would want to use for charts on your website. Highcharts blows all of the other Javascript based solutions out of the water, and is just as a good or even better than the Flash based charts that exist.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13506
  • Loc: Florida

Post 3+ Months Ago

Definitely a cool alternative to the Google Chart API I typically use. The Google API returns images, whereas this stuff can be pretty interactive by the looks of it.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9072
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

It is completely interactive especially when combined with AJAX. Take a look at this:

That takes live random data and you can see the chart dynamically continues to update. How cool is that? You could easily make this demo AJAX based and grab data from the server if you wanted.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 75 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2015. Ozzu® is a registered trademark of Unmelted, LLC.