5 Cool ways to Add graphs to your Website!

Guest post by Srikanth AD from Tech Inspiration
There are many softwares by which you can present data to your viewers. Data present in tabular form may explain the total meaning but it’s tough to understand in a glance. Whereas presenting data in graphical form is much superior to tabular form as people can understand it with ease. You can also present the data in more attractive and informative form in graphical form. There are some cool ways through which you can present data on your website in a graphical form.

There are mainly two ways through which you can implement data in a graphical form. One is by using Flash and the other by using jQuery. Both the methods are good to present graphs on your website and you can choose to follow the one which you feel comfortable.

Here are 5 Great ways (both Flash and jQuery) to help you easily present data in a graphical form to make your readers understand the data even better.

jQuery Visualize Plug-in

JQuery Visualize Plugin Graph

JQuery Visualize Plugin Graph

You might have used images to present chars on your site before. With the help of jQuery Visualize plug-in you can implement a graphs or charts without using Flash or images. jQuery uses the HTML5 canvas element to create cool charts. It will grab the data from the HTML table to build a chart using HTML 5 Canvas element. This proves to be one of the best methods to display charts on web sites because people can see both the table and the graphical chart.

jQuery SVG

JQuery SVG Graph

JQuery SVG Graph

With help of this plug-in you can easily create graphs and also graphics on your website. It is based on the SVG, a language which is used to describe 2-D graphics in XML. Most of the modern browsers as support for SVG so you can use to display graphs. You can use the graphing extension to make SVG graphs and you also have extra functionalities. Like you can control the axes, gridlines, legend, labels and also graph title.

Open Flash Chart

Open Flash Chart Graph

Open Flash Chart Graph

Open Flash Chart is a plug-in much similar like wordpress.com stats plug-in. Open Flash Chart is an open source software so you can customize it as per your need. Using this plug-in you can easily create and display charts as images. With the help of tooltips you can actually make charts more interactive with users and also user can explore the data. It allows you to re-size the charts and allow accepts null values such that there will not be any gaps of missing data in your graph. You can save the chart as image and you can also highlight an area(s) or point(s) on the graph.


Flot Graph

Flot Graph

Flot is jQuery based and is pure JavaScript plotting library. It will create chars on fly using the arbitrary datasets. You can customize charts as you wish like you can make them look attractive and also more interactive with users. It supports features like zooming and mouse tracking and it works on all the popular web browsers.

Google Chart API

Google API Chart

Google API Chart

Google has provided many useful services to help webmasters in many ways. Google Chart API is one another tool form the house of Google. Creating static charts with this API is very simple and you can create many kinds of chars like line, bar, Pie, radar, maps, QR codes, scatter plots, etc. You can also control the color, design, labels and styles of the graph. All most all the aspects of this API are easily customizable so you can use it the way you like it to be.

  • http://www.bytechip.com Ramkumar

    Good listing . I will make use of them.

  • http://www.emergencyfilerecover.com Bellamy

    Cool tips. The Google-o-meter in the Google API is particularly fun.

  • http://www.intechgrity.com/ Swashata

    I like the Google Chart API and jQuery Plugins! I like jQuery plugins mainly because of the flexibilities we can have! Nice discussion. btw, I personally think that keeping flash contents away from our page is a good practice for web designers! :)

  • Jack lucky

    If you could link to the source that would be wonderful (easy to find).

    Open Flash Chart is really great charting component.

    You definitely have to look “Open Flash Chart 2 – Chart Explorer” http://demo.webasp.com.au/ofc-explorer-k.html

    Worth looking this one!

  • http://www.techcats.net/ Rajesh Kanuri

    Thanks for the info. will give a try when i need one..

  • http://www.gigglecomputer.com Phaoloo

    Nice ways! I used to draw graph before in Excel or Google Docs then convert it to image and publish it. But there tools are much useful and even they create more beautiful graphs.

  • http://www.songsmarathi.com/forums/ Ninad Ranade

    I am going to launch my new web site. Your post will be helpful to me.

    Thanks Dude…..

  • http://kirantarun.com Kiran

    This is great info! I like how the first plugin, JQuery, has a nice look to it. Would give it a try for sure :) Thanks for the info.

  • http://webdesignworkplace.com Mal

    I had never seen the Google Chart API before this post. Thanks. I can see it would be a great tool to show demographic distribution… going to try this today with a local chart.

  • http://www.blogincomelife.com Valentina

    Those are very cool looking graphs … when I look at them I immediately withdraw into my “omigawd! That requires techie type stuff” and the very idea is enough to set off a nosebleed! But seriously I see that they are plugins etc. so should not panic.
    My spineless techie self for the moment is dependent on Google Analytics and the graphs etc. that come with my WordPress Direct! When I eventually graduate to the next level, I will definitely look at the jazzy & cool graphs you have shown here. I have added the URL for this post into my IM file.

    Wishing you continued successs…………valentina

  • http://www.hellboundbloggers.com/about/ S.Pradeep Kumar

    My favorite is Google Chart API.. :)

    Thanks for sharing others.. ;)

    Nice article Srikanth!

  • http://chaaps.com Chethan

    Amazing I never Thought about this before! this great idea to impress our readers!

  • http://choosyinfo.com Ruchi

    Thanks for sharing list, It would be really useful for me. I always avoid to write articles which use graphs and charts because drawing in excel and then paste in Doc was really irritating and time consuming. But now I can easily make the use of graphs.

  • http://mostlyblog.com/ MostlyBlog

    Good post buddy thanks for sharing,this is something new for me

  • http://www.curiouslittleperson.com Curious Little Person

    Nice, never knew abt these plugins. A big thank you for sharing them… I might just start writing articles with graphs on them…


  • http://steppinoutblog.info/ steppinout

    I know that this is going to be usefull someday. Bookmark!

  • http://www.extremejohn.com Extreme John

    I think I might have to check out that open flash carts plugin, I have a few uses for that.

  • http://techvilla.org Pavan Somu

    Thanks for the sharing article buddy. I will sure have a try on this.

  • http://eblogtip.com Tinh

    Great article and I have not used these tools yet

  • http://www.emoneycorner.co.cc/ Bill

    Cool this tools useful to show our graph to attract direct advertiser. Have to save it. Thanks

  • http://www.convertyourcash.com/ Ninad Ranade

    Useful article,

    I am going to use it for my website

  • http://razzil.com RRH

    Nice tut. could you know how to embed xps file in website.

  • http://www.worthytips.com/ Arafat Hossain Piyada

    Very interesting compilation, something I always want when I think about making a chart. I like jQuery Visualize Plug-in, will try it.

  • http://technascent.com/ Uttoran Sen

    its a cool idea to put graphs in the blogs, will try out a few of these services, thanks,

  • http://wpthemez.net Garala

    An image, graph or any visual does make a blog post stand out.

    Interesting read.

  • http://bellthebull.com/ khalid

    Nice info dear, I was needed this for many of my posts in share market related articles. Thanks a lot.