benpickles/peity

Progressive <svg> pie, donut, bar and line charts

Peity

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 tests with:

npm 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.

peity's Issues

How possible would it be to implement a clipping mask to the donut chart?

In the image below you can see the middle shape doesn't create a full circle I'd want to add a clipping mask in the svg? would this be possible?
Note: I Know they're alternatives but SVG is my preferred option rather than canvas

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.

Requests: Line Graph Baseline & Pie Chart Hole

• Mark a baseline through the line graph
  For example, I have a set of numbers that show a users weight, and I have another number that is their target weight, that target weight would become the baseline.
• Increase aesthetics of the pie chart with a donut hole

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?

Animate

Is it possible to animate these charts similar to what chart.js does?

Tooltips for charts

It would be nice if we could have tooltips showing values for the various charts.

Creating a pie chart with no data creates invalid SVG

We are using simple pie charts to display a series of data points. If we pass invalid data to the library, Chrome complains about invalid SVG.

Example:
<span class="pie hidden" data-diameter="96">0,0,0,0</span>

Chrome complains with:
Error: Invalid value for <path> attribute d="M 48 48 L 48 0 A 48 48 0 0 1 NaN NaN Z"

Obviously it's impossible to create a pie chart with all zeroes, but I would have thought that the library should capture this error and avoid putting invalid SVG into the DOM.

"delimeter" should be spelled "delimiter"

I'm really sorry for even filing this bug. This library is an awesome idea, btw.

Multiple Updating Line Charts On Same Page

Hi there Ben

I have installed your awesome Peity Charts.

I have encountered an issue where i have added two updating line charts to the same web page. Since adding the second updating line chart to the same page, i have lost the functionality on the first one. It renders graphically but has stopped animating.

Following guidance on your documentation, i have added the following code to my web page:

• Updating Line Chart One:

Updating Chart One HTML:

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

Updating Chart One JavaScript:

var updatingChart = $(".updating-chart").peity("line", { width: 64 })

setInterval(function() {
  var random = Math.round(Math.random() * 10)
  var values = updatingChart.text().split(",")
  values.shift()
  values.push(random)

  updatingChart
    .text(values.join(","))
    .change()
}, 1000)

• Updating Line Chart Two:

Updating Chart Two HTML:

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

Updating Chart Two JavaScript:

var updatingChart = $(".updating-chart-two").peity("line", { width: 64 })

setInterval(function() {
  var random = Math.round(Math.random() * 10)
  var values = updatingChart.text().split(",")
  values.shift()
  values.push(random)

  updatingChart
    .text(values.join(","))
    .change()
}, 1000)

The reason for me running two updating line charts is because i would like to style the two updating line charts differently.

I am not that experienced with JavaScript, so i am hoping you would be kind enough to help resolve my issue.

Thanks ever so much, and thanks for such a great data chart solution. Its really appreciated.

Regards

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.

make test error

Cannot run test suit, phantomjs cannot find file

