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")