40 Amazing Yet Free Visualization Libraries: Charts, Diagrams And Flowcharts

Here, we have come up with an interesting round up of some beautiful visualization libraries. Presenting collected data to the users is a very common need in web application or software. There was a time when data was presented simply through numbers and words even the complicated data like traffic statistics and clicking hits. That was pretty simply method. Now, time has changed and so the methods of presenting data to the users. These days, presenting data in plain words or numbers do not seem effective at all.

With the technology advancements, internet users have developed some standard methods to present data to users. They include the use of statistical charts and graphs. Presenting data in the form of charts and graphs makes it easy for the users to understand it. For today’s round up, we are presenting you some useful visualization libraries, charts and diagrams so that you can speed up the process of locating certain data through the collected information. Here is the full list after the jump. We hope that you will like this collection. Have fun!


Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange and polar chart types.

CSS Chart Generator

Enter all the necessary information for your chart. The single items are explained and predefined, so you can simply start changing values. When you are done adding your values, simply click the send button and your chart will be generated in no time and you will receive a link which you can use to display the chart on your page.


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.


A graph visualization library using web workers and jQuery.


The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.

Online Chart Generator

The best online chart and graph generator tool, generate amazing 3D graphs instantly in few seconds.


HumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5.


RGraph is a HTML5 charts library that uses the HTML5 canvas tag to draw and supports over twenty different types of charts. Using the new HTML5 canvas tag, RGraph creates these charts inside the web browser using JavaScript, meaning quicker pages and less web server load. This leads to smaller page sizes, lower costs and faster websites.


CanvasXpress is a javascript library based on the canvas tag implemented in HTML5.


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.


Use our open source Gantt chart to illustrate a project schedule. You may show the dependency relationships between activities as lines between those activities. Current schedule status can be seen at a glance with percent-complete shadings. Projects, tasks, and activities are comfortably organized into a tree structure (left of the Gantt chart), which can be expanded/collapsed by a single mouse click. Mouseover popups show detailed activity properties.

Smoothie Charts

A JavaScript Charting Library for Streaming Data.


Professional-quality flowcharts, diagrams, floor plans, technical drawings and more. Gliffy works directly in your browser!


Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.


Create a graph online quickly. ChartGo is a graph maker tool. Simply follow these steps; pick your settings, paste your data and click the create button.

Google Chart Tools

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.


Quickly draw organizational charts with our easy to use tools. No downloads or installations, so you can get started immediately.

yEd Graph Editor

yEd is a powerful desktop application that can be used to quickly and effectively generate high-quality diagrams. Create diagrams manually, or import your external data for analysis. Our automatic layout algorithms arrange even large data sets with just the press of a button.

XML/SWF Charts

XML/SWF Charts is a simple, yet powerful tool to create attractive charts and graphs from XML data.

BARCHART Generator

With Make bar chart you can create barchart online tool piechart graph without applet bar graph creation make a bar graph image for your report- create make save for free chart freechart data input chart.

Online Chart Tool

Charts are a great tool because they communicate information visually. On you can design and share your own charts online and for free.


dhtmlxChart is a JavaScript charting library for generating cross-browser HTML5 charts. It supports the most common chart types: line, spline, area, bar, pie, donut, scatter, and radar charts. For complex charting needs, you can create a chart series, plotted separately side by side, or stacked.


Hohli Charts

Ajax MGraph

DIY Chart

DIY (Do it yourself) Chart is a Web-based, simple and powerful online tool to create interactive charts and graphs from static or dynamic data which may be generated using any scripting language.

Xml/Swf Charts

A simple, yet powerful tool to create attractive charts and graphs from dynamic XML data.




Online graphing calculator and function plotter.


Axiis is an open source data visualization framework designed for beginner and expert developers alike. Whether you are building elegant charts for executive briefings or exploring the boundaries of advanced data visualization research, Axiis has something for you.

Fly Charts

FlyCharts is our new version (2.0) of flash charts component. The second version brings you more ways to visualize your data, much more rich and customizable interface, fast and easy tuning of your component. And it’s still free for private persons, still tiny and fast!

Fusion Charts

FusionCharts Free is an open-source Flash charting component that can be used to render data-driven & animated charts in your web applications, desktop applications and presentations. It is a cross-browser and cross-platform solution that can be used with PHP, ASP, ASP.NET, JSP, ColdFusion, Python, RoR, simple HTML pages or even PowerPoint Presentations.

Jfree Chart

JFreeChart is a free 100% Java chart library that makes it easy for developers to display professional quality charts in their applications.

Open Flash Chart

Open Flash Chart, is open source. It is free to use and you get the source code to fiddle with.


