I'm trying to implement a simple bar chart with labels. I'm making use of the github barchart example of graphael.
I'm getting the following error when I'm try to add the label function to my code below. There also seems to be an open issue on this on Github.
TypeError: paper.labelise is not a function
The line number being pointed out by the error is line 344 in g.bar.js .
Anybody got a workaround for this error ? I'm using Raphaël 2.0.2 and g.Raphael 0.51 .
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);
The sample code which throws this error is:-
<!--<!doctype html>-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Static Bar Charts</title>
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/demo-print.css" type="text/css" media="print" charset="utf-8">
<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.bar.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
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);
var labels = ["Company X", "Company Y", "Company Z"]
var barChart = r.barchart(10, 10, 300, 220, [[9,5,2]], 0, {stacked: true, type: "soft"}) .label([labels]);
//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']]);
//barChart.label(['a','b','c']);
// 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"});
};
</script>
</head>
<body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
<div id="holder"></div>
<p>
Demo of <a href="http://g.raphaeljs.com/">G Raphael</a> JavaScript library.
</p>
</body>
</html>
I know it's late but this is the third result in google when searching for the same problem. How i got around it was to use this file for the g.bar.js
And then i just: