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

Archive for the ‘Charts’ Category

Envision.js is a JavaScript library to simplify creating fast and interactive HTML5 visualizations.

It comes with 2 chart types; TimeSeries + Finance and with an API for developers to build custom charts.

The library is built on top of Flotr2 and the HTML5 Canvas. It is framework agnostic and depends on few micro libraries.

Envision.js

It works by default on modern browsers, IE6-8 with FlashCanvas, and mobile touch devices with a WebKit browser are all supported.

P.S. Envision.js is a rewrite of the previously featured HumbleFinance and offers more features.

Sigma.js is an open-source JavaScript library with a small footprint for drawing graphs using HTML5 canvas.

It is built for to consuming static or dynamic but interactive network maps with unlimited nodes on a web page.

Sigma.js

The library is standalone, can be extended with plugins (GEFX parser and ForceAtlas2 layout algorithm are included as plugins) and offers jQuery-like chainable methods.

There are a lot of variables for customizing each instance and various examples exist that show the capabilities of Sigma.js.

Morris.js is a small JavaScript library for visualizing time-series data beautifully.

It is built on top of jQuery + Raphaël and displays the data over an interactive line graph.

The library has a very straightforward API with a single function that requires the data, labels color, line width and few more settings.

Morris.js

Flotr2 is an open source library for HTML5 canvas charts and graphs which is a fork of the popular flotr without the dependency of Prototype JS framework and has many improvements.

The library is framework independent and has support for line, bar, candle, pie and bubble charts.

There are lots of customization options offered like the ability to define titles, subtitles, colors, labels on/off and so many others for each and every possible variable.

Flotr2

Flotr2 outputs are interactive, they can be set to respond to the actions of the user. And, they can be extended with plugins (there are already several ones that can add interactions, new decorations, etc.).

Charts and graphs work in all major browsers (including IE6) and they are mobile compatible.

Rickshaw is a JavaScript toolkit, created by the developers of the stock photo service Shutterstock, for generating interactive and real-time graphs.

It is built on top of the D3.js visualization library and can render stack or line graphs.

Rickshaw JavaScript Toolkit

The graphs are interactive, respond to hovering them or their legends, items in the stack can be re-ordered with drag 'n' drops and more.

There is a good margin for customization: colors, sizes, interpolation and functionality in general with the modular/extendable structure of the toolkit.

Visifire, a professional set of charting tools that works on WPF, Silverlight & Windows Phone 7, is giving away 5 "Single Developer Licenses with Premium Support" (worth $499 each) to WebResourcesDepot readers.

Please check the details of joining this giveaway at the bottom of this post and here are more details about this exciting resource.

What is Visifire?

It is a multi-targetted kit of data visualization controls which is compatible with WPF, Silverlight & Windows Phone 7 which uses the same API for developing in all these platforms.

Visifire

Visifire is not dependent on any server-side technology and can be used with almost any language including ASP, ASP.Net, SharePoint, PHP, JSP, ColdFusion, Python, Ruby or just simple HTML.

It has support for many chart types like bar, column, line, are, pie, stock, radar, stack, doughnut and more. Circular and linear gauges can be created too.

All the visualizations are very good-looking, interactive (responds to mouse-overs and clicks) and have shiny animations.

Visifire Gauges

It is possible to zoom into charts by selecting a part of it to view only the selected portion.

They can be styled/themed easily and edited with Microsoft Expression Blend.

How to join the giveaway?

In order to win one of the licenses given away:

  • Share this giveaway with a tweet: "Just joined the @Visifire – Windows Phone Charting Tools giveaway at WebResourcesDepot – http://goo.gl/igJKg" (click to tweet easily)
  • Follow @visifire Twitter user
  • Share your tweet URL within the comments

SELECT * FROM wp_comments WHERE comment_post_id=2494 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 5

The winners will be selected with the query below on 6 October 2011 (1 week later) and good luck everyone.

Elycharts is an easy-to-use and customizable library for creating charts with only JavaScript.

The library supports most of the popular chart types including line, column, are, bar, pie, sparklines and combinations.

Elycharts

Elycharts comes with many interactions like mouse tracking and events, highlight of selected areas with various animations, tooltip and hints, html anchors and many more.

Also, it can modify data dynamically with good-looking animations to display the change in charts.

The charts are generated with SVG/VML and the library is built on jQuery + Raphaël.

JointJS is a cross-browser JavaScript library for creating fully interactive diagrams.

It makes use of Raphaël.js, can connect vector objects with different types of arrowsand interact with connections + objects.

Joint JavaScript Diagrams Library

The library is plugin-based for extending easily and there are ready-to-use plugins for popular diagrams (ERD, Org chart, FSA, UML, PN, DEVS, LDM).

Objects can be drag 'n' dropped by still keeping the hierarchy created and there are callback functions provided on every level.

Heatmaps, which we usually see in analytics apps, are a great way of visualizing density.

ClickHeat (WRD article), a PHP class, is probably the most popular open source resource for creating them. Another alternative is Heatmap.js which eases creating them with only JavaScript.

Heatmap.js

This JavaScript library uses HTML5 canvas for generating the visualization with the data provided.

It can be customized completely including the color gradient, opacity, datapoint radius and much more.

Heatmap.js is a fresh resource, the documentation is inside the code and various examples are provided to get you started.

Peity is a jQuery plugin for creating word-sized charts (sparklines) using HTML5 <canvas>.

It has support for bar, line and pie charts where color, width, radius and delimeter can be updated.

Peity jQuery Sparklines Plugin

The plugin adds a "change" event trigger to the graph elements, so, once their data is updated, the charts can be regenerated instantly.

If you would like to add new chart types, Peity can be extended by adding the new charting functions easily.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com
HotScripts Marketplace