pChart is a PHP class oriented framework designed to create aliased charts. Most of todays chart libraries have a cost, our project is intended to be free. Data can be retrieved from SQL queries, CSV files, or manually provided. This project is still under development and new features or fix are made every week.


gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library. Check out the demos to see static and interactive charts in action.


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.


With your free account from ChartGizmo you can now create charts for your website, blog and social network profiles. ChartGizmo may be useful for those who need to visualize financial, scientific or other type of data.


No download, no-install. Log in from anywhere & draw.


Congratulations To The Winners Of Visifire Charting Tools

Thanks to all of the participants of contest in which Visifire – Windows Phone 7 (WP7) Charting Tools were givingaway. We ran the MySQL random query and selected these comments to give them Visifire.

Winners of Visifire Charting Tools

  1. Affan Ruslan
  2. Zee Patel
  3. Peter
  4. Deep
  5. Dorothy

Visifire is a set of data visualization controls – powered by Microsoft®Silverlight™ & WPF. Visifire is a multi-targeting control which can be used in both WPF & Silverlight applications. Use the same API to create charts & gauges in Mobile, Web & Desktop environments. Visifire Silverlight Controls can also be embedded in any webpage as a standalone Silverlight App. Visifire is independent of server side technology. It can be used with ASP, ASP.Net, SharePoint, PHP, JSP, ColdFusion, Python, Ruby or just simple HTML. You can visit Visifire Gallery or design your own chart or gauge using Chart/Gauge Designer.

Both Silverlight Controls and WPF Controls have the same API which allows you to target multiple platforms without worrying about code portability.

Thanks to Visifire for sponsoring this wonderful contest at Smashing Apps.

If you want to conduct any contest at Smashing Apps just contact us and send us all the details.

Visifire – Windows Phone 7 (WP7) Charting Tools Giveaway

Visifire is running a contest, where 5 winners will get the single Developer License with Premium Support worth USD 499 each. Well, you guys know what is Visifire? Let’s say it once again for n00bs.

Visifire is a set of data visualization controls – powered by Microsoft®Silverlight™ & WPF. Visifire is a multi-targeting control which can be used in both WPF & Silverlight applications. Use the same API to create charts & gauges in Mobile, Web & Desktop environments. Visifire Silverlight Controls can also be embedded in any webpage as a standalone Silverlight App. Visifire is independent of server side technology. It can be used with ASP, ASP.Net, SharePoint, PHP, JSP, ColdFusion, Python, Ruby or just simple HTML. You can visit Visifire Gallery or design your own chart or gauge using Chart/Gauge Designer.

Both Silverlight Controls and WPF Controls have the same API which allows you to target multiple platforms without worrying about code portability.

This contest will run from September 19, 2011 to September 25, 2011 and we will select the winners randomly by running MySQL query. Result can be announced any day before September 30, 2011 so keep visiting here or subscribe to our rss feed to get the latest updates. To participate in the contest and win Developer License of Visifire, All you have to do is :

1. Just leave a comment.

2. Use valid email ID in the email box.

3. Make sure that you are following @Visifire and @SmashingApps on twitter and subscribe our rss feed to track this contest and for future updates.

4. And that’s it!

So, what are you waiting for now? Let’s participate in the contest and good luck!

45+ Free Online Tools To Create Charts, Diagrams And Flowcharts

Charts and graphs are the best ways to represent information and relationship between two interlinked entities. Not only do charts and graphs inform visitors about the trend or relationship you want to show them but also add a visual connection with the visitors.

Several online tools are available that help you create comprehensively designed flowcharts and graphs that worth a thousands words. Check them out and let us know what you feel about these tools.


Create barchart online tool piechart graph without applet bar graph creation make a bar graph image for your report- create make save for free chart freechart data input chart

Read the rest of this entry »

Excellent Mockup And Wireframing (9) Web Apps Which You Would Love To Know

A wireframe or mockup tool is a must have tool for every web designer and developer. These tools have their importance in web designing and development world. It is good to use them because it saves your time and efforts, a mockup or wireframe can give you the whole idea about how your web will look and work. Combination of your own creativity and client’s requirement into a blank canvas, allows you to effectively plan the visual arrangements of the site’s contents. Well, a good and reliable wireframing application will cost you for sure and cost can starts from 150$ to 5000$. So, are you going to buy or what? and I definitely heard a big NO out there. So, my friends here comes the solution to the problem, I am listing some good web apps and tools for you in my article and you can use these mockup and wireframe apps and tools for FREE.

You are welcome if you want to share more useful web apps that our readers/viewers may like. Do you want to be the first one to know the latest happenings at just subscribe to our rss feed and you can follow us on twitter and follow us on Google Buzz as well.



