tripwire magazine

Charts and Graphs are ideal to visualize data in order to quickly give your readers an understanding of the nature of a given problem or recent developments. Whatever type of data presentation you prefer or suits you data (pie charts, bubble charts, bar graphs, network diagrams etc.), there are many different options but how do you get started and what is technologically possible?

In this article tripwire magazine present more than 50 Essential Techniques and Tools for Visualizing your data on a website.

Introduction

Images says more than a thousands words. It is common sense and wise people has followed this rule for centuries by creating illustrations of thier ideas and thoughts. Today it is easier than ever as the technology for presenting nearly any type of information as a graph or chart on a web page is getting really mature. Reading through this article you will be faced with the problem on what technology and specific implementation you should use. It is not a trivial question and I recommend that you use comments on this article to share your ideas, concerns etc. with peer readers. This way you may get the input from the community that you need to create the optimal solution.

The article has been organised into the following sections.

Section 1: How to visualize you data using CSS

Section 2: How to visualize you data using FLASH-based solutions

Section 3: How to visualize you data using Javascript-based solutions

Section 4: How to visualize you data using Online Tools and Services

Section 5: How to visualize you data using Server-side Solutions

---

More articles that you should consider reading.

		75+ Excellent Free Fonts For Professional Design In this article tripwire magazine presents an overview of more than 75 excellent free fonts you should consider using for your designs. Not all free Fonts are worth using but the Fonts listed in this article have all been picked out because they are better than the rest.
		80+ Photoshop Tutorials: Practical Web Interface Design In this article tripwire magazine present you more than 80 high quality Photoshop Tutorial that guides you step by step in building up a web interface all the way from scratch.
		35+ very Useful And Powerful CSS techniques In this article tripwire magazine provides a list of very useful CSS Techniques that you can use freely to make your website or blog more dynamic and inprove its Look & Feel. The article will also give you an introduction to CSS and why it should be used instead of table-based layouts. hand-picked because they deserve to.

---

How to visualize you data using CSS

Pure Css Line Graph

My intention was not only to enable data visualization to people that don’t feel comfortable with using various scripting languages but also to demonstrate the power of css and present a way of using css a bit differently.

View demo

Line Graph script

This is a purely DHTML/ CSS based Line Graph script. It loads fast and blends in with the rest of the page. You can even use a transparent background for it!

Pie Graph script

This is a purely DHTML/ CSS based Pie Graph script. It loads fast and blends in with the rest of the page. You can even use a transparent background for it!

Dynamic Pie Chart with CSS

DHTML / CSS based bar graph

This vertical bar graph is done completely using DHTML and CSS! Unlike an applet based solution, this loads fast and blends in with the rest of the page. You can even use a transparent background for it!

DHTML / CSS based line graph

This line graph is done completely using DHTML and CSS! Unlike an applet based solution, this loads fast and blends in with the rest of the page. You can even use a transparent background for it!

SAC – Simple accessible Charts

Easy, fast and accessible way to display simple Data and beautify them with CSS. It needed some time and a little bit wired thinking, but It works.

Demo : View the demo.

CSS for Bar Graphs

This tutorial showcases three ways of graphing data. The Basic CSS Bar Graph example involves a <div> to contain the graph, and styling a <strong> element as a block element and using percentage widths to adjust the width. A great modification of this technique is to use a paragraph <p> element instead of a <strong> tag for semantically-correct HTML. The two other examples use a definition list and unordered list to graph multiple bars.

PHP and CSS- A Simple Graph

Here’s an easy way to display a simple percentage graph using PHP to work out the percentages and do the maths and CSS to display the data on our page.

Demo : View the demo.

Accessible Data Visualization with Web Standards

Author Wilson Miner discusses the concept of accessible, standards-compliant techniques for data visualization mentioning the benefits, limitations, and alternatives in brief. The A List Apart article shows you three data visualization techniques using a basic structure of unordered lists.

View Demo #1 – View Demo #2 – View Demo #3

AjaxMGraph

Ajax Graph based on Prototype.js. A very nice interactive graph script.

