JavaScript
Article

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

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

< ?xml version="1.0" encoding="UTF-8"?>
< !doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">









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

  • http://www.romerorodrigo.com rodrigo

    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

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

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