3 Demos of jQuery Line, Bar, Pie and Donut charts with SVG

Creating charts using the peity plug-in

The peity is a simple, light-weight useful jQuery plug-in for creating the charts into your web pages. It converts content or data in a specified element into the required charts that includes line, bar, donuts, and pie charts.

You may specify the type of chart as initiating the plug-in via JavaScript. The JS file size of the plug-in is just around 4K (minified version).

Demo1 Demo2 Demo3
Developer page Download plug-in

Setting up the peity chart plug-in

Download the plug-in zipped file and find the jquery.peity.min.js or jquery.peity.js file. Place it at the desired location and refer it on your web page. For example:

<script src=”js/jquery.peity/jquery.peity.min.js”></script>

Make sure to place this file below the jQuery library.

The markup can be a div, span tags etc:

<div class=”demo-pie” >2/4</div>

Initiate the plug-in:

$(“.demo-pie”).peity(“pie”);

Use the data attributes or options in JavaScript for customizing the charts as shown in the examples below.

A demo of pie charts by jQuery

In this example, three pie charts are created by using the div and span tags. The content of the div and span tags are numbers separated by commas. Each acts as the share in the pie chart. You may also use the “/” e.g. 2/4, ¼ etc. If you provide the values without “/” then all will be included. The comma is for differentiation purpose. Have a look:

jQuery pie chart

See online demo and code

The Markup:

The script is for only initiating the plug-in:

You can see, the date-peity attribute is used for customizing the charts. For example, in the third chart, we have five values. The colors of each are provided by using the fill option. The innerRadius specifies the inner circle radius while the radius specifies the size of the chart.

You may also do this via JavaScript as shown in the demo below.

The bar chart demo with JavaScript

In this demo, the bar chart is created by using the JavaScript options. The color, height, and width are specified for the bars by using the following options:

  • fill [] //colors for each bar
  • height
  • padding
  • width

In the markup, ten values are provided in a span tag:

jQuery bar chart

See online demo and code

The markup:

 

The script:

The color is applied with respect to the sequence in the fill option.

An example of jQuery line chart

For creating the line chart, provide the “line” as the value while initiating the plug-in. By using the options, provide the fill color and stroke color along with the strokeWidth option.

For managing the size of the chart, provide the height and width just like the bar chart:

jQuery line chart

See online demo and code

The script:

 

Similarly, you may create the donut chart by using the donut value as initializing the plug-in. The plug-in supports events and you may manage the colors dynamically as well. See the developer page for learning more about this cool plug-in.