zurb / pizza Goto Github PK

Hi there, thank you for this great component!

You can reproduce this issue for example with the following numbers: Make a Pie Chart with 55, 21, 9, 15 which will result in 56%, 21%, 9%, 15% on the rendered chart.

Line 76 in pie.js is responsible, instead of

var visible_text = Math.ceil(percent) + '%';

it should be

var visible_text = Math.round(percent) + '%';

I would put in a pull request but unfortunately I don't have Git on this machine. I just thought I let you know in case somebody else runs into this issue.

Best
Chris

Hi,

How do I make it work if values are 100 & 0% - it does not display the full circle for 100.
It works brilliantly of it's 99 & 1%

Please suggest if this is made to work for 100%

Thanks

Hovering over a bar chart item should not increase it's size vertically... since that's how the values are calculated on the Y-axis. Something else needs to be used here for a hover state.

Is there any way to change the divide to a horizontal one instead of the default vertical when using only 50% / 50%.

Thanks

When viewing the site with Chromium 34.0.1813.0 (247741) on OS X, the tab crashes as soon as the mouse hovers over the charts.

My apologies if this is a generic question as opposed to a Pizza specific question. I am building a site with Foundation and am using Pizza Pie for pie charts. I notice that the charts are not visible until I resize the browser window. As I said, this may not be specific to Pizza but I have never had this issue before. Any suggestions. You can view and example at: http://www.nvcc.edu/_ccip_test/students.html. Click on the first statistics link and a modal window will open. At the bottom should be a pie chart. It is not visible however until the page is resized. It only needs to be resized by 1px to become visible.

Any suggestions are welcomed. Thanks in advance.

Hey, I just thought it would be nice to have customt text on the slices. For example I don't want to have the Percent shown but whats behind this value.
So I though of following:

You add data-text as a new option to the list items.

<li data-value="80" data-text="Vanilla">I love Vanilla</li>

and in the JS following has to be done:

// Making the custom text availabe inside the script
data.push({
            value: segment.data('value'),
            text: segment.data('text'), 
            color: segment.css('color'),
            segment: segment
          });

and when its actually time to put the correct text in place

var visibleText = data[i].text || Math.ceil(percent) + '%';
var text = path.paper.text(cx + (r + settings.percent_offset) * Math.sin(start_angle + (angles[i] / 2)),
               cy - (r + settings.percent_offset) * Math.cos(start_angle + (angles[i] / 2)), visibleText);

If you like I could prepare a pull-request on this.

Best Wishes,
Roman

Setting a max-height in CSS doesn't work. The pie still sets the SVG height to max (for me its creating pies of 800 px height...).

It also isn't listed as a parameter that can be passed to the init function, and passing it to the init function doesn't work.

How do we change the max size of the pie?

Data value outside pie-chart defaults black. How do I change it?

I set:
text { color: white !important}

No luck

Tried putting my pizza code inside a foundation accordion, but the SVG coordinates are all 0s.

i downloaded the master.zip from here and opened index.html and no charts appeared
why ?!

Hi,

I found the last weekend your wonderful library and have created my own AngularJS directice with this one but I found some mistakes when the values are displayed on the chart.
You can see on the pic :

The data-values dont correspond to the values displayes on the chart.

And it's the same on your official website :

Cordially, Metrakit.

is it going to be some thing like highcharts (with all that features)

i like snapsvg and foundation and to having advanced charting library based on these!

Hi,

let's say my pizza is hidden & when i click a button i want it to be shown.
Is it possible to reinit/refresh the pizza on click event?
like you do when self.init on resize?
Cause when i show it it has no size

thx

It would be a nice feature to have callbacks like a hover callback.

When I create a pie/donut chart it appears to render correctly, but when I use the markup recommended for a line or bar chart, the chart renders squished into a 1px height, and only after repeatedly calling Pizza.init() do I get the height to expand.

I'm including Jquery, dependecies.js, snap.svg.js, and pizza.min.js along with foundation's CSS and pizza.css, and calling Pizza.init() on a document.ready

I thought I'd try integrating pizza with a Magento extension I'm currently developing, however I can't even include pizza.js without this error occurring:

