For web developer

Archive for the ‘Charts’ Category

Google Finance-Like Charts With JavaScript: HumbleFinance

leave a comment

HumbleFinance is an HTML5 data visualization tool that looks and functions similar to the Flash chart in Google Finance.

It makes use of the Prototype and Flotr libraries and is not limited to displaying financial data but any two 2d data sets which share an axis.

HumbleFinance Chart

The data needs to be stored in JavaScript variables and requires 3 parameters to be set before running the function to create the chart.

It is possible to manually select a part of the data (with a slider-like interface) and zoom to that part. This is a very useful function when working with large datasets,

Requirements: Prototype and Flotr libraries
Compatibility: All Major Browsers

Written by kisyrua

May 6th, 2011 at 7:19 pm

Posted in Charts

Tagged with ,

Powerful PHP Charts Library: JpGraph

leave a comment

JpGraph is a feature-rich PHP library for creating good looking charts.

It has support for almost any chart type including bar, line, pie, scatter, radar, field, stock and much more.

Some of the charts have the option to be created in 3D and they are all web-friendly (usually 2-3 kb).

JpGraph

The library is very flexible, any number of plots can be drawn in every chart, objects can be rotated, etc.

JpGraph has built-in images for plot marks including 3D rendered markers like diamonds, squares, bevels, balls and pins.

And, a very original feature, it has a pre-defined function to create flags for 200+ countries.

To sum up, the library is really an impressive one and it is free to be used in non-commercial, open-source or educational projects.

Requirements: PHP 4.3+ and GD library

Written by kisyrua

May 6th, 2011 at 7:19 pm

Posted in Charts

Tagged with ,

Powerful HTML5 Graph Library: RGraph

leave a comment

RGraph is a free graph library that uses the HTML5 canvas tag.

Using the library, it is possible to create a wide variety of graph types:

bar, pie, donut, gantt, radar, funnel, bi-polar charts
line and scatter graphs
LED display
meter
odometer
progress bar

RGraph HTML5 Chart

The charts are interactive (respond to mouse-overs and clicks) and, optionally, they can load with animations or zoom to a specific point.

There is also an annotation feature where you can draw over the graphs for highlighting them.

P.S. RGraph is only free for personal use.

Requirements: No Requirements
Compatibility: Firefox 3.5+, Chrome 2+, Safari 4+, Opera 10.5+ or Internet Explorer 8.

Written by kisyrua

May 6th, 2011 at 7:19 pm

Posted in Charts

Tagged with ,

Data And Content Visualization: Simile Widgets

leave a comment

Simile Widgets is a set of open source web widgets for visualizing data & content.

They are actually a spin-off from the Simile Project & improved over time by a community of open-source developers.

Currently, it includes 4 widgets:

Timeline

Simile Timeline

Timeline is for creating an interactive display of events within a timeframe.

It can be dragged or controlled with the mouse wheel & events can be clicked to see the details.

Timeplot

Simile Timeplot

Timeplot is a DHTML widget for plotting time series easily.

On mouse-overs, it can display the values interactively (it works with the same data format that Timeline supports).

Runway

Simile Runway

Runway is a Flash-based implementation of the popular iTunes-like coverflow.

The colors, fonts, reflection & transit,in values can be configured easily. Also, it can fire events to update the web page's Javascript.

Exhibit

It is for creating web pages with advanced text search and filtering functionalities, with interactive maps, timelines, & other visualizations.

You can find more details on a previously published WRD post on Exhibit.

Requirements: No Requirements
Compatibility: All Major Browsers

Written by kisyrua

May 6th, 2011 at 7:19 pm

Posted in Charts

Tagged with ,

Creating Bar Charts With MooTools And jQuery

leave a comment

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

jqBarGraph (for jQuery)
mooBarGraph (for 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.

Requirements: MooTools or jQuery
Compatibility: All Major Browsers

Written by kisyrua

May 6th, 2011 at 7:19 pm

Posted in Charts

Tagged with

Interactive JavaScript Charting Library: Grafico

leave a comment

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.

Requirements: Raphaël & Prototype.js
Compatibility: All Major Browsers

Written by kisyrua

May 6th, 2011 at 7:19 pm

Posted in Charts

Tagged with ,

Creating Bar Charts With jQuery: TufteGraph

leave a comment

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.

Requirements: Raphaël JS Library (included), jQuery enumerable plugin (included)
Compatibility: All Major Browsers

Written by kisyrua

May 6th, 2011 at 7:19 pm

Posted in Charts

Tagged with

Interactive & Zoomable JS Charts: dygraphs

leave a comment

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.

Requirements: No Requirements
Compatibility: All Major Browsers

Written by kisyrua

May 6th, 2011 at 7:19 pm

Posted in Charts

Tagged with ,

Highcharts: Interactive JavaScript Charts

leave a comment

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.

Requirements: No Requirements
Compatibility: All Major Browsers

Written by kisyrua

May 6th, 2011 at 7:19 pm

Posted in Charts

Tagged with , , ,

JavaScript Charting Library – gRaphaël

leave a comment

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.

Requirements: Raphaël graphics library
Compatibility: Firefox 3.0+, Safari 3.0+, Opera 9.5+ and IE 6.0+

Written by kisyrua

May 6th, 2011 at 7:19 pm

Posted in Charts

Tagged with ,