Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Charts’ Category

Ivan Lazarevic is sharing 2 different plugins for creating bar charts with jQuery & MooTools:

Both plugins can create simple or stacked bar charts & data to be displayed is loaded with an array.

JavaScript Bar Charts

jqBarGraph has support for animated loading of the charts however mooBarGraph offers more features like:

  • url bars
  • info boxes (interactive charts)
  • negative values
  • AJAX data loading

They are both very easy to use & support all major browsers.

Grafico is an open source JavaScript charting library built with Raphaël & Prototype.js.

It is possible to create multiple types of charts like line, area, bar & stacked charts, sparklines and more.

Grafico

Each chart type has numerous API options to customize it’s look & behavior.

Charts created with Grafico can, optionally, be interactive which means they can provide data when hovered, clicked, etc.

The library is well-documented & supported with examples.

TufteGraph is a jQuery plugin that can create standard & stacked bar charts inside any given element.

It it configured mostly by dynamic functions which simplifies the usage by allowing for a really compact API.

jQuery Bar Charts

A standard chart comes with no style but it can be totally customized with CSS (download package includes an example).

Important Info: The charts created work in major browsers. Although the example in the plugin's website doesn't seem to work in IE, the raphael.js file used can be replaced by the latest version of Raphaël JS library which will fix the problem.

dygraphs is an open source JavaScript charting library for displaying data of time series.

It can show values on mouseover that makes discovering the values easier & zooms any selected area.

Zoomable JavaScript Charts

The data can be called from a CSV file or mentioned in the code staticly (in CSV format).

The library can handle fractions intelligently & supports error bands around data series.

It works in all major browsers (IE requires excanvas) & it is compatible with the Google Visualization API.

Highcharts is a JavaScript charting library for creating interactive charts in various types (line, spline, area, areaspline, column, bar, pie & scatter).

The library offers a high-level of usability with features like:

  • tooltip labels displaying info on hovered items
  • zooming on a specific part of the chart
  • text rotation on labels for a better readability

Highcharts: JavaScript Charting Library

Highcharts has an admirable effort in browser compatibility. For standard browsers it uses the canvas element and in some cases SVG for the graphics rendering. In Internet Explorer, graphics are drawn using VML. Besides all major browsers, it works in iPhone & IE6.

The library is offered for free to be used in personal/non-commercial projects & requires a license for commercial ones.

gRaphaël is an open source JavaScript charting library that is based on Raphaël graphics library (WRD link).

It is capable of generating both static & interactive outputs including pie, bar, line or dot charts.

gRaphaël - JavaScript Charts

The charts are created with VML & supports the most popular browsers like Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0.

There are some beautiful demos provided including the interactive pie chart & the dot chart.

MilkChart is an easy-to-use yet robust MooTools library for converting tables into charts.

It uses the <canvas> tag and supports the following chart types:

  • Column
  • Bar
  • Line
  • Scatter
  • Pie

MooTools Chart Library

 The library has a bunch of options to customize variables like:

  • widths, heights
  • font, font size, font color
  • chart line colors & weights
  • showing row names (on/off)
  • & more..

MilkChart does not come with a demo page that you can play with but it is well-documented & a detailed info to start with can be found here.

Although MS Excel & Powerpoint seems a little bit out of the scope for web designers/developers, many web applications are built with reporting options that can be exported, so, they can be easily used as templates.

Free Excel Charts

Juice Analytics is sharing 15+ free Excel & Powerpoint charts that can beautify any report.

There are simple-to-advanced examples of various chart  types like bar, line or pie charts which comes with sample data that makes customizing faster by editing the values used.

Visualize is a jQuery plugin which converts tables to charts & graphs using the HTML 5 canvas tag.

The usage of tables is very important the data is already formatted in a way that is accessible to users browsing the web with a screen reader or other assistive technology.

jQuery Visualize Plugin

The plugin offers a very easy usage as calling a function like: $('table').visualize(); is enough for creating a line, pie, bar or an area chart from a table.

Visualize offers various methods for customizing:

  • the type (line, pie, bar or area)
  • width & height
  • title
  • color
  • margins
  • & more

Here is a customizable demo to test the plugin completely.

InfoVis is an open source JavaScript data visualization toolkit offering multiple ways to present data using the canvas tag.

It is feeded with data in JSON format & some of the ready to use visualizations are:

  • treemaps
  • radial layouts
  • bar charths, pie charts & more…

InfoVis JavaScript Visualization

Besides a static presentations, InfoVis supports interactive animations which can be fired by any event (like mouseovers, clicks).

It has various methods to add/remove/update nodes & manipulate every aspect of the outputs.

The toolkit doesn’t depend on a JavaScript framework, can be used with any of them & easily updated for adding new features to it.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com
HotScripts Marketplace