Archive for the ‘Charts’ Category

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.

jqPlot is a jQuery plotting plugin which can generate very good looking line and bar charts.

The plugin offers various features like:

  • different chart style options
  • ability to rotate axis text & customize date axes
  • tooltips, data point highlighting & more..

jQuery Plotting Plugin

jqPlot itself has a plugin support too and it be extended with new chart types & options.

Almost every aspect of the charts created can be controlled like the background of the grid, show/hide ticks, font sizes/types & much more.

The plugin is very well-documented & provides very nice examples.

Axiis is an open source data visualization framework & based on Degrafa, Flex & ActionScript 3.0.

It is a resource for both beginner & expert developers to create elegant charts.

Flex Data Visualization

Axiis comes with both ready-to-use visualization components & abstract layout patterns + rendering classes that makes it possible to create custom visualizations.

To view some beautiful examples of this framework, click here.

  • Tags:
  • Filed under: Charts, Goodies, MIT License
  • 0 Comments
  • Descry is a project to demonstrate the power of data and information visualization as a communication tool.

    Currently, there are 4 examples provided, all built with Silverlight & come with the source codes.

    Silverlight Visualization

    There are also 2 very nice articles shared on visualization:

    For a demo, click here.

    P.S. Descry is not a toolkit. It contains classes and fragments of code or design elements that can be reused.

    Kap Lab is presenting 5 impressive & free visualization components for Flex.

    All components are AS3 based & some of them offer multiple layout options which makes them very flexible in means of presentation.

    Flex Charts

    The components are:

    • Diagrammer (for diagram creation, mind mapping…)
    • Visualizer (for displaying hierarchies like organizational schemas..)
    • Radar Chart (for data analysis, comparing data items…)
    • Treemap (for inventory management, social news mapping…)
    • Ring Chart (for displaying statistics)

    Examples are provided for each component with the sources & there is a support forum where users share their experiences.

    P.S. Download requires a free membership.

    Protovis is a JavaScript library for visualizing data using the canvas element.

    Custom views of data can be composed with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position.

    Protovis Canvas Charts

    Although Protovis looks complicated, it is very easy to understand (specially for JavaScript users) & has a straight forward logic which offers a flexible way to create any type of visualizations.

    To see more, you can check the API documentation (very well-documented) & examples built with it.

    feed-holder
    FeedBurner
    • PSD to HTML
    • PSD to HTML
    • EasyImg - Internet Graphics Engine
    Virtual Private Servers - eTecc Web Hosting
    RapidxHTML - Converts Your PSD into XHTML Rapidly
    • activeCollab | Project Management
    • MailChimp
    • Manage your clients email marketing with sendcube

    Vivvo CMS - Web Publishing at your Fingertips