Basic Line Chart Plugin with jQuery and Canvas linechart js - Download Basic Line Chart Plugin with jQuery and Canvas - linechart.js

Download Basic Line Chart Plugin with jQuery and Canvas – linechart.js

By Posted on

This time I will share jQuery Plugin and tutorial about Basic Line Chart Plugin with jQuery and Canvas – linechart.js, hope it will help you in programming stack.

Basic Line Chart Plugin with jQuery and Canvas linechart js - Download Basic Line Chart Plugin with jQuery and Canvas - linechart.js
File Size: 4.16 KB
Views Total: 3909
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A really simple jQuery plugin to draw a canvas based line chart on your webpage that features html tooltip, multiple data lines, and dots click / hover functions.

How to use it:

1. Include jQuery library and the jQuery linechart.js script on your html page.

view source
1 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
2 <script src="linechart.js"></script>

2. Draws a line chart with custom datasets on an html5 canvas element.

view source
01 $.linechart({
02     id: 'test',
03     data: [
04         [
05             {
06                 X: 0,
07                 Y: 54,
08                 tip: '<a href="https://www.jqueryscript.net/tooltip/">Tooltip</a> HTML 1#1'
09             }, {
10                 X: 2,
11                 Y: 28,
12                 tip: 'Tooltip HTML 1#2'
13             }, {
14                 X: 3,
15                 Y: 22,
16                 tip: 'Tooltip HTML 1#3'
17             }, {
18                 X: 4,
19                 Y: 34,
20                 tip: 'Tooltip HTML 1#4'
21             }, {
22                 X: 5,
23                 Y: 40,
24                 tip: 'Tooltip HTML 1#5'
25             }, {
26                 X: 6,
27                 Y: 80,
28                 tip: 'Tooltip HTML 1#6'
29             }, {
30                 X: 7,
31                 Y: 76,
32                 tip: 'Tooltip HTML 1#7'
33             }
34         ], [
35             {
36                 X: 0,
37                 Y: 12,
38                 tip: 'Tooltip HTML 2#1'
39             }, {
40                 X: 1,
41                 Y: 56,
42                 tip: 'Tooltip HTML 2#2'
43             }, {
44                 X: 4,
45                 Y: 42,
46                 tip: 'Tooltip HTML 2#3'
47             }, {
48                 X: 5,
49                 Y: 85,
50                 tip: 'Tooltip HTML 2#4'
51             }, {
52                 X: 7,
53                 Y: 68,
54                 tip: 'Tooltip HTML 2#5'
55             }, {
56                 X: 8,
57                 Y: 53,
58                 tip: 'Tooltip HTML 2#6'
59             }, {
60                 X: 9,
61                 Y: 96,
62                 tip: 'Tooltip HTML 2#7'
63             }
64         ]
65     ]
66 });

3. Full configurable options.

view source
01 // id given to the chart
02 id: '',            
03  
04  // data arrays                   
05 data: [                               
06   [
07     { X: 0, Y: 54, tip: 'Tooltip HTML 1#1' },
08     { X: 2, Y: 28, tip: 'Tooltip HTML 1#2' },
09     { X: 3, Y: 22, tip: 'Tooltip HTML 1#3' }
10   ]
11 ],
12  
13 // <a href="https://www.jqueryscript.net/tags.php?/grid/">grid</a> color
14 gridColor: '#555555',                
15  
16 // grid texts font properties 
17 gridFont: 'normal 11px Arial',       
18  
19 // grid texts font color 
20 gridFontColor: '#333333',       
21  
22 // grid horizontal space between values      
23 gridPaddingX: 30,            
24  
25 // grid vertical space between values         
26 gridPaddingY: 30,                 
27  
28 // grid width    
29 gridWidth: 1,                  
30  
31 // dots hover function       
32 dotsHover: function(dot){},            
33  
34 // dots click function
35 dotsClick: function(dot){},          
36  
37 source : jqueryscript.net

Related posts: