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

Archive for the ‘Charts’ Category

In general, gauges are built with Flash as they require an animation.

Rather than Flash gauges, this is a pure JavaScript & canvas gauge.

JavaScript Canvas Gauge

How it works?

The code sets a starting and an end value. Using the HTML Canvas element, it draws the needle and simply rotates it according to the current data. For more information about Canvas element, check this WRD post.

As Internet Explorer does not support Canvas element natively, this Canvas gauge uses IECanvas for that.

Working demo can be found here.

Tip:

There is also a dynamic Flash gauge at the same page.

fgCharting is a jQuery plugin which helps us to create accessible charts from standard table data with canvas.

Using this chart plugin, we can create several types of graphs, such as pie, line, area, and bar.

jQuery Chart Plugin

As canvas is not supported by default in Intenet Explorer, you can use ExplorerCanvas to add this functionality to it (WRD post for more details).

Visifire is a set of open source Microsoft Silverlight chart components.

Visifire lets you create stunning charts with ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails or just simple HTML in minutes.

Silverlight Charts

In order to use this great Silverlight chart library, you don’t need to know anything about Silverlight. Simple HTML knowledge is enough.

To see how beautiful the results are, check the Chart Gallery or Chart Designer.

MooWheel is a mootools based script which visualizes data and connections between items like a wheel.

MooWheel uses CanvasText and ExCanvas libraries other than mootools which are already included in the package.

Mootools Wheel Script

Usage of this data visualization script is pretty simple. You simply create a data array, add a canvas tag and call the function.

There is a very nice demo here.

CSS Globe has a chic animated progress bar built with CSS and an animated GIF file.

It is simply an EM tag above an animated GIF file which is blocking the part of the GIF file to creating the progress bar stop effect.

CSS Progress Bar

As this progress bar is only a visual trick, it can not show a "live" progress but only a static one which the percentage of progress to be shown was defined before the page is loaded.

Smoot is a tool, developed with xajax and Pear::DB for creating diagrams of icons and links between them.

Features include Google Maps and Google Earth integration, configurable tool palettes, and automated palette generation from a Google local query.

Ajax Diagram Library

Smoot builds relations between objects with mouse clicks and the result can be stored easily. This nice tool can be a starting or an inspiration point for many projects like "online heritage services", "online diagram services" and much more.

Open Flash Chart is a free flash chart library which flash charts can be generated via data from php, perl, python, java, asp, asp.net (any dynamic languge) or a text file.

Using Open Flash Chart is as simple as pointing the data to this free flash chart object. To make it simpler, there are ready to use PHP, Perl, Python, Java classes.

Free Flash Chart

Charts supported by Open Flash Chart:

  • Data Lines Chart
  • Bar Chart
  • 3D Bar Chart
  • Glass Bar Chart
  • Fade Bar Chart
  • Sketch Bars Chart
  • Area Chart
  • Bars + Lines Chart
  • Pie Chart
  • Scatter Chart
  • Candle Chart

Free Flash Chart Component

Tip: Php Developers, there is a specific php version of XML/SWF Charts here.

XML/SWF Charts
is a very nice tool for creating attractive charts. Creating bar charts, pie charts, line charts & more is posible with XML/SWF Charts.

Using XML/SWF Charts is free (some limitations).

How To Use?

Create an XML source to describe a chart, then pass it to this tool’s flash file to generate the chart. The XML source can be prepared manually, or generated dynamically using any scripting language (PHP, ASP, CFML, Perl, etc.)

Free Flash Chart

Features:

- Web charts and graphs from dynamic data
- Live and interactive chart updates without reloading the web page
- Clickable charts, and drill-down
- Animated transitions
- Printable charts
- Simple and flexible chart generation
- Quality Flash graphics
- Supports unicode text to display special characters and any language

Free Chart Component

Chart types:

- Line charts
- Column charts
- Stacked column charts
- Floating column charts
- 3D column charts
- Stacked 3D column charts
- Parallel 3D column charts
- Pie charts
- 3D Pie charts
- Bar charts
- Stacked bar charts
- Floating bar charts
- Area charts charts
- Stacked area charts
- Candlestick charts
- Scatter charts
- Polar charts
- Mixed charts
- Composite charts
- Joined charts

Creating a chart is sometimes complicated with components.

Google has a Google-way to create charts with the simple to use Google Charts API.

The chart below is generated online with the API using the code:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250×100&chl=
Hello|World

Sample chart

Different chart types like line charts, bar charts, pie charts, venn diagrams, or scatter plots are supported. Looks can be configured with lots of style, color, label choices

Uptime Robot
feed-holder
FeedBurner
HotScripts Marketplace
PSD2HTML.com