bar chart jqp graph - Free Download Horizontal Bar Chart Plugin - jQuery Devstratum JQP Graph

Free Download Horizontal Bar Chart Plugin – jQuery Devstratum JQP Graph

Posted on

This time I will share jQuery Plugin and tutorial about Horizontal Bar Chart Plugin – jQuery Devstratum JQP Graph, hope it will help you in programming stack.

bar chart jqp graph - Free Download Horizontal Bar Chart Plugin - jQuery Devstratum JQP Graph
File Size: 14.5 KB
Views Total: 1524
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Devstratum JQP Graph is a tiny jQuery plugin for plotting your numeric values in horizontal bar charts with titles, descriptions, labels, legends, x-axis/y-axis grids support.

How to use it:

1. To use the plugin, include the following JavaScript and CSS files on the HTML page.

1 <link href="/path/to/jquery.dvstr_jqp_graph.min.css" rel="stylesheet" />
2 <script src="/path/to/cdn/jquery.min.js"></script>
3 <script src="/path/to/jquery.dvstr_jqp_graph.min.js"></script>

2. Create an element to hold the horizontal bar chart.

1 <div class="graph__block" id="example"></div>

3. Define the data to be visualized in the bar chart.

01 var myData = [
02     {
03         label: 'Phenom II X6 1055T',
04         value: [
05             336
06         ]
07     },
08     {
09         label: 'Xeon E5450',
10         value: [
11             470
12         ]
13     },
14     {
15         label: 'Core i5-3470',
16         value: [
17             337
18         ]
19     }
20 ]

4. It also allows you to visualize large chunks of data in a stacked bar chart.

01 var myData = [
02     {
03         label: 'Phenom II X6 1055T',
04         color: [
05             'blue',
06             'green',
07             'orange'
08         ],
09         value: [
10             3069,
11             5999,
12             8252,
13         ]
14     },
15     {
16         label: 'Xeon E5450',
17         color: [
18             'blue',
19             'green',
20             'orange'
21         ],
22         value: [
23             2863,
24             5120,
25             7927,
26         ]
27     },
28     {
29         label: 'Core i5-3470',
30         color: [
31             'blue',
32             'green',
33             'orange'
34         ],
35         value: [
36             4047,
37             6489,
38             9143,
39         ]
40     }
41 ]

5. Plot the data into the bar chart and done.

1 $('#example').dvstr_graph({
2   title: 'Chart Title',
3   unit: 'Seconds', // sub title
4   better: 'Lower is better', // description
5   graphs: myData
6 });

6. Full plugin options to customize the bar chart.

01 $('#example').dvstr_graph({
02   title: '',
03   description: '',
04   unit: '',
05   better: '',
06   type: 'number', // or 'time'
07   separate: false,
08   grid_wmax: 0,
09   grid_part: 5,
10   points: [],
11   graphs: []
12 });

Changelog:

2020-09-22

  • v1.1

This awesome jQuery plugin is developed by devstratum. For more Advanced Usages, please check the demo page or visit the official website.