JavaScript
Article
By Sam Deering

Very Easy jQuery Horizonal Bar Chart

By Sam Deering

easy-jquery-bar-chart

This is how to setup your own jQuery bar chart in just a few easy steps. The demo is a horizonal bar chart but you can change the settings of the plugin to vertical, change speed and colors.

Demo

--ADVERTISEMENT--

Instructions

  1. Download the jquery.charts.js plugin
  2. Copy the HTML code below
  3. Change the data in the table

That’s it! :-)

HTML and jQuery Code






Statistics
Option Popularity
Total 100
Burnt 5
Buried 1
  • Pingback: Very Easy jQuery Horizonal Bar Chart | Web Design Northamptonshire()

  • paul bautista

    Hi, i followed(exactly) the simple instructions that you’ve stated, but for some reasosn it is not working.. anyhting else i need to do? the data are appearing but the UI is not working…

    • jquery4u

      Hi Paul,

      Whats the url of the web page your trying?
      OR
      Can you post your code somewhere like jsfiddle?

      Cheers
      Sam

      • paul bautista

        basically, this is where i inserted the entire code(within the table tag) that you posted above:

        header

        footer

        I’m actually developing a jquery mobile app, and im appending the whole table tag inside the tag… also, should i put $(“#stats”).charts() on document ready?

  • samad

    I integrated this easy jquery bar chart its good but its not working in Google chrome and Firefox any help please reply me.

    • jquery4u

      @samad,

      The plugin works with all major browsers. Can you give me more information so I can assist. Whats the url? Whats the HTML markup of your chart?

      Cheers

  • THX very goog plugin it help so much. but i want to know if is posible to make it vertical

    • abstract

      How to increase the width and the bar width (in a vertical bar chart)

  • zidan

    nice script , but i cant make it to work with variables. any solution? or inside php tags.

  • thooom

    I can’t seem to get this to work vertically, seems like the bars just collide into eachother showing whichever one is at the bottom.

  • Pingback: 10+ Data Visualization Tutorials [jQuery and HTML/CSS] | gonzoblog()

Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.