• 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

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.

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.

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?

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.

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

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

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.

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.

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.

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

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.

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

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?

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").

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.