keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Peity Chart

Peity Chart.

Peity (sounds like deity) is a simple jQuery plugin that converts an element's content into a simple <canvas> mini pie line or bar chart and is compatible with any browser that supports <canvas>: Chrome, Firefox, IE9+, Opera, Safari. Click here

Attributes

1/7
2/7
3/7
4/7
5/7
6/7 

<span class="piety-data-attr"data-peity='{"fill": ["var(--bs-primary)", "rgba(var(--bs-primary-rgb),1)"], "innerRadius": 10, "radius": 40}'>1/7</span>

<span class="piety-data-attr" data-peity='{ "fill": ["var(--bs-secondary)", "rgba(var(--bs-secondary-rgb), .5)"], "innerRadius": 14, "radius": 36 }'>2/7</span>

<span class="piety-data-attr" data-peity='{ "fill": ["var(--bs-info)", "rgba(var(--bs-info-rgb), .5)"], "innerRadius": 16, "radius": 32 }'>3/7</span>

<span class="piety-data-attr" data-peity='{ "fill": ["var(--bs-success)", "rgba(var(--bs-success-rgb), .5)"],  "innerRadius": 18, "radius": 28 }'>4/7</span>

<span class="piety-data-attr" data-peity='{ "fill": ["var(--bs-warning)", "rgba(var(--bs-warning-rgb), .5)"],   "innerRadius": 20, "radius": 24 }'>5/7</span>

<span class="piety-data-attr" data-peity='{ "fill": ["var(--bs-danger)", "rgba(var(--bs-danger-rgb), .1)"], "innerRadius": 18, "radius": 20 }'>6/7</span>

Bar Chart

5,3,9,6,5,9,7,3,5,2
5,3,2,-1,-3,-2,2,3,5,2
0,-3,-6,-4,-5,-4,-7,-3,-5,-2 

<span class="piety-bar-chart">5,3,9,6,5,9,7,3,5,2</span>

<span class="piety-bar-chart">5,3,2,-1,-3,-2,2,3,5,2</span>

<span class="piety-bar-chart">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>

Line Chart

6,2,8,4,3,8,1,3,6,5,9,2,8,1,4,8,9,8,2,1
6,2,8,4,-3,8,1,-3,6,-5,9,2,-8,1,4,8,9,8,2,1
6,2,8,4,3,8,1,3,6,5,9,2,8,1,4,8,9,8,2,1 

<span class="peity-line-chart">6,2,8,4,3,8,1,3,6,5,9,2,8,1,4,8,9,8,2,1</span>

<span class="peity-line-chart" data-width="100%">6,2,8,4,-3,8,1,-3,6,-5,9,2,-8,1,4,8,9,8,2,1</span>

<span class="peity-line-chart" data-width="100%">6,2,8,4,3,8,1,3,6,5,9,2,8,1,4,8,9,8,2,1</span>

Pie Charts

5/8
250/650
0.52/1.561
1,4
226,134
0.52,1.041 

<span class="peity-pie-chart">5/8</span>

<span class="peity-pie-chart">250/650</span>

<span class="peity-pie-chart">0.52/1.561</span>

<span class="peity-pie-chart">1,4</span>

<span class="peity-pie-chart">226,134</span>

<span class="peity-pie-chart">0.52,1.041</span>

Bar Color Chart

5,3,9,6,5,9,7,3,5,2
5,3,2,-1,-3,-2,2,3,5,2
0,-3,-6,-4,-5,-4,-7,-3,-5,-2
4,7,6,5 

<span class="bar-colours-1">5,3,9,6,5,9,7,3,5,2</span>

<span class="bar-colours-2">5,3,2,-1,-3,-2,2,3,5,2</span>

<span class="bar-colours-3">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>

<span class="pie-colours-1">4,7,6,5</span>

Live Update

5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2 

<span class="piety-updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>