MockFlow helps to design interactive UI mockups for Desktop Software, Rich Internet Apps and Web sites. MockFlow is Hybrid, so you can design seamlessly from anywhere & even with No net-connection. You can get your visual concept ready in minutes, it is faster than drawing/coding wireframes, you can share your UI design with your clients, team chat, track project activities and you can export your Mockup to image, PDF or PowerPoint Presentation.



Jumpstart is a simple online collaborative wireframe designed to make planing websites simple, fast and more efficient. With a Jumpchart preview, -clients just get it and it’s not an abstract concept, it works just like the website will. It is great for Web Developers, Information Architects, Website Owners, and Copywriters. Now you can also export your mockup to HTML and WordPress WXR format! Besides WordPress – which is one of the most widely used Content Management Systems in the world.



PencilProject is a free and fairly powerful Firefox add on tool for making diagrams and GUI prototyping. Its an open-source tool which is very popular among designers and developers. It has many built-in stencils for diagramming and prototyping webs and options like multi-page documents, adding external objects, inter-page linking, on screen text editing and exporting to HTML, PNG, document, Word document and PDF makes this addon very necessary for designer and developer.

WebSite Wireframe Tool

You can build the wireframe in minutes with this particular tool, and if desired, a link to view the wireframe can be sent through email, instant message, or even the phone. The attraction to this tool is the simplicity of usage, lending itself to speed, both in wireframe creation, as well as being able to quickly share the results without having to send anything more than a web address. It is free to register and use, and works in modern web browsers including Internet Explorer and Mozilla Firefox.



Lumzy is a quick Mockup creation and Prototyping tool for software designers and developers. As a Mockup tool, you can use it to create a rough sketch of how the final website or application will look like while prototyping extends this by adding event based functionalities. Its totally FREE and its function like send on the go, make it public, collaboration and chat, and quick drag and drop will attract you to use it. And by the way you can export your Mockup to jpeg, PNG and PDF files.



DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming. It allows designers to quickly sketch an interface using an electronic pad and stylus. Its now available for Windows, Unix, and Mac OS X. You can download it from here.



fluidIA is an emerging agile design tool for prototyping rich user interfaces. It provides support for truly rapid prototyping and changes of interface representations, expression of rich interactions, and collaboration.

Prototype Composer


Prototype Composer is a completely new way of gathering requirements. Prototype Composer makes it possible to see how an application will look and function before any code is ever written. Instead of endless text documents, Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.

iPhone Mockup


This simple web app allows you to create your own iPhone app mockups, share your mockup with other people, and the changes you make will be synced to everyone who has the mockup’s URL. This app is currently in Alpha and offers no password protection so, you better be careful about the privacy of what you creates.

Please let me know if there are more apps which should be listed. Thanks.

GoGoPlot Helps You Create Graphs To Keep Track On Almost Anything You Do

Have you ever made use of simple point-to-point graphs? You will be surprised with how useful they can be. Imagine yourself at the doctor’s. You are there because of your backache. The doctor asks you about how severe the backache has been the past week. You show him a graph on which you have plotted the pain degree of every day. It can be immensely helpful to your doctor.

Such point-to-point graphs can be easily made using GoGoPlot.

GoGoPlot is a free to use website that helps create graphs. The graphs have very basic plotting options. You select one point for each day; the value of each point ranges between 0 and 10. The points are joined by straight lines. This simple procedure can help express a number of things graphically.

Suppose you want to record how your mood was through the entire week. All you need to do is create a new graph, name it, and start recording. While creating a plot you can either record a point a day or enter all the values in simultaneously.

After setting your options you can record each value.

Through this way you can obtain graphs of anything you want and review them. You can view multiple graphs simultaneously; they are differentiated by separate colors.

Apple device owners can get GoGoPlot’s app from the App Store and record their plots on the go.

Overall, the service is quite an interesting concept and will surely benefit a good number of people.

7 Tools And Applications To Help You Save Electrical Power

Leaving our appliances on while we are not using them is a terrible waste of electrical power. There are parts of the world that do not have electricity at all; we should do our part to respect the resources we have and save them whenever / wherever we can.

Below you will find a list of 7 tools to prevent wasting electrical power. I believe that each entry in the list serves a useful purpose; read about each one and choose the one (or more than one) that suits you best.

If you want to share more tools that can Save Electrical Power so please comment about them below. Do you want to be the first one to know the latest happenings at just subscribe to our rss feed and you can follow us on twitter.

1. MonitorOff


