Most people would agree that the old adage “A picture is worth a thousand words” is also true for web based solutions. There should be no discussion – Charts and Graphs are ideal to visualize data in order to quickly deliver an overview and communicate key messages. 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 75 Tools for Visualizing your data on a website and most of the options available will be covered. If you are aware of a tool, script etc. that deserves to be added to the list I would kindly ask you to leave a comment to everyone’s benefit.
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 2: How to visualize you data using CSS
- Section 3: How to visualize you data using Server-side Solutions
- Section 4: How to visualize you data using FLASH-based solutions
- Section 5: How to visualize you data using Online Tools and Services
The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7 & 8.
Flotr enables you to draw appealing graphs in most modern browsers with an easy to learn syntax. It comes with great features like legend support, negative value support, mouse tracking, selection support, zoom support, event hooks, CSS styling support and much more.
The jQuery Visualize Plugin makes use of the Canvas element of HTML5 to give you a simple and accessible method for generating bar, line, area, and pie charts from data contained within an HTML table and allows you to configure them in a variety of ways.
MilkChart is a simple to use, yet robust library for transforming table data into a chart. This library uses the HTML5 <canvas> tag and is only supported on browsers other than IE until ExCanvas gets proper text support.
Unlike low-level graphics libraries, Protovis, defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to create data with simple marks such as bars and dots to simplify construction.
With mooCSSChart you can easily create animated bar charts.
Tuftegraph sells itself as “pretty bar graphs that you would show your mother”. It comes close, Flot is prettier, but Tufte does lend itself to be very lightweight. Although with that comes restrictions – there are few options to choose from, so you get what you’re given. Check it out for a quick win bar chart.
It works in all modern browsers including the iPhone and Internet Explorer from version 6. Standard browsers use the Canvas element and in some cases SVG for the graphics rendering. In Internet Explorer graphics are drawn using VML.
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.
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.
This article covers creating bar graphs using css.
This article covers tutorial on creating Pure css Horizontal bar graph.
Richard Clark created this vertical bar graphs with css and php, a must see tutorial.
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.
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!
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!
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!
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!
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.
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.
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.
Ajax Graph based on Prototype.js. A very nice interactive graph script.
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.
Eric Meyer shows us another technique for graphing vertical bar graphs using unordered lists.
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
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.
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.
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.
Demo: View the demo.
Demo: View the demo.
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.
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.
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.
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.
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.
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.
The YUI Charts Control visualizes tabular data on a web page in several possible formats including vertical columns, horizontal bars, lines, and pies. Notable features include support for the DataSource Utility, customizable series and axes, a customizable mouse-over datatip, combination charts, and skinning.
pChart is a PHP class oriented framework designed to create aliased charts with its data easily retrieved from SQL queries, CSV files, or manually provided. In this version rendering speeds have been greatly improved and run pChart on your web server, you’ll need to use PHP compiled with the GD library support.
The Gruff Graphing Library is a project to make beautiful graphs with Ruby. Can be used alone or with Ruby on Rails.
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 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 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 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.
Visifire is a set of open source data visualization controls – powered by Microsoft Silverlight. it is a multi-targeting control which can be used in both WPF and Silverlight applications, that can be used with ASP, ASP.Net, PHP, JSP, ColdFusion, Python, Ruby or just simple HTML.
Open Flash Chart works by requesting data from the server when a user loads a web page. The server will knows who the particular user is and it will generate a custom chart showing up to the minute data.
You will need to include the Open Flash Chart in your HTML, and you also need to provide the data file on the server. The data file is either a text file, or a .php, Perl, Python, Java (or another flavour of dynamic) page.
Simple to use and with great built in options to make charts on any site a quick reality
Chart Types: Accumulator, Area, Bar, Line, Mini Bar, Mini Pie, Mini Sidebar, Pie, Net, Sidebar, Spider, Stacked
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.
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 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.
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 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.
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 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 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 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.
iCharts allows everyone to upload Excel sheets or manually add data from which they can easily create, share and embed interactive charts within minutes. iCharts can be published on the iCharts Portal at iCharts and they can be embedded anywhere on the Internet in blogs, forums or corporate websites.
ChartGo is an online generator that allow users to create charts online quickly. You can create bar charts, line charts or pie charts and you simply paste your data in the chart data area and hit the create chart button.
Chartle is a very easy to use and completely free online chart generator that allows you to embed and share your plots, maps, charts, diagrams and business reports online.
Chartlet is non-binding towards its users, there is no forced registration and all generated charts are your own, The only thing they ask is that you link back to them.
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.
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:
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.
The online-version of Fusioncharts.
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.