Line: 247 $.extend(Pizza, {

Message from Chrome:

Uncaught TypeError: Object function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(eleme...<omitted>...d' 

When I try using pizza.js version 0.1.1 from http://geoffgraham.me/wp-content/themes/GeoffGrahamFour/lib/javascripts/pizza.js everything works fine, but I'd prefer to use the latest version.

Hi Zurb,
I used pizza with foundation 5.5.3 and its was working quite fine. later upgraded to foundation 6 and foundation 6 css and js is not working properly with pizza. Please look into that.
Thank you guys.

strokeWidth didn't work, it should be stroke-width.

this.set_attr(path, {
        fill: data[i].color,
        stroke: settings.stroke_color,
        'strokeWidth': settings.stroke_width,
        'data-cx' : cx,
        'data-cy' : cy,
        'data-id' : 's' + i
      });

The charts aren't rendering on the latest version of Chrome.

Version 45.0.2454.85 (64-bit)

https://chromium.googlesource.com/chromium/src/+log/44.0.2403.157..45.0.2454.85?pretty=fuller&n=10000

Hi I'm trying to use this plugin on a project, my problem is I need to show a 100% chart, but every time a put 100 on data-value and 0 on another one, chart is not showing up. Am I doing something wrong? or 100% is not possible?

As you can see in the screenshot, any number into the thousands and above is cut off. There must be a way to widen the tick label area.

Few issues while trying to install this package, the Doc's state to include files which don't exist. There seems to be no svg's at all in the package, the js files have different names and so do the css's. Have tried all combinations but get error's no matter what I try and no chart :/ current error looks like this:

Error: Invalid value for <text> attribute x="NaN" pizza.js:794
$.extend.pie pizza.js:794
Pizza.build pizza.js:61
(anonymous function) pizza.js:30
n.extend.each main.js:2
n.fn.n.each main.js:2
Pizza.init pizza.js:29
(anonymous function) main.js:246

Error: Invalid value for <text> attribute y="NaN" pizza.js:795
Error: Invalid value for <path> attribute d="M360,360 L360,54 A306,306 0 0 1                 NaN,NaN Z" pizza.js:820
Error: Invalid value for <text> attribute x="NaN" pizza.js:794
Error: Invalid value for <text> attribute y="NaN" pizza.js:795

Any help would be greatly appreciated. I would post my my html but even the index.html file shipped in the .zip doesn't work (with jquery cdn added)

I am using the pizza amore pie chart plug in and need to add data values with 1 or more decimals like this: data-value="25.68" however, it doesn't show the chart, but just displays NaN%. If I change it to data-value="25" it works fine. Is this a setting I can change in the script or is this just not supported?

Am using a simple directive for pizza that is working well with static data, but when I load it with some $http fetched data the charts do not load, when I open the chrome web inspector it works fine as if it needs a refresher.

Next thing is that when I update the data being passed to the chart it gets added to the old results instead of replacing it, is there a way to destroy and rebuild the plugin or better yet be able to update the results on the frontend?

//Directive
angular.module('instabugApp')
  .directive('pizza', function ($timeout) {

    return {

      restrict : 'E',
      replace : true,
      scope : {
        pieData : '=data',
        pieId : '@pieId',
        pieOptions : '=options'
      },
      templateUrl : 'views/partials/pizza.html',
      link : function (scope, elem, attrs) {
        scope.$watch(attrs.ngModel, function () {
            console.log(attrs.ngModel);
        });
        console.log(scope);
        $timeout(function () {
            Pizza.init(elem.id, {
              data: scope.pieData
            });
        });
      }
    };

  });

<!-- Template -->

<div class="row">
  <div class="large-2 small-4 columns">
    <ul data-pie-id="{{pieId}}" data-options="{{pieOptions}}">
      <li ng-repeat="data in pieData"
        data-value="{{data.value}}">{{data.label}}</li>
    </ul>
  </div>
  <div class="large-10 small-8 columns">
    <div id="{{pieId}}"></div>
  </div>
</div>

<!-- Usage on page -->
<pizza pie-id="statusChart" data="statusChart" options="pizzaOptions" ng-model="statusChart</pizza>

Hi there,

Is it possible to update the pie chart on click event?

There's a simple typo on this line.

I'm trying to set links for the pizza slices, is there a way that we can assign id's or to link the slices to a particular address?

IE11 has a bug with innerHTML not working properly, using textContent seems to have worked.

If you hover the last point on line graph, script creating a new object like this <svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg"><desc>Created with Snap</desc><defs></defs></svg> and page is expanding.

Is there a way to change the color of text legend when we have mouse over animation ? I try with set fill for svg settings but it simply not show the legend text :/
Can you help me with ?

On iPad Chrome, pie segment expanded on touch (on segment or label), but will not restore on touching other segments. Line graph dot expanded on touch and won't restore. Scrolling causes expanded dots to be dislocated. on iPad Safari, behavior is quite sporadic.

On Android Chrome, pie segment restore upon touching other segments. Same for line graph.

http://zurb.com/playground/pizza-amore-charts-and-graphs