Progressive pie, donut, bar and line charts

Overview

Peity

Build Status

Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini <svg> pie, donut, line or bar chart.

Basic Usage

HTML

<span class="pie">3/5</span>
<span class="donut">5,2,3</span>
<span class="line">3,5,1,6,2</span>
<span class="bar">2,5,3,6,2,1</span>

JavaScript (jQuery)

$(".pie").peity("pie");
$(".donut").peity("donut");
$(".line").peity("line");
$(".bar").peity("bar");

Docs

More detailed usage can be found at benpickles.github.io/peity.

Development

Run the automated visual regression tests with:

make test

Run a filtered set of tests with:

ARGS="--grep bar" make test

To manually view all test cases run:

make server

And hit http://localhost:8080/.

Release

Update the version string in jquery.peity.js, run make release, and follow the instructions.

Copyright

Copyright 2009-2020 Ben Pickles. See LICENCE for details.

Comments
  • Requests: Line Graph Baseline & Pie Chart Hole

    Requests: Line Graph Baseline & Pie Chart Hole

    opened by ghost 10
  • Automatically apply data attributes

    Automatically apply data attributes

    When users define data-colour, data-diameter etc. (with those after the 'data-' prefix matching properties of defaults), apply them automatically instead of requiring writing custom functions.

    opened by buunguyen 10
  • It would be nice if

    It would be nice if "width" could take a percentage value

    I'm trying to have the line chart span 100% of it's parent and when I pass '100%' in the width parameter of the line type, the plugin doesn't draw anything.

    Thanks.

    opened by nicjohnson 9
  • Tooltips

    Tooltips

    Any chance you could add tooltips (by default) to some types of peity chart (e.g. pie) or even all of them, so that the real underlying value (e.g. 17/23) can be viewed as well as the visual rendering?

    opened by MarcusJT 7
  • innerHTML to Span

    innerHTML to Span

    Hi, I'm having a problem running the Peity Charts using innerHtml.

    if a use an alert to show the content of the Span I can see perflecty all the values inserted into the Span tag using innerHTML but it doesn't show the line bar graph. If a place all the values manually into the Span Tag I can see the graph just fine.

    `

    `

    I have a function below the code above that has this code:

    var test = "5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2"; document.getElementById("spanPeity").innerHTML = test; alert("content of span spanPeity= " + document.getElementById("spanPeity").innerHTML);

    Could you please tell what's wrong in the code.

    Thanks so much in advance.

    opened by Jonathan-Developer 6
  • Added IE < 9 support with excanvas

    Added IE < 9 support with excanvas

    Great plugin, thanks for creating it! I had a use-case recently that required support for IE < 9 using excanvas. This pull request adds support for excanvas + IE7/8.

    IE 8 required adding the canvas element to a container that had no "P" tags (I used body but only if excanvas is loaded). Also IE 8 standards requires calling initElement again after any non-canvas changes are made (such as height/width) while IE7 must call it before any changes--yeah very ghetto.

    I had to change jQuery code in prepareCanvas function to plain JS to make excanvas happy as well.

    Maybe it will help someone else stuck writing for archaic organizations. Thanks again.

    Tested on Chrome (Mac), IE 7/8/9 (Windows 7).

    opened by jeff-mccoy 5
  • v0.6.0 vs. v1.1.2: canvas no longer child of element on which peity is called?

    v0.6.0 vs. v1.1.2: canvas no longer child of element on which peity is called?

    Please correct me if I'm wrong but it appears that v0.6.0 vs. v1.1.2 renders the element as a child vs. a sibling, respectively, of the element containing the chart values.

    Being a previous sibling makes it much harder/impossible to style the canvas with CSS: http://stackoverflow.com/questions/1817792/css-previous-sibling-selector

    v.0.6.0: http://imgur.com/H2rwfs9

    v.1.1.2: http://imgur.com/joUXesR

    opened by tim-peterson 5
  • bar chart zero (

    bar chart zero ("0") value height

    For the bar charts, is there a way to assign some small bar height to values of "0"?

    I prefer the way Github does it with their 52-week participation graphs and not just to have empty space.

    opened by tim-peterson 5
  • Multiple colors on BarChart

    Multiple colors on BarChart

    Hi, I'm trying to set different colors for each bar on my bar chart. I use Peity to show small graph with 2 bars on for a periode n and the other for perdiode n-1 so i need to have 2 differents colors for each of my bars.

    I haven't find a way to do so.

    Thanks.

    opened by Ghriim 5
  • Expose an item's value on bar and pie slice SVG nodes

    Expose an item's value on bar and pie slice SVG nodes

    The intention is that this can drive tooltips, for example: https://jsbin.com/vufayan/edit?html,js,output

    • Addresses #2.
    • Fixes #9.
    • Addresses #29.
    • Fixes #55.
    • Fixes #71.
    • Closes #84.
    opened by benpickles 4
  • Adding composer.json and submitting to packagist

    Adding composer.json and submitting to packagist

    Would you consider adding a composer.json file so that this library can be included in a composer based PHP project easily?

    If wanted I can create the composer file and submit a pull request.

    Currently there is a clone of the repo in packagist (https://packagist.org/packages/grimmlink/peity) but it would be best to include your repo rather than someones clone

    Thanks

    opened by chewett 4
  • Add ability to use CSS classes on SVG charts

    Add ability to use CSS classes on SVG charts

    Hey,

    I was wondering if it was possible to replace this:

    <span data-peity='{ "fill": ["red", "#eeeeee"],    "innerRadius": 10, "radius": 40 }'>1/7</span>
    

    With perhaps this:

    <span data-peity='{ "class": "my-class",    "innerRadius": 10, "radius": 40 }'>1/7</span>
    .. or
    <span data-peity='{ "class": ["my-class", "my-class2"],    "innerRadius": 10, "radius": 40 }'>1/7</span>
    

    This way I can move all my colors etc. to other systems, like SASS.

    I checked the code, and it seems like there explicitly isn't a way to add attributes to the rendered SVG elements, so I can't even workaround it :). Also, I noted that SVG is optional, so of course classes wouldn't work if Peity fell back to canvas rendering.. but I'm willing to lose that support :).

    Mike.

    opened by LordMike 2
  • Required Two different color in Line chart

    Required Two different color in Line chart

    Hi, I expect two different color in line chart. For instance, If the line goes up it should be Green. If the line goes down it should be Red. Is it possible in line chart? If possible kindly explain how to do

    Thanks

    opened by shajahan86 1
  • data-value not working with

    data-value not working with "bar"

    Hey, I wanted to try out the latest data-value attribute, but I can't figure why it isn't working: My attempts:

    <span class="bar" data-value="9,8,9,10,9,9,7,8,7,9">9,8,9,10,9,9,7,8,7,9</span>
    <span class="bar" data-value="123">9,8,9,10,9,9,7,8,7,9</span>
    

    JS part

    $(".bar").peity("bar", {
            height: 36,
            fill: ['rgba(100,100,100,0.85)'],
            width: 65,
            padding: 0.2
        });
    

    Not sure what I'm not doing ok, can you give me an example when you have time?

    opened by gamebak 0
  • Change data-value to label

    Change data-value to label

    If using tooltips to display data-value on mouseOver, there is a need to show a label or context (i.e., "324.9 MB" vs "324987634").

    opened by jackvalko 0
  • Further custom styling

    Further custom styling

    Hey!

    Firstly, thanks for a great and simple to use plugin.

    Is it possible to apply a gradient to a line graph and to have each data point have a circle of some sort?

    Thanks.

    opened by harrynewsome 0
