This time I will share jQuery Plugin and tutorial about Basic SVG Chart Plugin For jQuery – jChart, hope it will help you in programming stack.
| File Size: | 38.9 KB |
|---|---|
| Views Total: | 8231 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
“
jChart is an easy-to-use jQuery plugin for rendering SVG based, vector shaped pie & donut charts that display each value as a part of a pie or donut.
New: Currently supports gauge and bar charts.
How to use it:
1. Import the latest version of jQuery library and the jChart plugin’s script into the document.
1 |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" |
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"> |
4 |
</script> |
5 |
<script src="/src/js/jchart.js"></script> |
2. Create a container element to hold the chart.
1 |
<div id="element"></div> |
3. Prepare your data in an array of objects as these:
01 |
const mydata = [ |
02 |
{ |
03 |
value: 300 |
04 |
}, |
05 |
{ |
06 |
value: 100, |
07 |
color: '#77dd4f', // stroke color of the segment |
08 |
draw: true, // draw the segment on the chart or not |
09 |
push: true //push the next segment via offset |
10 |
}, |
11 |
{ |
12 |
value: 100, |
13 |
color: '#dd5723' |
14 |
} |
15 |
] |
4. Initialzie the plugin and render a default donut chart inside the container you just created.
1 |
const myChart = $("#element").jChart({ |
2 |
data: myData |
3 |
}); |
5. Render the data as a pie chart instead.
1 |
const myChart = $("#element").jChart({ |
2 |
data: myData, |
3 |
appearance: { |
4 |
type: 'donut' |
5 |
} |
6 |
}); |
6. The necessary CSS to style the pie & donut chart.
01 |
.jchart--donut--segment, .jchartpie--segment { |
02 |
transition: stroke-dasharray 1s ease; |
03 |
} |
04 |
05 |
.jchart { |
06 |
width: 400px; |
07 |
height: 400px; |
08 |
} |
09 |
10 |
.jchart--body { |
11 |
width: 100%; |
12 |
height: 100%; |
13 |
} |
7. All default configuration options.
01 |
const myChart = $("#element").jChart({ |
02 |
03 |
// selectors |
04 |
elements: { |
05 |
container: null, |
06 |
body: null, |
07 |
group: null, |
08 |
figure: null, |
09 |
svg: null, |
10 |
segments: [], |
11 |
markers: null |
12 |
}, |
13 |
14 |
// your own data |
15 |
data: [], |
16 |
17 |
// values necessary for the graphing, like sum of values of all segments |
18 |
values: {}, |
19 |
20 |
placeholder: { |
21 |
data: { |
22 |
value: 0, // value of the segment |
23 |
color: { |
24 |
normal: '#00a3f2', // stroke/fill color of the segment |
25 |
active: '#00d8f2', |
26 |
}, |
27 |
draw: true, // whether to draw the segment on the chart or not; default true |
28 |
push: true, // whether to push the next segment via offset. Best to set false together when draw is set to false (the empty section will always be at the end that way); default true |
29 |
order: null, // drawing order |
30 |
title: 'untitled', |
31 |
strokeWidth: 3 |
32 |
} |
33 |
}, |
34 |
35 |
// appearance options |
36 |
appearance: { |
37 |
type: 'donut', // or 'pie', 'bar' |
38 |
baseColor: '#ddd', |
39 |
segmentColor: { |
40 |
normal: '#00a3f2', |
41 |
active: '#00d8f2', |
42 |
}, |
43 |
baseOffset: 0, // offset for starting point of first segment |
44 |
baseStrokeWidth: 1, |
45 |
strokeWidth: 3, // default stroke width for all segments |
46 |
animated: true, |
47 |
48 |
title: { |
49 |
chartTitle: '', |
50 |
showValue: true, // tooltips |
51 |
showPercentage: true, |
52 |
showSummary: false, // summary - show a value inside the donut chart |
53 |
summaryTitle: '', // by default it shows the percentage of the greatest segment in the chart |
54 |
// (if summaryTitle is empty) |
55 |
summarySegment: null // the segment's id which percentage will be displayed in the summary |
56 |
}, |
57 |
58 |
/* DONUT AND CIRCLE */ |
59 |
radius: 100 / (2 * Math.PI), |
60 |
innerCutout: 0.75, // how "thin" the segments are from the center point. (0 will render a pie chart (full circle)) |
