blogfreakz.com » Charts/Graph

Create a Flexible jQuery Data Heat Map

Keith@Blogfreakz — Thu, 26 Jan 2012 10:45:06 +0000

Sometimes reading a table’s long and numerous columns can be quite a very cumbersome and tedious task. You want your readers to immediately see the whole picture once they glance at your table’s contents.

This is where Design Chemical’s Data Heat Map can help. When you’re dealing with hierarchical and/or numeric data, or data with a maximum and minimum value, the heat map adds varying shades of a particular color, making it easier for the viewer to quickly spot the highest and lowest value. It can be a nice alternative for sorting data in ascending or descending order because you eliminate the user’s need to click on a button just to rearrange the data in a particular column.

The two main objectives of this tutorial are:

To capture and statistically analyze all data points
To provide a method of grouping the data and be able to identify what formatting should be applied

Let’s start with the usual basic HTML markup. We’ll just keep the code short by only including one row of data with the CSS classes but feel free to add as many rows as you like if you want to make it look like the one in the demo page or the image sample above:

HTML

Title data 1 data 2 data 3 data 4 data 5 data 6

Wanda 25 55 26 19 39 21

Let’s go over the code first part by part.

First thing we’ll do is capture and analyze the data, meaning we have to find out the largest value within the range. We do this by creating an array of all the data points and then returning the maximum value:

Next is to group the data points. We’ll be using the percentage (%) of each value from the max value to find exactly where the data point is positioned on a scale of 1-100.

This is critical to create the heat map as this scale is what we’ll use to dynamically generate the CSS style. You can adjust the max number (100) to suit your data and style of heat map. In addition, we only want to use integers so we also include the rounding off of the results.

n = 100; // Declare the number of groups

// Loop through each data point and calculate its % value

$(‘.heat-map tbody td’).not(‘.stats-title’).each(function(){

var val = parseInt($(this).text());

var pos = parseInt((Math.round((val/max)*100)).toFixed(0));

});

The above code is still incomplete since we still have to add the actual formatting into the same loop.

To create the heat map effect we are basically going to use background color.

Technically there is no restriction on how you apply the styles, and background color is only one option. The code is fairly flexible and some minor adjustments can be applied to font size, container size, background image, etc.

Color is easy because we can directly calculate each color value between 2 defined colous – our start point and the end point, which across 100 points should create a gradient style effect.

To calculate color we need to use the RGB values, which are 0 to 255 for Red, Blue and Green.

// Define the ending colour, which is white

xr = 255; // Red value

xg = 255; // Green value

xb = 255; // Blue value

// Define the starting colour #f32075

yr = 243; // Red value

yg = 32; // Green value

yb = 117; // Blue value

// Calculate a specific colour point

// pos – calculated in the earlier code identifies where on the scale the data point is

red = parseInt((xr + (( pos * (yr – xr)) / (n-1))).toFixed(0));

green = parseInt((xg + (( pos * (yg – xg)) / (n-1))).toFixed(0));

blue = parseInt((xb + (( pos * (yb – xb)) / (n-1))).toFixed(0));

// Once we have our RGB values we combine them to create our CSS code

clr = ‘rgb(‘+red+’,'+green+’,'+blue+’)';

Finally we apply the new RGB value (heat map style) to each data point by setting the background colour of the table cell.

$(this).css({backgroundColor:clr});

Below are the combined parts of the code to create the complete heat map function.

Complete jQuery code

If you want to completely change the look (i.e. the colors of the cells) of the heat map, all you have to do is change the start and end color RGB values. Have fun experimenting with the values and customizing the look of your tables!

Download Source Files

Incoming search terms for the article:

jStat – JavaScript Statistical Library

Mufti Ali — Sat, 19 Mar 2011 03:45:38 +0000

jStat is a statistical library written in JavaScript that allows you to perform advanced statistical operations without the need of a dedicated statistical language (i.e. MATLAB or R). The majority of jStat functions can be used independently of any other libraries. However, the plotting functionality of jStat is based on the jQuery plugin – flot.

jStat only uses elements that adhere to the jQuery UI ThemeRoller styles so any jQuery UI theme can be used. jStat uses numerous advanced statistical functions that require considerable processing power. This requirement results in differing user experiences depending upon your browser choice. Currently, the fastest browser is Google Chrome. jStat should work in all major browsers. Most of the limitations arise from the use of the HTML 5 canvas element when plotting.

Requirements: jQuery Framework, Flot
Demo: http://www.jstat.org/
License: MIT License

Incoming search terms for the article:

AwesomeChartJS – Simple Javascript – HTML 5 Charting Library

Mufti Ali — Wed, 02 Feb 2011 19:07:50 +0000

AwesomeChartJS is a simple Javascript library that can be used to create charts based on the HTML 5 canvas element. The main goal during development was to pick sane defaults in order to let the user create simple charts quickly with just a couple of lines of code. One can create at almost no time bar, pie, doughnut and Pareto charts.

