Forums

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1   [ 2 posts ]
New Topic | Post Reply | Print view

Felipe Gasper

  • Username: fgasper
  • Joined: Mon Aug 02, 2010 1:12 pm
  • Posts: 24
  • GitHub: fgasper
  • Gists: fgasper
  • Offline
  • Profile
Tags:

number formatting in pie charts?

Post Posted: Thu Apr 19, 2012 12:11 pm
+0-
Hi all,

I’m making my first foray into YUI 3 Charts and am getting stuck on number formatting.

I’ve got a format_bytes() function that converts bytes into KiB, MiB, etc. ISTM the following ought to work:

Code:
            var chart = new Y.Chart( {
                type: "pie",
                dataProvider: pie_data,
                categoryKey: "protocol",
                seriesKeys: ["bytes"],
                render: "#chart-"+key,
                axes: {
                    bytes: {
                        labelFunction: function(val) { return format_bytes(val) }
                    },
                },
                seriesCollection: [
                    {
                        categoryKey: "protocol",
                        valueKey: "bytes"
                    }
                ]
            } );


… but it’s not, and I’m getting “undefined is not a function”.

Anyone know what’s going on? I don’t want to define entire custom axes and have to specify which series gets which custom axis, etc. I just want to specify a custom value-formatting function. If I take out the “axis” above, then it works, but of course I only get unformatted bytes.

Tripp Bridges

YUI Developer

  • Username: tripp
  • Joined: Wed Jan 07, 2009 1:54 pm
  • Posts: 435
  • GitHub: tripp
  • Gists: tripp
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: number formatting in pie charts?

Post Posted: Sun Apr 22, 2012 9:49 pm
+0-
I am not able to set the labelFunction up front when I try. I think its related to the bug you previously filed:
http://yuilibrary.com/projects/yui3/ticket/2532186

If not, I'll file a separate ticket and post it back here.
In the interim, there are two workaround options.

Set the labelFunction after chart instantiation:
Code:
var axis = chart.getAxisByKey("values");
axis.set("labelFunction", format_bytes);


You could also override the chart's tooltip markerLabelFunction to specify your custom function directly. Below is how is how to do it for 3.5.
Code:
var chart = new Y.Chart( {
      type: "pie",
                dataProvider: pie_data,
                categoryKey: "protocol",
                seriesKeys: ["bytes"],
                render: "#chart-"+key,
           tooltip: {
        markerLabelFunction: function(categoryItem, valueItem, itemIndex, series, seriesIndex)
        {
            var msg = document.createElement("div"),
           total = series.getTotalValues(),
           pct = Math.round((valueItem.value / total) * 10000)/100;
            msg.appendChild(document.createTextNode(categoryItem.displayName +
            ": " + categoryItem.axis.get("labelFunction").apply(this, [categoryItem.value, categoryItem.axis.get("labelFormat")])));
            msg.appendChild(document.createElement("br"));
            msg.appendChild(document.createTextNode(valueItem.displayName +
            ": " + format_bytes.apply(this, [valueItem.value, valueItem.axis.get("labelFormat")])));
            msg.appendChild(document.createElement("br"));
            msg.appendChild(document.createTextNode(pct + "%"));
            return msg;
        }
         }
       });


If you are using a version older than 3.5, post back and I can send you alternate code.

Thanks,
Tripp
Page 1 of 1   [ 2 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group