MonitorOff is a freeware application that lets a user fully control when his / her monitor turns off. CRT monitors in particular take up a lot of power. The operating system usually has built in time durations for the screensaver to begin or for the monitor to turn off. But these settings will take a little longer to reach; with MonitorOff we can access / modify al time durations and even setup hotkeys. The application is for Windows and sized at nearly 400KB. Click here to get MonitorOff.

2. SetPower


SetPower is a unique power management application for Windows that lets us set three different power plans: Balanced, Power Saver, and High Performance. We can edit the details of these plans (such as when the monitor will turn off) as well as assign the times when these plans will come into effect. For different hours of the day, we can assign our computer with different plans, according to our usage. Click here to get SetPower.

3. AppliancesEnergyUse


AppliancesEnergyUse lists the power input of almost 50 household appliances. By finding out how much power we are using simultaneously we can see if we are wasting energy. We can also set a personal power goal for ourselves and vow to never cross that wattage at a given time. Whether or not we are crossing our goal can then be determined by AppliancesEnergyUse. Click here to visit AppliancesEnergyUse.

4. Edison


Edison is an installable application for Windows. It offers the same features as SetPower, with multiple power schemes that can set to be implemented on different times of the day. An additional feature of the application is its ability to estimate the power we are saving and use the electrical unit price to calculate our savings. We can enter our own price was more accurate results. Click here to get Edison.

5. HomeEnergySaver


HomeEnergySaver is a free to use website that lets us answer a few question to learn our electrical power usage pattern. It then suggests ways in which we can reduce our power usage. We can view the report of each of these suggestions and see how much each would cost. Click here to visit HomeEnergySaver.

6. Microsoft Hohm


Hohm is Microsoft’s version of HomeEnergySaver. It requires users to have a Windows Live ID to register for an account before visitors can use the site’s services. Once the account is formed, we answer elaborate questions so that Hohm can fully understand our power usage patterns. We are then presented with suggestions of how we can cut back on our electrical power usage. Using Hohm’s service is free but restricted to users in the US. Click here to visit Hohm.

7. FuelCharts


FuelCharts is a free to use website. We can use the site to enter our electricity bills’ amounts over a two years’ period. Bar graphs are created of each bill. These bars provide us with a good enough comparison of our last year’s energy usage and this year’s energy usage. We can change electricity with anything we like (oil, biodiesel, etc.) and achieve an energy comparison for various resources. Click here to visit FuelCharts.

PocketSmith: Online Calendar To Manage & Forecast Cash Position

People with a lot of money hire financial advisors to monitor their spending and point out the rights and wrongs in that spending. The money that is saved from correcting the wrongs is then invested into potentially profitable ventures to benefit the client.

However the percentage of people who are that rich is considerably low. Most people are like me, not rich enough to hire external help. We have to manage our own finances and catch our own mistakes. Doing this single-handedly can be quite a task; an extra bit of help can end up benefiting us a lot.

PocketSmith is a free web service and one of those “extra bits of help” which we can employ to manage our finances. It basically acts as a calendar which we can feed our expenses in and which can forecast our future cash positions.

Once we sign up for a free account, we can start feeding in our budget and begin creating expense events.


These expense events can be any financial event: our salary date, dates of bills to be paid, etc.

We can then specify which of these events will be recurrent; PocketSmith will use this information to generate to 6 or 12 month cash forecast.


The forecast is what helps us plan our budget for the upcoming year. We can make the necessary deductions to our financial events and know what needs to be done to stay within our budget.

Just like we balance our checkbook at the end of month, we can use PocketSmith to juxtapose our expenses with our income.


The expenses versus income figures can greatly help us in staying within the limits of our budget. More reliable figures can be gotten by uploading our electronic bank statements and such. The more we share with PocketSmith, the more realistic the resultant figures will be.

We can check the figures per-day-wise for the upcoming year and know if there even a single day on which our cash flow is going in the negative.

PocketSmith is a remarkably friendly tool for computer users that can help planning our budget effectively.

75+ Truly Useful Tutorials & Colorful Resources For Designers To Discover The Best Of The Web In March

We are always in search of great free resources, tips, tricks, etc. for our readers. Every day we work hard to find new resources and inspiration for designers like you. Today, we have another great post, “Discover the Best of the Web” on SmashingApps. In this, we made a list of 75+ Truly Useful Tutorials & Colorful Resources For Designers. We obviously cannot cover all the best from the web, but we have tried to cover as much as possible.

You are welcome to share if you know more best of the web in the month of March which our readers/viewers may like. Do you want to be the first one to know the latest happenings at just subscribe to our rss feed and you can follow us on twitter and do not forget to become our fan on facebook as well.