AwesomeChartJS is easy to use, just create a new AwesomeChart object and pass the canvas element’s id as a parameter to the constructor. Then set the chart’s data and call the object’s draw() method. That’s it! Your chart is ready!

AwesomeChartJS is Fully customizable. You Control how your chart looks by defining:

Font styles
Fill and stroke styles for bars and pies
Margin sizes

Requirements: Modern Browser (HTML 5 support)
Demo: http://cyberpython.github.com/AwesomeChartJS/
License: Apache License v2.0

Incoming search terms for the article:

Arbor.js – Graph Vsualization Library Using Web Workers & jQuery

Mufti Ali — Sun, 23 Jan 2011 15:20:58 +0000

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs.

As a result, the code you write with it can be focused on the things that make your project unique – the graph data and your visual style – rather than spending time on the physics math that makes the layouts possible.

Requirements: jQuery
Demo: http://arborjs.org
License: MIT License

Incoming search terms for the article:

25+ Powerful Javascript Chart Libraries

Mufti Ali — Sun, 28 Nov 2010 13:00:03 +0000

Graphs and charts are the best way to display information at hand to the user and make it easy to read and understand. These visual structures allow you to easily simplify complex data and output easier to understand content.
Thanks to Javascript and a bunch of talented developers, which is give us solutions for easily adding graphs and charts to our web projects. In this post, we compiled together 25+ useful javascript solutions for charts and Graphs. Some of them are written for jQuery and MooTools. Hope you find this articles useful.

jQuery Visualize

jQuery Visualize is JavaScript library that allow us to generate bar, line, area, and pie chart visualizations data from an HTML table using the HTML5 canvas element. This technique provides a simple way to generate charts, but more importantly, because it bases the chart on data already in the page in an HTML table element, it is accessible to people who browse the web with a screen reader or other assistive technology, or with browsers that don’t fully support JavaScript or HTML5 Canvas.

Google Chart Tools

The Google Chart Tools enable adding live charts to any web page. It has A rich gallery of visualizations provided as

Image charts – using a simple URL request to a Google chart server

Interactive charts – using a Google developed JavaScript library

Google Chart can read live data from a variety of data sources, simple to use and free.

flot

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking. The plugin works with Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvas Javascript emulation helper is used for IE).

Highcharts

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types. It works in all modern browsers including the iPhone/iPad and Internet Explorer from version 6. Standard browsers use SVG for the graphics rendering. In Internet Explorer graphics are drawn using VML.