Vertical Bar Graphs using CSS and PHP

Who wants to use Excel to make a new graph each week? Using CSS and PHP you can create attractive bar graphs that are always up to date.

Demo : View the demo.

CSS Vertical Bar Graphs

Eric Meyer shows us another technique for graphing vertical bar graphs using unordered lists similar to the “CSS for Bar Graphs” technique from Apples To Oranges.

Creating a Graph Using Percentage Background Images

In this technique, you use pre-made background images to shade in the appropriate data. The downside of this technique is that you’re limited by the pre-filled background images that you have and making more to suit your needs will increase the amount of classes you assign to your data – increasing the file size of both your CSS and HTML file as well as increasing the number of HTTP connections needed to render the page because of the background images

Pure CSS Data Chart

This example uses a definition list for mark-up. A <span> element inside the <dd> definition list item serves as the element that gets adjusted in height to shade the appropriate area. An <em> element is used to display the numerical representation of the shaded area, absolutely-positioned in the middle of the bar.

View Demo

CSS Scatter Plot

A scatter plot is another great way to graph two-dimensional data. In the example, each data point is clickable, so a possible modification to this technique is to use a modal window that displays extra information about a particular data point.

Definition List Bar Chart

This technique shows two examples of styling definition lists into horizontal bar charts. Each definition list item is assigned a class that adjusts its width using percentage units.

Super simple CSS bars

Demo: View the demo.

Pure CSS/HTML Bullet Graph

Demo: View the demo.

CSS Stacked Bar Graphs

There are plenty of CSS bar graph interpretations, but none of them did stacked bar graphs. So I’ve done it here. Based off Alen Grakalic’s Pure CSS Data Chart.

Demo : View the demo.

The Standards Way to Do Dynamic Data

By using a standardized set of web technologies, it is possible to produce interesting data visualizations that degrade gracefully in the face of browser inferiority. Through careful semantic crafting of our XHTML containers, clever use of CSS, and a splash JavaScript, we can build data visualizations that enhance our message and communicate better to our users.

Demo : View the demo.

Silo graph for material level

This article describes how to display material level in silo (bunker). Two pictures are pepared for this type of graph. First one is picture for level of material, similar to pictures in other bar graphs. The second picture is outline contour of bunker. This is transparent .gif, which has two white colors. One opaque white is used for outer space of contour, second white color, with another index of colors, is for inner part of bunker and for this color full transparency is set up.

Sandwich graph

For drawing sandwich graph, several pictures are needed. Background graph picture includes scale lines and dark gray part for legend. Part of background can be also description of scale, if worsen quality at printing admitted.
It is possible to experiment with bar images. There is only one limitation, bar must be symetrical in one axis. For vertical bar graph balancing in horizontal axis is required.
It proved to me the minimal height of bar image 16 pixels. Images less then 8 pixels, when magnified more than 10 times in one axis, sometime disappears. But it was many years ago in old browser.

Production plan graph

Entire graph is allocated into block which has style position: relative attached. This block is container for graph drawing, inside of this block another graphic elements with assigned style position: absolute can be placed.

Accessible Bar Chart

This technique showcases a method for semantic, accessible bar charts by using a table as the basic structure of the bar graph and using CSS to stretch a background image to its appropriate width.

Simple bar graph with help of CSS

Real time bar graph by help of AJAX and CSS

Here is live demo of dynamic CSS bar graph, which reads data from web server by help of Ajax functions, description of HTML, CSS and JavaScript code for data transmition, data representation and graph sliding. Graph displays response time of ping executed by web server.

Downtime graph

Graph example here is cut short by legend, by links to daily report printing, by links to detail description of downtime and by navigation for month and production line selecting. To preserve some dynamic of graph function onMouseOver() is kept running. Instead of legend, short explanation: green marks technological downtime, orange marks maintenance downtime, blue is job change, white means that production line is not used, dark gray is for all others types of downtime events.

CSS Diagrams

A classic. A technique to display CSS-based diagrams with absolute and relative positioning.

