Vanila JS Sparklines library inspired by peity.js

Overview

Peity Vanilla JS

peity

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.

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.

<script type="text/javascript" src="peity-vanilla.min.js"></script>

And start using :)

Pie Charts

<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span>

<script>
  document.querySelectorAll(".pie").forEach(e => peity(e, "pie"))
</script>

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

<span class="donut">1/5</span>
<span class="donut">226/360</span>
<span class="donut">0.52/1.561</span>
<span class="donut">1,4</span>
<span class="donut">226,134</span>
<span class="donut">0.52,1.041</span>
<span class="donut">1,2,3,2,2</span>

<script>
  document.querySelectorAll(".donut").forEach(e => peity(e, "donut"))
</script>

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

<span class="line">5,3,9,6,5,9,7,3,5,2</span>
<span class="line">5,3,2,-1,-3,-2,2,3,5,2</span>
<span class="line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>

<script>
  document.querySelectorAll(".line").forEach(e => peity(e, "line"))
</script>

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

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

<script>
  document.querySelectorAll(".bar").forEach(e => peity(e, "bar"))
</script>

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.

<p class="data-attributes">
  <span data-peity='{ "fill": ["red", "#eeeeee"],    "innerRadius": 10, "radius": 40 }'>1/7</span>
  <span data-peity='{ "fill": ["orange", "#eeeeee"], "innerRadius": 14, "radius": 36 }'>2/7</span>
  <span data-peity='{ "fill": ["yellow", "#eeeeee"], "innerRadius": 16, "radius": 32 }'>3/7</span>
  <span data-peity='{ "fill": ["green", "#eeeeee"],  "innerRadius": 18, "radius": 28 }'>4/7</span>
  <span data-peity='{ "fill": ["blue", "#eeeeee"],   "innerRadius": 20, "radius": 24 }'>5/7</span>
  <span data-peity='{ "fill": ["indigo", "#eeeeee"], "innerRadius": 18, "radius": 20 }'>6/7</span>
  <span data-peity='{ "fill": ["violet", "#eeeeee"], "innerRadius": 15, "radius": 16 }'>7/7</span>
</p>

<script>
  document.querySelectorAll(".data-attributes span").forEach(e => peity(e, "donut"))
</script>

Setting Colours Dynamically

<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>
<span class="pie-colours-2">5,3,9,6,5</span>

<script>
  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)"
    }
  }))
</script>

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.

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

<script>
  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);
</script>

Default Settings

<script>
  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
  } 
</script>

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

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.

You might also like...

A reusable charting library written in d3.js

NVD3 - A reusable D3 charting library Inspired by the work of Mike Bostock's Towards Reusable Charts, and supported by a combined effort of Novus and

Jan 3, 2023

:bar_chart: A D3-based reusable chart library

c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http

Jan 2, 2023

The lightweight library for manipulating and animating SVG

SVG.js A lightweight library for manipulating and animating SVG, without any dependencies. SVG.js is licensed under the terms of the MIT License. Inst

Dec 25, 2022

JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Dec 30, 2022

mxGraph is a fully client side JavaScript diagramming library

NOTE 09.11.2020 : Development on mxGraph has now stopped, this repo is effectively end of life. Known forks: https://github.com/jsGraph/mxgraph https:

Dec 30, 2022

A library optimized for concise and principled data graphics and layouts.

A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Dec 22, 2022

🔥 JavaScript Library for HTML5 canvas based heatmaps

🔥 JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Jan 2, 2023

Cubism.js: A JavaScript library for time series visualization.

Cubism.js Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube a

Jan 3, 2023

A general purpose, real-time visualization library.

Epoch By Ryan Sandor Richards Epoch is a general purpose charting library for application developers and visualization designers. It focuses on two di

Dec 30, 2022
Releases(v0.0.8)
  • v0.0.8(May 2, 2022)

    What's Changed (Since 0.0.7)

    • FIX: Now chart updates automatically after element content is changed, there is no need to call change event.
    Source code(tar.gz)
    Source code(zip)
  • v0.0.7(May 2, 2022)

  • v0.0.6(May 2, 2022)

    What's Changed (Since 0.0.5)

    • BREAKING: Renamed npm package to peity-vanilla
    • INTERNAL: Improved constructor
    • INTERNAL: Added minified version
    • FEATURE: Added destroy method
    • FEATURE: Peity instance now accessible through node._peity
    Source code(tar.gz)
    Source code(zip)
  • v0.0.5(May 1, 2022)

    What's Changed (Since 0.0.4)

    • INTERNAL: Rewritten code base with use of modern JavaScript
    • INTERNAL: Added build configuration for ES module
    • BREAKING: ES module no longer exposes peity globally
    Source code(tar.gz)
    Source code(zip)
Owner
www.railsjazz.com
www.railsjazz.com
hunter phone script NoPixel_3.0 inspired

hunter-phone hunter phone script NoPixel_3.0 inspired And Fixd Lang qb-phone qb-phone mixed between nopixel and iphone Dependencies qb-core qb-policej

Hunter Souvik 15 Jan 2, 2023
Java library for use with Chart.js javascript library

Chart.java Chart.java enables integration with the excellent Chart.js library from within a Java application. Usage example In Java: BarDataset datase

Marceau Dewilde 102 Dec 16, 2022
JavaScript 3D library.

three.js JavaScript 3D library The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current

Mr.doob 87.9k Jan 2, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 19.4k Jan 2, 2023
The JavaScript library for modern SVG graphics.

Snap.svg · A JavaScript SVG library for the modern web. Learn more at snapsvg.io. Follow us on Twitter. Install Bower - bower install snap.svg npm - n

Adobe Web Platform 13.6k Dec 30, 2022
JavaScript Vector Library

Raphaël: Cross-browser vector graphics the easy way Visit the library website for more information: http://raphaeljs.com https://dmitrybaranovskiy.git

Dmitry Baranovskiy 11.2k Jan 3, 2023
A JavaScript library dedicated to graph drawing

sigma.js - v1.2.1 Sigma is a JavaScript library dedicated to graph drawing, mainly developed by @jacomyal and @Yomguithereal. Resources The website pr

Alexis Jacomy 10.3k Jan 3, 2023