TypeError: paper.labelise is not a function

[wittxiao]

I got TypeError after adding .label to barchart like the following:
r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: "sharp"}).label([['C', 'D', 'E', 'G', 'L', 'M', 'P', 'S1']]);

[wittxiao]

Raphaël 2.0.2
g.Raphael 0.51

 window.onload = function () {
                var r = Raphael("holder"),
                    data1 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
                    data2 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
                    data3 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
                    txtattr = { font: "12px 'Fontin Sans', Fontin-Sans, sans-serif" };

                r.text(160, 10, "Single Series Chart").attr(txtattr);
                r.text(480, 10, "Multiline Series Chart").attr(txtattr);
                r.text(160, 250, "Multiple Series Stacked Chart").attr(txtattr);
                r.text(480, 250, 'Multiline Series Stacked Vertical Chart. Type "round"').attr(txtattr);

                r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: "sharp"}).label([['C', 'D', 'E', 'G', 'L', 'M', 'P', 'S1']]);
                r.barchart(330, 10, 300, 220, data1);
                r.barchart(10, 250, 300, 220, data2, {stacked: true});
                r.barchart(330, 250, 300, 220, data3, {stacked: true, type: "round"});
            };

[totszwai]

Experiencing same issue here, somehow the object is not able to see the labelise prototype that is defined in g.raphael.js...

[boddhisattva]

Anybody got a workaround for this error ? I'm using Raphaël 2.0.2 and g.Raphael 0.51 . The line number being pointed out by the error is line 344 in g.bar.js .

The code from that line number as part of g.bar.js is:-

var label = paper.labelise(multi ? labels[j] && labels[j][i] : labels[i], multi ? values[j][i] : values[i], total);

[totszwai]

I end up writing all my own function to deal with axis and labels.

[boddhisattva]

@totszwai Thanks for your inputs. Can you share a sample snippet that you've implemented which has your own function(s) dealing with axis and labels , I'm relatively new to JS and thus not exactly sure how to go about writing my own JS code for axis and labels. Kindly specify the version of raphael.js , g.raphael.js and g.bar.js that your using as well. Thank you.

[totszwai]

I can't because is work related lol
But is real easy. right after you created your chart just create a function
in your chart. Then just call immediately.

Chart.myaxisfunction = function () {

Your code goes here, you can check for this.bars in order to find out the
bars location and height too.

Just draw the axis the way you want it.

};
Chart.myaxisfunction();
On Aug 30, 2013 11:10 PM, "Mohnish G J" [email protected] wrote:

@totszwai https://github.com/totszwai Thanks for your inputs. Can you
share a sample snippet that you've implemented which has your own
function(s) dealing with axis and labels , I'm relatively new to JS and
thus not exactly sure how to go about writing my own JS code for axis and
labels. Kindly specify the version of raphael.js , g.raphael.js and
g.bar.js that your using as well. Thank you.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/169#issuecomment-23599610
.

[boddhisattva]

@totszwai I understand that, I have written a bar chart gist that's pretty much lined up except for the labelling(that's what's throwing the above error :)). I tried looking up this.bars as a function in the g.raphael documentation because I thought you were probably pointing to some built in function I could use for the location and height. I guess I didn't clearly get you. To clearly understand what your saying would it be possible for you to write up a custom function for this gist mentioned above so that I could clearly understand how exactly can I go about labelling it ? Thanks.

[totszwai]

After your line 24, do what I wrote in my last reply... I'm not home right
now.

When you do barChart.myfunc = function() {…}, you will have access to
this.bars. you can pass whatever you want to your chart (aka this)...

I'm not calling any built in function I basically wrote my own function for
label then call it.
On Sep 1, 2013 10:01 AM, "Mohnish G J" [email protected] wrote:

@totszwai https://github.com/totszwai I understand that, I have written
a bar chart gist https://gist.github.com/boddhisattva/6389016 that's
pretty much lined up except for the labelling(that's what's throwing the
above error :)). I tried looking up this.bars as a function in the g.raphael
documentation http://g.raphaeljs.com/reference.html because I thought
you were probably pointing to some built in function I could use for the
location and height. I guess I didn't clearly get you. To clearly
understand what your saying would it be possible for you to write up a
custom function for this gist mentioned above so that I could clearly
understand how exactly can I go about labelling it ? Thanks.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/169#issuecomment-23625376
.

[boddhisattva]

@totszwai I've updated my gist based on your inputs, but how exactly do I make use of this.bars to go about adding labels? I'm able to see a lot of properties related to chart in the firebug console using console.log(this.bars), but I'm still unclear on how to to add the labels to the chart based on these properties.

Also, you mentioned "you can check for this.bars in order to find out the bars location and height too". How do I add labels if I want to do this for dynamic data ?

[totszwai]

I have something like this...

    var customLabelFn = function (labels) {
        var x, y;
        labels = labels || [];
        if (!props.stacked && !props.simpleArray) { props.bars =

props.bars[Math.floor(props.bars.length / 2)]; }
var bars = (props.stacked ? props.bars[0] : props.bars);
var i = bars.length;
while (i--) {
if (!isUndef(labels[i])) {
x = bars[i].x;
y = bars[i].y + bars[i].h - props.labelOffset;
props.r.text(x, y, labels[i]);
}
}
return this;
};

    // don't use the default Raphael label() function, is broken
    props.c.customLabel = customLabelFn;
    props.c.customLabel(props.label);

Where props.c is the chart generated by raphael, props are the properties
that i passed in to my function, i just end up saving everything back into
the props for easy access.

As you can see, I just calculate the x, y on where I want to print the
label...

In your case, where it says, props.bars, you can do it with this.bars... my
case is different because i ready saved the bars inside my props.

When you debug "this.bars", you can look at individual bars such as
this.bars[0], and if you do this.bars[0].x (or y, h, w) you can check their
locations, height, width etc...

On Mon, Sep 2, 2013 at 2:06 AM, Mohnish G J [email protected]:

@totszwai https://github.com/totszwai I've updated my gisthttps://gist.github.com/boddhisattva/6389016based on your inputs, but how exactly do I make use of this.bars to go
about adding labels. I'm able to see a lot of properties related to chart
in the firebug console using console.log(this.bars), but I'm still
unclear on how to to add the labels to the chart.

Also, you mentioned "you can check for this.bars in order to find out the
bars location and height too". How do I add labels if I want to do this for
dynamic data ?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/169#issuecomment-23642298
.

[boddhisattva]

Thank you @totszwai, I now have a better idea of how to go about this.

[Tognolo]

In g.bar.js at function chart.label, change:

var label = paper.labelise(labels[i], tot, total);

with:

var label = chartinst.labelise(labels[i], tot, total);

and do the same few lines down.