How to visualize you data using FLASH-based solutions

FusionCharts Free

FusionCharts Free is a flash charting component that can be used to render data-driven & animated charts for your web applications and presentations.

It is a cross-browser and cross-platform solution that can be used with PHP, Python, Ruby on Rails, ASP, ASP.NET, JSP, ColdFusion, simple HTML pages or even PowerPoint Presentations to deliver interactive and powerful flash charts. You do NOT need to know anything about Flash to use FusionCharts. All you need to know is the language you’re programming in.

amCharts

mCharts offers a flexible and easily customizable solution for generating charts “on the fly”. There are 4 sets with predefined Pie & Donut, Line & Area, Column & Bar and Scatter & Bubble. Generated Flash-files are dynamic and can be presented in 2D or 3D. The loader can load data from XML or CSV, so you can easily export data from Excel, dynamically generate data file with PHP, ASP, .NET or other programming language. Some flash-charts also have animation effects. amCharts is linkware which means that you have to place a link to the source if you’d like to use it for free. You can also purchase a single site license for 85 Euros (~$117).

Flare

Flare is an ActionScript library for creating visualizations that run in the Adobe Flash Player. From basic charts and graphs to complex interactive graphics, the toolkit supports data management, visual encoding, animation, and interaction techniques. Even better, flare features a modular design that lets developers create customized visualization techniques without having to reinvent the wheel.

Open Flash Chart (OFC)

OFC is an open-source project. The Flash chart offers 35 chart variations; among them a number of bar charts, pie charts and line charts. Provided tutorials explain how the script can be extended with further functionality such as mouse-over effects and how the database can be queried for some values and the results then displayed in a graph. Open Flash Chart uses Flash and PHP; data can be stored in plain text (.txt). The package, available via Sourceforge, includes a number of examples and samples.

AnyChart Flash Chart Component

AnyChart is a more powerful alternative to Open Flash Chart. It is fully cross-browser and cross-platform and can generate Pie, Bar, Line, Candlestick, Area, Column, Bubble, Spline, Dot/Marker, Scatter, Candlestick and Doughnut charts. It can be used with virtually all scripting languages — ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, simple HTML pages and also PowerPoint presentations.

AnyCharts is driven by XML as universal data interface, so you can visualize data from any data format: from files in text, Excel, CSV formats to MySQL, MS SQL, and Oracle database servers. Users can save the generated charts as an image for email sending or chart export. AnyChart is huge, but not that inexpensive – a one developer licence starts at $649.00.

XML/SWF Charts

PHP/SWF Charts offers a simple and dynamic solution for interactive Flash-based charts. Columns, circles, bars and pies can be displayed in 3D. You 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.).

The script requires only PHP 4 support; it is free, however all charts are by default linked to the source — unless you’ve purchased a license.

Swiff Chart Generator

Swiff Chart Generator is the server-side solution to dynamically serve eye-catching animated charts from Active Server Pages (ASP), PHP scripts or JSP scripts. Query data from a database, apply your own style template created with the Swiff Chart authoring tool and Swiff Chart Generator instantly generates high-impact charts in Flash format, PNG/JPG format, SVG format and PDF format. Use Swiff Point Player to incorporate your Flash Charts into your PowerPoint presentations. Pricing starts at $149.

Rich Chart Server for .NET

Rich Chart Server generates captivating interactive Flash charts from ASP.NET and Windows Forms applications. Rich Chart Server uses flexible templates to integrate dynamic content from a variety of data sources. Price $295.

Flash Charts Pro

Flash Carts Pro — ASP Chart and PHP Flash Charting tool — comes with 9 main categories and more than 30 chart types. No installation is required. Upload the Flash file and generate a list of ingoing values – or use a script. Customization is possible via the XML file itself. The tool offers multi-lingual (UTF-8) characters support, customizable animation, grid component and dynamically resizable charts. The price range starts at $59. Unfortunately there is no trial-version.

How to visualize you data using Javascript-based solutions

JS Charts

JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include our scripts, prepare your chart data in XML or JavaScript Array and your chart is ready!

PlotKit – Javascript Chart Plotting

PlotKit is an experimental JavaScript-based chart and graph plotting library. It has support for HTML Canvas and SVG via Adobe SVG Viewer as well as native browser support. The script requires MochiKit JavaScript library, version 1.3 or higher. Released under the BSD License.

Emprise JavaScript Charts

Emprise JavaScript Charts is done in pure JavaScript — no Flash support is required. The script includes features such as hints, mouse tracking, mouse events, key tracking and events, zooming, scrolling, and crosshairs which might raise interactivity and user experience. EJSChart supports XML-formatted data.

Every aspect of the charting display can be configured and customized through well-documented properties and methods. An interesting solution, offering a number of designs and behaviours. Pricing starts at $100.00. There is a watermarked private version available for free.

Plotr

This lightweight charting framework based on PlotKit draws simple charts. It’s free, and there is no use of Flash. There are also no interactive elements, however you don’t always need them.

How to visualize you data using Online Tools and Services

Flexible Online Chart Generator

There are a lot of chart types supported like bar charts, pie charts, line charts, bubble charts and radar plots. The charts can be downloaded as image formats like PNG and JPEG and other formats like PDF and CSV.

Google Chart API

The Google Chart API lets you dynamically generate charts. To see the Chart API in action, open up a browser window and copy the following URL into the address bar:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Rich Chart Live

Rich Chart live offers a number of templates and styles. The image below shows the “watercolor pie”-style. Output: Flash-, PowerPoint or image you can insert in your weblog instantly.

FusionCharts Google Gadget

The online-version of Fusioncharts.

Create a Graph

Supposed to be used by kids, this tool offers a variety of different charts which can be generated once the data is provided. Flash is required.

How to visualize you data using Server-side Solutions

Gruff Graphs for Ruby

The Gruff Graphing Library is a project to make beautiful graphs with Ruby. Can be used alone or with Ruby on Rails.

Image_Graph

Image_Graph (formerly known as GraPHPite) utilizes PHP’s object oriented model to enable users/developers to create highly versatile graphs in a simple way. There are 14 highly customizable chart types including line, bar, area, pie, impulse, dot/scatter, step, candlestick, box & whisker, radar, etc.

The free script requires PHP4 or PHP5 support with GD 2 support for optimal performance and PEAR package, including Image_Color and Image_Canvas package. The site offers over 80 samples of how the tool can be used.

.netCHARTING

.netCHARTING utilizes the .NET framework and GDI+ providing a managed charting solution for C# and VB.NET developers working with ASP.NET or WinForms. The tool offers a huge choice of available charts. In most cases 2D and 3D-views are available. Price range starts at $395 for a single site license.

Libchart

Libchart is is a simple PHP-library. You can create Line-, Bar- (horizontal and vertical) and Piecharts. The tool requires PHP compiled with GD Graphics Library and FreeType. Libchart is a free software distributed under the terms of the GNU General Public License (GPL).

JpGraph

JpGraph is a Object-Oriented Graph creating library for PHP. The library is completely written in PHP and can be used in any PHP scripts. The library can be used to create numerous types of graphs either on-line or written to a file. Line plots, filled line plots, step line plots, bar and pie charts, ring and scatter plots, polar and canvas plots as well as Gantt Charts. The designs of charts aren’t that impressive, but they don’t have to.

Related posts:

1. 20+ CSS Data Visualization Techniques In this article you will find more than 20 unique...
2. 75+ Tools for Visualizing your Data, CSS, Flash, jQuery, PHP Most people would agree that the old adage “A...
3. 30+ Essential Javascript Framework Supported Navigation Techniques Navigation is key to any web site or blog....
4. 7 New Essential CSS 3 Techniques Revealed There are several new and exciting functions and features...
5. Review: FusionCharts for Dreamweaver – Developer Edition, 3 Licenses give away Competition has ended! Winners have been announced here. Some...

SHARE THIS!

Please help tripwire magazine and share this post is you liked it...

Share