Raphaël

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Raphaël ['ræfe??l] uses the SVG W3C Recommendation and VML as a base for creating graphics. Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

gRaphaël

gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library. gRaphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

RGraph

RGraph is a HTML5 canvas graph library. It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, funnel chart, gantt chart, horizontal bar chart, LED display, line graph, meter, odometer, pie chart, progress bar, rose chart, scatter graph and traditional radar chart.

jqPlot

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features:

Numerous chart style options.
Date axes with customizable formatting.
Up to 9 Y axes.
Rotated axis text.
Automatic trend line computation.
Tooltips and data point highlighting.
Sensible defaults for ease of use.

Bluff

Bluff is a JavaScript port of the Gruff graphing library for Ruby. It is designed to support all the features of Gruff with minimal dependencies; the only third-party scripts you need to run it are a copy of JS.Class (2.6kB gzipped) and a copy of Google’s ExCanvas to support canvas in Internet Explorer. Both these scripts are supplied with the Bluff download. Bluff itself is around 11kB gzipped.

Flotr

Flotr is a javascript plotting library based on the Prototype Javascript Framework and inspired by Flot (written by Ole Laursen). 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.

JS Charts

JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts or simple line graphs. Moreover, JS Charts is free for non-commercial use. For commercial use, get the full license for only $149.

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. 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. The plugin was written by Gareth Watts for Splunk Inc and released under the New BSD License.

TufteGraph

TufteGraph is a JS library by which you can easily create graphs. All the configuration is by dynamic functions, allowing for a really compact API. Also, Non-core layout is done via CSS rather than code. You can customize the style of graph by editing it’s CSS.

MilkChart

MilkChart is a simple to use, Graphing library for MooTools. This library will generate a graph similar to Microsoft Excel. To transform a table of data into a chart, simply create a MilkChart object of the chart type you wish passing in the table id and an object containing options for the chart.MilkChart allows you to easily create charts in different templates like Column Chart, Bar Chart, Line Chart, Scatter Chart, or Pie Chart.

PlotKit

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit is fully documented and there is a quick tutorial to get you started. PlotKit is a complete rewrite of CanvasGraph. It is better structured and supported.

Scruffy

Scruffy is a Ruby library for generating attractive and powerful graphs, useful for web applications, print media and many others. It’s highly customizable and powerful. You can change the backgrounds, mix different types of graph together, change the graphics used for the points, change the line types, etc. You can also render to different types of output.

Smoothie Charts

Smoothie Charts is a really small charting library designed for live streaming data such as real time streaming data pushed over a WebSocket. It only works on Chrome and Safari. It doesn’t support legends Or pie-charts. In fact, it’s inferior in virtually every way to a library like Flot. But, it’s very good at displaying streaming data.

Gruff Graph

Gruff Graph is a project to make beautiful graphs with Ruby. It Can be used alone or with Ruby on Rails. This library allow us to graph negative numbers (line and bar), specify colors, and customize the graphs in other ways.

mooBarGraph

mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all major browsers including IE6.

jqBarGraph

jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your data to this plugin. This plugin is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Grafico

Grafico is a javascript charting library built with Raphaël and Prototype.js. The library provides a wide array of graphs and stays with the guidelines laid out by Stephen Few and Edward Tufte. Grafico provides pretty charts that effectively communicate their information. Minified, Grafico is about 30kb and available under the MIT license.

moochart

moochart is a plugin for MooTools 1.2 to create goog looking and customable bubble diagrams on the canvas tag. The moochart can be customized using a bunch of options or argument such as, width, height, bubbleSize, line color , bubble color, tooltips and more.

Dygraphs

Dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them. You can mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom back out.

Canvas 3D Graph

Canvas 3D Graph is a special type of bar graph that plot numbers in 3D. This first started as PHP-GD project, but soon the creator realized that there is not much sense in generating complex graph like this on server side (script worked really fast, though)

Protovis

Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction. Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations.

ProtoChart

ProtoChart is an opensource library using Prototype and Canvas to create good looking charts. This library is highly motivated by Flot, Flotr and PlotKit libraries.

MooWheel

The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the

Processing.js

Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. It’s not magic, but almost.

Incoming search terms for the article:

Smoothie Charts – Charting Library for Live Streaming Data

Mufti Ali — Tue, 24 Aug 2010 22:43:29 +0000

There’s tons of great JavaScript charting libraries out there. Too many to choose from. Although many of the charting libraries allow you to dynamically update data, none have really been optimized for a constant stream of data.

Requirements: -
Demo: http://smoothiecharts.org/
License: MIT License

Incoming search terms for the article:

RGraph -HTML5 canvas graph library

Mufti Ali — Tue, 09 Mar 2010 16:15:15 +0000

RGraph is a HTML5 canvas graph library. It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, funnel chart, gantt chart, horizontal bar chart, LED display, line graph, meter, odometer, pie chart, progress bar, pseudo radar chart, scatter graph and traditional radar chart.

This library uses HTML5 features which are implemented in recent browsers. As such you will need to be using one of these latest browsers: Firefox 3.5+, Chrome 2+, Safari 4+, Opera 10.5+ or Internet Explorer 8.
Older versions of Opera and other older browsers are supported in a limited fashion. If they don’t support text or shadows these will naturally be unavailable.By now, only beta version available for download.

Requirements: Firefox 3.5+, Chrome 2+, Safari 4+, Opera 10.5+ or Internet Explorer 8
Demo: http://www.rgraph.net
License: Free for non commercial use

Incoming search terms for the article:

Scruffy – Beautiful Graphs for Ruby

Mufti Ali — Sun, 07 Mar 2010 15:10:18 +0000

With this library you can draw many type of graph on ruby such as Pie Chart, Line Graph, Bar Graph, Split Graph, Stacking Graph and Multi-viewport Multi-layered graph.

Demo: http://www.ibrasten.com/articles/tag/scruffy
Website: http://scruffy.rubyforge.org/
License: MIT license

Incoming search terms for the article:

Gruff Graphs – making beautiful graphs with Ruby

Mufti Ali — Tue, 23 Feb 2010 07:04:08 +0000

The Gruff Graphing Library is a project to make beautiful graphs with Ruby created by Geoffrey Grosenbach. It Can be used alone or with Ruby on Rails. This library allow us to graph negative numbers (line and bar), specify colors, and customize the graphs in other ways.

Demo: http://geoffreygrosenbach.com/projects/show/5
Website: http://nubyonrails.com/pages/gruff
License: MIT License

Incoming search terms for the article:

mooBarGraph – AJAX graph for MooTools

Mufti Ali — Sat, 20 Feb 2010 14:49:14 +0000

mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all major browsers including IE6. This is jqBarGraph on steroids. It have almost all jqBarGraph possibility, plus some new features, like url bars, info boxes, negative values, AJAX data loading.

Features

You can set label, color, url and tooltip text for every bar
Bars can be simple or stacked
Legend can be created automatically
Data can be loaded with AJAX and can have negative values for simple type
Compatible with all major browsers including IE

Requirements: MooTools framework
Demo: http://workshop.rs/projects/moobargraph
Website: http://workshop.rs/2010/02/moobargraph-ajax-graph-for-mootools/
License: GPL License