Peity Charts
Introduction
Peity (sounds like deity) is a jQuery plugin that converts an element's content into a <svg>
mini pie donut line or bar chart and is compatible with any browser that supports <svg>
: Chrome, Firefox, IE9+, Opera, Safari.
How to Setup
HTML Structure
Donut Chart
<span class="donut" data-peity='{ "fill": [" #00acf0", "#22af47"]}'>3/5</span>
Pie Chart
<span class="pie">0.52,1.041</span>
Line Chart
<span class="line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
Bar Chart
<span class="bar">5,3,9,6,5,9,7,3,5,2</span>
Dependency
JS
<!-- Peity JavaScript -->
<script src="vendors/peity/jquery.peity.min.js"></script>
<script src="dist/js/peity-data.js"></script>
Initialize Peity Chart JS
Donut Chart
$('.donut').peity('donut')
Pie Charts
$("span.pie").peity("pie")
Line Chart
$(".line").peity("line")
Bar Charts
$(".bar").peity("bar")
Last updated
Was this helpful?