❯ make test
rm -f test/comparisons/*
rm -f test/images/*
./node_modules/.bin/mocha -R spec -t 30000  ./test/index.js
child_process: customFds option is deprecated, use stdio instead.


  Peity
    1) bar1
    ....

  0 passing (320ms)
  51 failing

  1) Peity bar1:
     Uncaught Error: Command failed: /Users/bwin/Documents/Dev/github/peity/test/bin/screenshot http://localhost:50354/bar1 /Users/bwin/Documents/Dev/github/peity/test/images/bar1.png 32 16
env: phantomjs: No such file or directory

      at ChildProcess.exithandler (child_process.js:751:12)
      at ChildProcess.emit (events.js:110:17)
      at maybeClose (child_process.js:1015:16)
      at Socket.<anonymous> (child_process.js:1183:11)
      at Socket.emit (events.js:107:17)
      at Pipe.close (net.js:485:12)

Can we add legends ?

With a donut widget, can we add legends automatically ?

Thanks a lot !

404 in the readme

The see license for details links to a nonexistent MIT License:

https://github.com/benpickles/peity/blob/master/MIT-LICENSE

Not a very urgent bug, but a 404 is a 404 :)

is there a way to easily modify the line graph output to have it be vertically centered for identical values?

Use case: <span class="peity">5,5,5,5</span>
when peity turns this into a line chart, the result is a line across the vertical top of the resulting box.


highlighted box is the svg, line goes across top

How hard would it be to modify the source js to have the line go across the vertical middle of the resulting box instead of along the top. I realize this is dependent on the min/max automatically taken from the source values, but when there's the same values, the resulting line is at vertical top instead of vertical middle.

I have a backup plan of going over the data myself vs js before applying peity and manually setting min/max values at -/+1 of the source data, which would achieve the same effect, but if there's a simpler way of modifying the source directly, I'd rather do that as it'd be all encomposing.

"Events" section of demo page not rendering correctly in FF3.6.3

In the Events section of the page http://benpickles.github.com/peity/ presumably there should be 3 pie charts next to their corresponding bullet points and elements... but I'm seeing only a barely visible (very pale orange/pink) pie chart that's a full circle with no segments, followed by the element, and the following two elements (in successive bullet points) have no pie chart at all.

But everything else on the page works fine and looks great!

This is in FF 3.6.3, I'm at work and don't have access to anything else to test in right now.

Allow add multiple values for pie charts

There isn't any way to add more than 2 values on pie charts

$svg.width() and $svg.height() return zero

Sometimes the $svg.width() and $svg.width() calls return 0, even though we explicitly set width and height of the element before creating it. I cannot figure out whether this is a bug in jquery or mobile safari (iOS 7.1). In any case, I cannot reproduce it outside of my current project. The fix is simple and probably safe though, so I thought I'd upstream it:

diff --git a/RowingInMotion.Analytics/app/lib/peity/jquery.peity.js b/RowingInMotion.Analytics/app/lib/peity/jquery.peity.js
--- a/RowingInMotion.Analytics/app/lib/peity/jquery.peity.js
+++ b/RowingInMotion.Analytics/app/lib/peity/jquery.peity.js
@@ -135,16 +135,13 @@
               values = [0, 1]
           }

-          var diameter = opts.radius * 2
+          var diameter = opts.radius * 2,
+              width = opts.width || diameter,
+              height = opts.height || diameter

-          var $svg = this.prepare(
-            opts.width || diameter,
-            opts.height || diameter
-          )
+          var $svg = this.prepare(width, height)

-          var width = $svg.width()
-            , height = $svg.height()
-            , cx = width / 2
+          var cx = width / 2
             , cy = height / 2

           var radius = Math.min(cx, cy)

LICENSE URL on the gh-pages branch points to renamed file in master

The URL at the bottom of the page in your gh-pages branch points to the old LICENSE file before you renamed it to MIT-LICENSE on master. A four character change isn't really worth forking and raising a pull request :)

Considering you've just been featured on Hacker News, it might be worth fixing. http://news.ycombinator.com/item?id=4143627

React.js ?

Any react port?

Nested Pies

Is it possible to nest pie or doughnut charts (i.e. have one inside another one)? Could it become possible?

label on each value?

is there a way to see what the value is for each bar in a bar chart?

thanks,
tim

Component js? bower?

would it be nice if there is an peity registered in bower or component pakage?

Overlapping line charts

I tried to position absolute multiples line charts with rgba colors but it seems that they have a white background and can't be transparent. Is there a way to plot multiple lines?

Enhancement request for Line-Peity

I played a bit around with the line-charts to be able to show incoming- and outgoing traffic in one chart. This could easily be done by visualizing the 2nd data list in a 2nd line-chart and multiplying it by -1.

Unfortunately, the scalings of the line-charts are independent from each other - as you can see in the little picture. Does anyone see a way to get around this issue?

Spacing between bars

Will be good to have option for spacing between bars in bar charts.

Cannot update pie when parent is hidden

This may not be a real issue, but since it took me some time to troubleshoot I thought I'd post a note about it here in case someone else runs into the same problem. I was attempting to update the value of a pie chart by changing the span value and calling .change() but nothing would appear -- the SVG element was still there in the source but the pie chart was not actually created. But I now realize this was because I was updating the pie chart before re-showing the parent div. When I switched the order of those it fixed the problem.

Values of 0 not created in pie graph. Feature?

I have perhaps a slightly unusual use case. I have dynamically created data where some options will be 0. My assumption has been that using nth-child in CSS to cycle through elements to change the fill would result in the same colours for both bar and pie graphs to allow the use of a visual key.

However, I have noticed that any 0 values are not generated in the pie version, so the colours do not match.

As a workaround I am pushing in a figure of 0.0001 instead, but wanted to flag this up in case you felt this was not desired behaviour.

Request: Keep nuget repository uptodate

There is an existing NUGET package that is two major versions out of date. Can I request that the NUGET package is maintained in line with the github release.

Thanks. Andy.

way to only show part of line graph?

lets say with the following two elements, <span>1, 2, 3, 4, 5</span> and <span>null, null, 3, 4, 5</span> is there a way to run peity on both, and have the second graph only plot the 3, 4, 5, but leave space for the two null values? The net effect would be if you layered the second over the first, they lines would be identical, however the second graph would just not have any plot points.

Use Case: showing a trend of last 4 weeks of data for several items, but some items may only have 3 or 2 weeks of data, so instead of having the graph look skewed since it's stretching a smaller data set to teh same width, it would keep the same width, but just not plot the missing points.

Doable?

Make Donut 100% width and height of container element

Maybe this is already possible, and I'm just struggling to figure it out. But it would be great if the donut charts could be set to be 100% width and height of the container element.

Bar chart width

Hi,

I have included the peity library, and inside a div I added this line
5,3,9,6,5,9,7,3,5,2.
And I added this line to my script file.
$(".bar").peity("bar")

However, the bar chart is displayed as a line as shown in the following image.

Can you guide me to solve this problem, please? I tried to increase the width and the height of class bar , but it did not work.

Thank you in advance.

JS Console Error when data are zeros

Given all zero data, e.g. <span class="bar">0,0,0,0,0</span>, the browser has an error in the JS Console:

Error: Invalid value for attribute y="NaN" jquery.peity.js:12

And the bar chart base-line will show at the top of the span rather than the bottom.

100% and 0% pie charts no longer working in Chrome

I have the latest Chrome for Linux (22.0.1229.79), running under Ubuntu. The pie charts work fine in Safari and Firefox, but under Chrome 5/5 on 0/5 show no graphic, even on the demo page at http://benpickles.github.com/peity/

Add 'title' to svg element

Would it be possible to add a 'title' to the svg element which shows the text when moving the mouse over that element?

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.

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

Peity in IE7+ with explorercanvas (doesn't work)

Hi, thanks for great plugin!

It is pretty fine solution, but i couldn't optimize it for IE7 + IE8 - I am using this :
http://code.google.com/p/explorercanvas/wiki/Instructions

I follow the second reccomendation on their github wiki, bud doesnt work if i apply it.
I am giving the fix code into private function of plugin - createCanvas()

Rest of code and initialization is same as on your pages

I would be very grateful for any advice..

Thank you very much

Minimum value not plotting in bar chart

That's basically it.

Given the string "1,2,3,-4,-3,-2,-1", the -4 won't plot correctly.

You can even see this in the demo page if you look carefully.

Update the color of the chart

Hi,

I'm using your api to display some charts. Their values could be reloaded in Ajax, there is only a problem with the change function, I can't update the colors of the chart. Is there a way to do that? I can easily assign color dynamically at the chart generation but the update function doesn't seems to use the same information.

Thanks for your help

Different color combination for each chart

Hi,
I'd like to know if it's possible to render the pie charts in different color combinations based on the values by using if conditions in the fill function. Like when the value is <span class="pie">150/200</span>, the pie chart will be in orange and blue. If it's is 250/300, the colors will be green and blue. Here's a fiddle example to show what I'm trying to do.

http://jsfiddle.net/g49r3c97/5/

Fix all-zero line chart properly

When creating a line chart with all zeros, the following error is seen:

Error: Invalid value for <polygon> attribute points="0 NaN 0 NaN 1 NaN 2 NaN 3 NaN 4 NaN 5 NaN 6 NaN 7 NaN 8 NaN 9 NaN 10 NaN 11 NaN 12 NaN 13 NaN 14 NaN 15 NaN 16 NaN 17 NaN 18 NaN 19 NaN 20 NaN 21 NaN 22 NaN 23 NaN 24 NaN 25 NaN 26 NaN 27 NaN 28 NaN 29 NaN 30 NaN 31 NaN 32 NaN 33 NaN 34 NaN 35 NaN 36 NaN 37 NaN 38 NaN 39 NaN 40 NaN 41 NaN 42 NaN 43 NaN 44 NaN 45 NaN 46 NaN 47 NaN 48 NaN 49 NaN 50 NaN 51 NaN 52 NaN 53 NaN 54 NaN 55 NaN 56 NaN 57 NaN 58 NaN 59 NaN 60 NaN 60 NaN" 

The yQuotient in line 224 is being calculated as Infinity because you're dividing by zero. I solved it by:

yQuotient = Math.min(0, height / (max - min))

but I don't know if this accounts for negative minimum values. In my case I'll never have negative values so it doesn't affect me, but I'm looking for your guidance on a proper solution.

Display image even after page load

Hi I use your wonderful work with maps based on leaflet the render is like this

My problem is I want to let the user to display or not those icons so he must click on a checkbox to see data on the map.
The problem is that the jquery code can't work in this case because the page is already loaded. Do you have an idea for this problem ?

Thanks

Bring back reading settings from data attributes

37849cd#commitcomment-8940091

Peity Update Speed

I started using Peity, and when i hover over a div, I am making the Peity sparklines go from b&w to full color. I am doing this by

$(".sparkline").peity("line",{
colour: function() {return this.getAttribute("fillColor")},
strokeColour: function() {return this.getAttribute("strokeColor")},
strokeWidth: function() {return this.getAttribute("strokeWidth")},
max: function() {return this.getAttribute("sparklineMax")},
width: function() {return this.getAttribute("sparklineWidth")},
});

However with only 10 sparklines, this takes a good solid second to render. Any way to speed this up?

Remove jQuery Dependency

Is this in the roadmap at all?

Huge fan of Peity but I'm wanting to drop jQuery. Would love to see it ported over to vanilla JS. I can give it a go if you have no plans for it?

Request: Bullet Chart / Progress Chart

Would it be possible to make a new chart type, based on this image:

I think it's called a bullet chart. Though really, what I'm doing is a progress chart.

I'd normally do a DIV with a % width but I feel an SVG is better suited for this task, especially on smaller screens. I think this chart type would suit Peity.

Include History.md on the website.

All changes are currently logged in https://github.com/benpickles/peity/blob/master/History.md, it would be nice to make them more visible and present on the website.

insert a data-value attribute on elements

everywhere that has svgElement('shape',{attributes object})
in the attributes object, add a line
"data-value":value

this enables code like
$("svg rect").hover(function(){console.log($(this).attr("data-value"));},function(){});
and obviously more clever uses of the value that gave rise to the representation

Each .piety call creates new 'span' tags to contain values

Firstly, great plugin. It's super easy to use and you should be commended on your work :)

I have written a 'timeline' style slider which onchange fires a 'drawPie' function containing the following peity code:

function drawPie() {
$('#pieData .pie').peity("pie", {
radius: function () {
return this.getAttribute("data-radius")
},
colours: function () {
return [squads.away.color, squads.home.color]
}
});
}

The issue I am having is that each call to drawPie creates a new span tag within #pieData. Peity continues to work (hazzah!), but creates multiples of the span tags without limit (boo!). I'm not sure if this is by design or my implementation.

For clarity, this is the 'change' function of the slider which fires drawPie:

....
change: function (e, ui) {
//alert('changed '+ $('#matchtimeline option').eq(ui.values[0]).text() );
//fire changes to charts...
//change the span first
var homepossession = Math.floor(Math.random()*100);
var awaypossession = 100 - homepossession;
$('#pieData .pie').text(homepossession + "/" + awaypossession);
drawPie();
}
....

Help is appreciated.

Is it possible to do Multiple Line Chart?

Is it possible to do Multiple Line Chart?

thanks