Bar Chart Plugin with jQuery

[jangeryelliot]

This tutorial helps you make a Bar Chart Plugin with jQuery, I made a Chart that shows the percentage of different brands of Cellphones.

I'm using jQuery and HTML/CSS to create this simple bar chart.

Hope that this tutorial will help you a lot.

You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

⚙ Live Demo

How to Create it

Kindly include this file to the HEAD tag of your web page to have a simple style the Bar Chart.

1. <link
   
   href
   
   =
   
   "jquerysctipttop.css"
   
   rel
   
   =
   
   "stylesheet"
   
   type
   
   =
   
   "text/css"
   
   >
   
2. <link
   
   rel
   
   =
   
   "stylesheet"
   
   href
   
   =
   
   "bootstrap.min.css"
   
   >
   
3. <link
   
   href
   
   =
   
   "jquery.barCharts.css"
   
   rel
   
   =
   
   "stylesheet"
   
   type
   
   =
   
   "text/css"
   
   >
   

You have to construct simple markup for the structure of the Bar Chart. Then, you have to specify the numeric value using "data-value". It looks like this.

1. <div
   
   class
   
   =
   
   "simple_Bar_Chart"
   
   >
   
2. <div
   
   class
   
   =
   
   "barChart__row"
   
   data-value
   
   =
   
   "10"
   
   >
   
3. <span
   
   class
   
   =
   
   "barChart__label"
   
   >
   
   Firefly</
   
   span
   
   >
   
4. <span
   
   class
   
   =
   
   "barChart__value"
   
   >
   
   10</
   
   span
   
   >
   
5. <span
   
   class
   
   =
   
   "barChart__bar"
   
   ><span
   
   class
   
   =
   
   "barChart__barFill"
   
   ></
   
   span
   
   ></
   
   span
   
   >
   
6. </
   
   div
   
   >
   
7. <div
   
   class
   
   =
   
   "barChart__row"
   
   data-value
   
   =
   
   "50"
   
   >
   
8. <span
   
   class
   
   =
   
   "barChart__label"
   
   >
   
   Huawei</
   
   span
   
   >
   
9. <span
   
   class
   
   =
   
   "barChart__value"
   
   >
   
   50</
   
   span
   
   >
   
10. <span
    
    class
    
    =
    
    "barChart__bar"
    
    ><span
    
    class
    
    =
    
    "barChart__barFill"
    
    ></
    
    span
    
    ></
    
    span
    
    >
    
11. </
    
    div
    
    >
    
12. <div
    
    class
    
    =
    
    "barChart__row"
    
    data-value
    
    =
    
    "60"
    
    >
    
13. <span
    
    class
    
    =
    
    "barChart__label"
    
    >
    
    Samsung</
    
    span
    
    >
    
14. <span
    
    class
    
    =
    
    "barChart__value"
    
    >
    
    60</
    
    span
    
    >
    
15. <span
    
    class
    
    =
    
    "barChart__bar"
    
    ><span
    
    class
    
    =
    
    "barChart__barFill"
    
    ></
    
    span
    
    ></
    
    span
    
    >
    
16. </
    
    div
    
    >
    
17. <div
    
    class
    
    =
    
    "barChart__row"
    
    data-value
    
    =
    
    "50"
    
    >
    
18. <span
    
    class
    
    =
    
    "barChart__label"
    
    >
    
    Sony</
    
    span
    
    >
    
19. <span
    
    class
    
    =
    
    "barChart__value"
    
    >
    
    50</
    
    span
    
    >
    
20. <span
    
    class
    
    =
    
    "barChart__bar"
    
    ><span
    
    class
    
    =
    
    "barChart__barFill"
    
    ></
    
    span
    
    ></
    
    span
    
    >
    
21. </
    
    div
    
    >
    
22. <div
    
    class
    
    =
    
    "barChart__row"
    
    data-value
    
    =
    
    "40"
    
    >
    
23. <span
    
    class
    
    =
    
    "barChart__label"
    
    >
    
    Oppo</
    
    span
    
    >
    
24. <span
    
    class
    
    =
    
    "barChart__value"
    
    >
    
    40</
    
    span
    
    >
    
25. <span
    
    class
    
    =
    
    "barChart__bar"
    
    ><span
    
    class
    
    =
    
    "barChart__barFill"
    
    ></
    
    span
    
    ></
    
    span
    
    >
    
26. </
    
    div
    
    >
    
27. <div
    
    class
    
    =
    
    "barChart__row"
    
    data-value
    
    =
    
    "100"
    
    >
    
28. <span
    
    class
    
    =
    
    "barChart__label"
    
    >
    
    Apple</
    
    span
    
    >
    
29. <span
    
    class
    
    =
    
    "barChart__value"
    
    >
    
    100</
    
    span
    
    >
    
30. <span
    
    class
    
    =
    
    "barChart__bar"
    
    ><span
    
    class
    
    =
    
    "barChart__barFill"
    
    ></
    
    span
    
    ></
    
    span
    
    >
    
31. </
    
    div
    
    >
    
32. </
    
    div
    
    >
    

And, kindly include this simple script to initialize the jQuery plugin.

1. <
   
   script src=
   
   "jquery-1.12.4.min.js"
   
   ></
   
   script>
   
2. <
   
   script src=
   
   "jquery.easing.min.js"
   
   ></
   
   script>
   
3. <
   
   script src=
   
   "jquery.barChart.js"
   
   ></
   
   script>
   
4. 
   
5. <
   
   script>
   
6. jQuery(
   
   '.simple_Bar_Chart'
   
   )
   
   .simple_Bar_Chart
   
   (
   
   {
   
   easing:
   
   'easeOutQuart'
   
   }
   
   )
   
   ;
   
7. </
   
   script>
   

Output

⚙ Live Demo

Hope that this simple yet useful tutorial that I created may help you to your future projects.

For the full source code, kindly click the "Download Code" button below.

Learn by Examples

Examples are better than thousands of words. Examples are often easier to understand than text explanations.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download