3 Demos of chart (bar, columns, progress, step) plug-in based on jQuery and CSS

The simple-chart plug-in

The simple-chart plug-in is used to create the charts in web pages. The pattern of the chart can be specified in different ways e.g. columns charts, step chart, progress chart etc.

The labels and their respective values can be given using the JavaScript that you may fetch from the database. The type option of the plug-in allows you creating the type of chart like if it is a column, bar, progress etc. chart.

Demo1 Demo2 Demo3
Developer’s page Download plug-in

See the coming section for using different options and how to set up this simple chart plug-in.

Setting up the simple chart plug-in

Grab the plug-in from the above download link. Place the CSS file in the <head> section and JS file at the last of a web page.

<link rel=”stylesheet” href=”css/jquery-simple-chart/simple-chart.css”>

JS file after the jQuery library:

<script src=”js/jquery-simple-chart/simple-chart.js”></script>

The script contains the data for the charts; labels, values, chart type etc. See the demos and functional code below.

A demo of column chart

In this demo of columns chart, the dummy data is used for the illustration purpose only. Following options are used for creating the chart:

  • text: //“Heading of the chart”
  • type: //column or progress or waterfall etc.
  • layout: // defining the height and width
  • item: // specifies the label, value, color of bars etc.
  • and more

See the demo and code:

jQuery column chart

See online demo and code

The code:


A demo of bar chart

Only the type of the chart is changed in the options from column to bar. Also, for this demo, the color of the chart is also changed. See the code and the output:

jQuery bar chart

See online demo and code

The code:


A demo of waterfall chart type

In the render option, the size is set as absolute while the type option is the waterfall. Again the color of the chart is changed by using the item option. See the demo of waterfall chart with the same dummy figures:

jQuery waterfall chart

See online demo and code

Get the complete code from the demo page.

Other types of charts

Similarly, you may create the progress and step charts by using these values for the type option:

For progress chart:

type: ‘progress’

For step chart:

type: ‘step’