https://github.com/railsjazz/peity_vanilla
Vanila JS Sparklines library inspired by peity.js
https://github.com/railsjazz/peity_vanilla
charts javascript sparklines
Last synced: about 1 year ago
JSON representation
Vanila JS Sparklines library inspired by peity.js
- Host: GitHub
- URL: https://github.com/railsjazz/peity_vanilla
- Owner: railsjazz
- License: mit
- Created: 2022-04-28T16:30:45.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-08-20T10:55:22.000Z (almost 2 years ago)
- Last Synced: 2025-04-06T10:37:35.839Z (about 1 year ago)
- Topics: charts, javascript, sparklines
- Language: JavaScript
- Homepage: https://www.railsjazz.com/
- Size: 470 KB
- Stars: 77
- Watchers: 4
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: MIT-LICENSE
Awesome Lists containing this project
README
# Peity Vanilla JS
[](https://opensource-heroes.com/r/railsjazz/peity_vanilla)
Converts an element's content into a `` mini pie donut line or bar chart and is compatible with any browser that supports ``: Chrome, Firefox, IE9+, Opera, Safari.
PS: Based on the original implementation: http://benpickles.github.io/peity/.
## Installation
Just download `peity-vanilla.min.js` and add to your HTML file.
Download link: https://raw.githubusercontent.com/railsjazz/peity_vanilla/main/dist/peity-vanilla.js.
```html
```
And start using :)
## Pie Charts
```html
1/5
226/360
0.52/1.561
1,4
226,134
0.52,1.041
1,2,3,2,2
document.querySelectorAll(".pie").forEach(e => peity(e, "pie"))
```
There are two subtly different pie chart semantics, a "/" delimiter is assumed to mean "three out of five" and only the first two values will be drawn, otherwise all of the values are included in the chart and the total is the sum of all values.
You can also pass delimiter, fill, height, radius and width options. Passing a radius will set the correct width and height, the pie will always be a circle that fits the available space.
## Donut Charts
```html
1/5
226/360
0.52/1.561
1,4
226,134
0.52,1.041
1,2,3,2,2
document.querySelectorAll(".donut").forEach(e => peity(e, "donut"))
```
Donut charts are the same as pie charts and take the same options with an added innerRadius option which defaults to half the radius.
## Line Charts
```html
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
document.querySelectorAll(".line").forEach(e => peity(e, "line"))
```
Line charts work on a comma-separated list of digits. Line charts can take the following options: delimiter, fill, height, max, min, stroke, strokeWidth and width.
## Bar Charts
```html
document.querySelectorAll(".bar").forEach(e => peity(e, "bar"))
```
Bar charts work in the same way as line charts and take the following options: `delimiter, fill, height, max, min, padding and width`.
## data-* attributes
Data attributes can be used to pass custom settings per-chart - options explicitly passed to the peity() function take precedence over data-* attributes.
```html
1/7
2/7
3/7
4/7
5/7
6/7
7/7
document.querySelectorAll(".data-attributes span").forEach(e => peity(e, "donut"))
```
## Setting Colours Dynamically
```html
4,7,6,5
5,3,9,6,5
document.querySelectorAll(".bar-colours-1").forEach(e => peity(e, "bar", {
fill: ["red", "green", "blue"]
}))
document.querySelectorAll(".bar-colours-2").forEach(e => peity(e, "bar", {
fill: function(value) {
return value > 0 ? "green" : "red"
}
}))
document.querySelectorAll(".bar-colours-3").forEach(e => peity(e, "bar", {
fill: function(_, i, all) {
var g = parseInt((i / all.length) * 255)
return "rgb(255, " + g + ", 0)"
}
}))
document.querySelectorAll(".pie-colours-1").forEach(e => peity(e, "bar", {
fill: ["cyan", "magenta", "yellow", "black"]
}))
document.querySelectorAll(".pie-colours-2").forEach(e => peity(e, "bar", {
fill: function(_, i, all) {
var g = parseInt((i / all.length) * 255)
return "rgb(255, " + g + ", 0)"
}
}))
```
Pie, donut and bar chart colours can be defined dynamically based on the values of the chart. When passing an array its values are cycled, when passing a function it is called once for each value allowing you to define each bar or segment's colour. The callback is invoked with the value, its index, and the full array of values - the same arguments as the callback for Array#forEach.
## Updating Charts
Charts can be updated by changing the selection's text content. The chart will be redrawn with the same options that were originally passed to it.
```html
5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2
var updatingChart = peity(document.getElementById("updating-chart"), "line", { width: 64 });
setInterval(function() {
var random = Math.round(Math.random() * 10)
var values = updatingChart.innerText.split(",")
values.shift()
values.push(random)
updatingChart.innerText = values.join(",")
}, 1000);
```
## Default Settings
```html
peity.defaults.pie = {
delimiter: null,
fill: ["#58508d", "#ffa600", "#ff6361"],
height: null,
radius: 8,
width: null
}
peity.defaults.donut = {
delimiter: null,
fill: ["#ff9900", "#fff4dd", "#ffd592"],
height: null,
innerRadius: null,
radius: 8,
width: null
}
peity.defaults.line = {
delimiter: ",",
fill: "#fff4dd",
height: 16,
max: null,
min: 0,
stroke: "#ffa600",
strokeWidth: 1,
width: 32
}
peity.defaults.bar = {
delimiter: ",",
fill: ["#4d89f9"],
height: 16,
max: null,
min: 0,
padding: 0.1,
width: 32
}
```
# Future
Please if you want to contribute here is a list with some ideas:
- version for react, angular, vue, ...
- unit tests
- TypeScript?
- tooltips
- more chart types (stacked, multi-line, etc)
- more options for existing charts
- build process and instructions
- remote datasource
- background color?
# Build Process
`yarn build` - production.
# Credits
[
](https://opensource-heroes.com/r/railsjazz/peity_vanilla)
Thanks for inspiration and original jQuery implementation - http://benpickles.github.io/peity/. I must admit this version is 98% consist of the original code, even the documentation, so please go to original page and put a "star" to original repo.
[
](https://www.railsjazz.com/?utm_source=github&utm_medium=bottom&utm_campaign=peity_vanilla)