Design Tips, Tricks and Tutorial


A Collection of Photoshop Business Card Tutorials and Free PSD Files

Create a Digital Camera With Wooden Accents Using Photoshop

90+ Smoking Cinema 4D Tutorials and Best Techniques

How to Create a 3D House Icon with Photoshop

Use Photo Manipulation and 3D Layers to Design a Surreal Cover Art Illustration

30+ Best Apple Inspired Photoshop Tutorials

Motion Graphics And 2-D Animation: 10 Tips For A Clean Workflow

20 High Quality Photoshop Web Design Tutorials

Create a Call to Action Button With Adobe Fireworks CS4

Learn Adobe Illustrator: All the Basics for Beginners

40 Detailed Drawing Tutorials for Adobe Illustrator

15 Impressive Photoshop Tutorials

40+ Autodesk 3ds Max Tutorials for Beginners and Advance

Massive Collection of Photo Editing Tutorials and Photoshop Actions

Artwork, Digital Photography and Inspiration


40 Brilliantly Illustrated Web Designs

45 Creative Resumes to Seize Attention

25+ Beautiful And Creative Business Card Ideas

Inspiration: Awesome Dark Portfolio Sites

Fantastic Content Sliders for your Inspiration

30 Amazing Typographic Movie Poster Designs

5 Green Websites Built on Flash

50 Beautiful Sketchbook Scans

50 Beautifully Brown Web Designs

22 Most Unusual Google Earth Photos

55 Latest Examples of Perfect Slideshow Presentation in Web Design

Collection of 30+ Stunning Hand Picked CSS-based Layouts

50 Amazing Shots Taken in the Most Dry Regions

Call to Action Buttons: Guidelines, Best Practices and Examples

Showcase of 20 Mobile-Friendly Popular Design Blogs

30+ Artistic Examples Of Colorful Wallpapers

Showcase of Textures in Print Design

Javascript and Ajax


20 jQuery Cheatsheets, Docs and References for Every Occasion

Fresh JavaScript/jQuery Tools and Resources

20 Helpful jQuery Methods you Should be Using

45 Fresh Useful JavaScript and jQuery Techniques and Tools

25 Amazing and Fresh jQuery Plugins

jQuery Resources for One-Page Portfolios



47 CSS Tips & Tricks To Take Your Site To The Next Level

22 Handy HTML5 & CSS3 Tools, Resources And Guides

Basic CSS3 Techniques That You Should Know

The Future Of CSS Typography



40 Fresh Free Fonts For Your Next Designs

Tired Of Photoshop’s Complexity? Try These Free And Easy Apps For Your Photos

Interactive Flash Graphs and Charts For Your Website

11 Qualified Mobile Interface Tools and WordPress Plugins

Ultimate Collection of Free Buttons in PSD Format

10 Blank/Naked WordPress Themes Perfect for Development

The Best E-Commerce Icons All In One Place

29 Premium-Like Free But Extremely Tremendous Portfolio WordPress Themes

25 High Resolution Photoshop Brushes

Superb Free Vector Sets for Designers

Miscellaneous Articles


Writing For The Web: Tips & Common Mistakes We Make

Principles to Become (and stay) Strong in the Search Engine Rankings

How To Add A “Print This” Button In Your Blog

11 Ways to Create a Mobile Friendly WordPress Site

Techniques for Squeezing Images for All They’re Worth

Custom WordPress Homepage with Customizable Widgets

5 Unique Ways to Do Keyword Research

What Every Designer Should Do Right Now

8 Tools to Analyze Your Website’s Level of Accessibility

Ten Tips to Improve your Freelance Portfolio

Progressive Enhancement: What It Is and How To Use It

Need Interactive Charts For Your Personal Website? Try Highcharts

If you have a non-commercial website and you need to add charting capabilities in your website, Highcharts may suit your needs.  Highcharts is a free charting control developed purely with Javascript so that you can show interactive charts on your website.  Since its purely developed with Javascript, you don’t need any special server side technologies like ASP.NET or PHP and no client-side plug-ins are required like Flash or Silverlight.

Highcharts is dynamic in nature. With the support of jQuery and Ajax API, you can dynamically set axes and points of charts at runtime, hence making Highcharts an excellent choice for demonstrating real-time data like Stocks and Forex.

It works with all major web browsers including iPhone and supports a number of chart types, such as:

Implementing Highcharts just require some basic understanding of Javascript and you don’t need to be an expert programmer having special programming skills in specific languages.  The syntax is very simple and the integration is almost seamless.

In addition to all this, Highcharts gives your website an enhanced user experience with interactive moving charts with cool designs and eye-catching colors.