Owner
Ben Pickles
Listener of Zappa • Writer of Ruby and JavaScript • Creator of https://github.com/benpickles/peity • Leader of thought
Ben Pickles
TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

null 4 Mar 3, 2021
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching ch

Joe Walnes 2.2k Dec 13, 2022
Simple, responsive, modern SVG Charts with zero dependencies

Frappe Charts GitHub-inspired modern, intuitive and responsive charts with zero dependencies Explore Demos » Edit at CodePen » Contents Installation U

Frappe 14.6k Jan 4, 2023
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion

ApexCharts 12.1k Jan 3, 2023
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Jan 2, 2023
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 2022
Create beautiful JavaScript charts with one line of Ruby

Chartkick Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries! See it in action Chartkick 4.0 was recen

Andrew Kane 6.1k Jan 8, 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
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
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Cornerstone Systems 702 Jan 3, 2023
RocketTrades - Discord Stocks and Charts bot. Written for the RocketTrades Discord bot.

Rocket Trades RocketTrades, Discord Charts and Stocks bot. MORE DETAILS AND UPDATES TO COME SOON Getting started • Installation • Configuration • Inte

Ethan Primmer 3 Feb 4, 2022
Beautiful and interactive javascript charts for Java-based web applications.

Wicked Charts Beautiful and interactive JavaScript charts for Java-based web applications. Check out the Changelog Check out the Feature Overview with

adesso SE 85 Aug 23, 2022
Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library

laravel-chartjs - Chart.js v2 wrapper for Laravel 5.x Simple package to facilitate and automate the use of charts in Laravel 5.x using the Chart.js v2

Felix Costa 473 Dec 15, 2022
J2CL and GWT Charts library based on CHART.JS

Charba - J2CL and GWT Charts library based on CHART.JS What's Charba GWT Web toolkit doesn't have charting library available out of the box. There are

Pepstock.org 56 Dec 17, 2022
Chart.js Box Plots and Violin Plot Charts

Chart.js Box and Violin Plot Chart.js module for charting box and violin plots. This is a maintained fork of @datavisyn/chartjs-chart-box-and-violin-p

Samuel Gratzl 61 Dec 14, 2022
Using ASP.NET Core, SignalR, and ChartJs to create real-time updating charts

Real-time Charts with ASP.NET Core, SignalR, and Chart.js This project shows how to update a real-time chart in your web browser using technologies li

Khalid Abuhakmeh 11 Nov 25, 2022