I am successfully able to change the color of text labels to white. But not able to do so for the axis lines and 'dashes'. I am using a dark background and hence black does not work. Any help?

barchart.label(['Some', 'Label'])

Error: vx * (B || 1) + j is not a object

Fix:
replace every v[x * (B || 1) + j] inside the label method with v[j][x]

using this code:

fix should be on line 23 of g.pie.js
fill: opts.colors && opts.colors[0] || this.g.colors[0] || "#666",
instead of
fill: this.g.colors[0],

You can see this if you try hovering over Wed, 12am.

If you create tags with a "text" value of 0 (as an integer, not a string), then nothing will be displayed if that tag is then displayed (on hover, for instance).

http://img.skitch.com/20090828-jqqk8xijhbimyjxq4bwfprx2n.png

i should be able to select text orientation to use when drawing X (and Y) labels of a matrix chart.

Hi!

I would like to animate the height of the bars of a barchart. It seems like this function does not work for barcharts. Does anyone have a suggestion?
The scale function works but I would prefer it if only the top height and width of the bars change.

Kind regards,

Annick

If a shaded y chart has no change in y (same min/max), drawing the chart fails.

A quick fix is to add the following test to g.line.js after variable initialization:
if (miny == maxy) { miny -= 1; maxy += 1; ky = (height - gutter * 2) / (maxy - miny); }

I wanted to create a linechart for page visits in a month but if the width is more than 600, it doesn't show the correct day on the bottom
at 600px: http://skitch.com/stefanroehle/nnkje/linechart600
at 700px: http://skitch.com/stefanroehle/nnkjm/linechart700

the code (copied from the demo page and modified it):

window.onload = function () {
    var r = Raphael("holder");
    r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";

    var lines = r.g.linechart(20, 50, 700, 250, [[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]], [[0, 22, 25, 35, 36, 39, 33, 38, 42, 51, 35, 33], [0, 12, 18, 16]], {nostroke: false, axis: "0 0 1 1", symbol: "o"}).hoverColumn(function () {
        this.tags = r.set();
        for (var i = 0, ii = this.y.length; i < ii; i++) {
                this.tags.push(r.g.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{fill: "#fff"}, {fill: this.symbols[i].attr("fill")}]));
        }
    }, function () {
        this.tags && this.tags.remove();
    });
};

awesome charts but the black flags on the bar charts aren't fading away when the mouse rolls out in IE7

When I create a bar chart containing only a single data series (e.g. [0, 1, 2, 3, 4]) then each column has its own color.

This is because of g.bar.js:67, which reads

bar = this.g.finger(Math.round(X + barwidth / 2), top + h, barwidth, h, true, type).attr({stroke: colors[multi ? j : i], fill: colors[multi ? j : i]});

but should read

bar = this.g.finger(Math.round(X + barwidth / 2), top + h, barwidth, h, true, type).attr({stroke: colors[j], fill: colors[j]});

On a bar chart with negative values, the graph only responds to the mouse cursor above the y origin. That is, when I mouseover the empty space above a negative column, I can trigger a hover effect. But when I mouseover the negative column itself, there is no effect.

Has anyone any ideas how to produce a logarithmic x scale on a line chart using g.line/g.raphael?

Can anyone tell me how to get g.raphael to produce a legend for a linechart?

This is a weird one! Raphael.js version 1.3.2
On IE8 version 8.0.60001.18904 in Windows Vista
On my desktop - default install - all settings reset to factory default, the library works fine.
On my laptop - default install - same IE build - I get a javascript error "Object expected"
Looking at http://raphaeljs.com/playground.html
It manifests itself as:
Object expected
playground.html Line: 39
Code: 0 Char: 13
URI: http://raphaeljs.com/playground.html

Pretty innocuous error I know! I did manage to get a similar error on my desktop using IE tester - a really old testing tool - in IE7 mode it comes up with the same error.

I have screen shots of the errors if you want.

My workaround has been to use Raphael 1.2.8 which seems to work fine

Given the following code:

var r2 = Raphael("holder");
r2.g.linechart(10, 10, 480, 270,
  [8,9,10,11,12,13,14,15,16,17],
  [[0,3,2,-1,4,-3,-5,10,-10]],
  {axis: "0 0 1 1", symbol: "o"}
).hoverColumn(function() {console.log(this.values[0])}, function() {});

The first five data points all report "3" for their value.

In another graph, one of the data points reported "$9.99" when it was set to 0.

When the axis function attempts to find the power to use when displaying axis labels, it gets off by one. For instance, a dataset ranging from 0 to 16, in 7 steps, will show zero digits of precision on the y-axis. This means that certain numbers on the axis appear to get 'skipped', since they are being silently rounded.

[DOMElement structuralComplexityContribution]: unrecognized selector sent to instance 0x3b585d0
2010-04-12 22:01:36.773 Smart Utility[1731:207] * Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[DOMElement structuralComplexityContribution]: unrecognized selector sent to instance 0x3b585d0'

The "opts.gutter || 10" line causes a gutter of 0 to be interpreted as if gutter were undefined. Consider "opts.gutter == undefined || 10" instead.

var r = Raphael("holder");
r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";

            r.g.text(320, 100, "Interactive Pie Chart").attr({"font-size": 20});

            var pie = r.g.piechart(320, 240, 100, [2], {legend: [ 'Type' ], legendpos: "west", href: [ 'http://www.cnn.com', ]});

works with two data points though

         var r = Raphael("holder");
            r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";

            r.g.text(320, 100, "Interactive Pie Chart").attr({"font-size": 20});

            var pie = r.g.piechart(320, 240, 100, [2, 3], {legend: [ 'Type', 'apple' ], legendpos: "west", href: [ 'http://www.cnn.com',  'http://www.yahoo.com' ]});

This library is really nice, i found it very usefull. Thanks.

I would like to have support for logarihmic scales in linechart.

I'm currnlty just calculating logarithms for x and/or x by hand outside of the raphael, but then labels under x and y axis are wrong.

I would like to have something like:

r.g.linechart(
  30, 15, 760, 320,
  x, [y1, y2, y3], {
    nostroke: false, axis: "0 1 1 1", width: 2,
    logscale_x: 4, logscale_y: 10,
});

Which will use Math.log(x[i])/Math.log(4.0) for each x point before ploting, and Math.log(y[ii][i])/Math.log(10) for y values. (1.0/Math.log(4.0) should be computed before any loop as it is constant. Also transformation should be performed only once and remembered, becuase datapoints are used in multiple places).

This needs some adjustments in the find of range of points in g.line.js, and of course when plotting.

I doesn't care that stright line, after logarithmic transformation is usually not a stright line. We are actually interested in points, and line should still be line as it only is for connecting visual point, not data points actually (and any way all other software does so).

I doesn't care about handling of negative values (they will produce NaN from log), anyone should before hand know what he/she sends to the raphael.

This should be few minutes of coding probably, but unfortunetly, i have no idea how to add this feature nicely and still make axis behave correctly.

Axis drawing and mouse over handlers will need slight adjustments.

Thanks.

I propose an option field "dontSort" which can be set to true. The snippet I used for pie.js looks like this:

if(!(opts['dontSort'] === true)) {
  values.sort(function (a, b) {
    return b.value - a.value;
  });
}

I can create a patch if needed.

Regards

Sebastian

Line 23: [...], stroke: opt.stroke || "#fff", [...]
should be opts.stroke

Cheers
Stefan

Currently, negative columns:

• have no hover effect
• are clipped at the bottom of the canvas
  • causing them to look out of scale
  • causing popups to disappear
  • causing labels to disappear unless isBottom

I think all of these issues would be solved if negative values were calculated into the total height of the graph and the y origin was re-centered.

This data seems to cause the graph to produce a bizarre line that skids off to the left of the page
data1 = [[ 0, 1, 1, 2, 0, 114, 752, 402, 512, 229, 916, 96],[ 0, 0, 0, 1, 0, 135, 613, 441, 418, 45, 15, 10]];
r.g.barchart(10, 10, 580,500, data1, {stacked: true, type: "soft"});

using type: "sharp" does not produce this error

any ideas appreciated
thanks

This isn't a critical issue, since I'm not really an Opera fanatic. But since the main Raphaël site says that Opera 9.5+ is supported, I thought I'd mention this. My g.r.pie works in FF, Chrome, IE7/8 without any issues (basically), but all of the sectors of my pie appear as black (instead of their respective gradient fills) in Opera 10 (latest) on Mac OS 10.5.x. I'm programmatically creating 90-HSB-HSB gradients because I have a variable number of sectors. I'm afraid I can't present a test case because the site I'm working on is in private development.

Hovering over a column in linechart can create tags in unintended places. This is because createColumns() in g.line.js does not work properly - Xs.sort() does not sort in numerical order! This can be fixed easily by writing code that sorts numerically.

This bug does not manifest itself often; in fact, I have only been able to reproduce it with one particular set of results so far. However, I tested in Firefox, Chrome and IE7 and they all exhibited the same behaviour. Given this code:

<table>
  <tr><th>Response 1</th><td>1</td></tr>
  <tr><th>Response 2</th><td>1</td></tr>
  <tr><th>Response 3</th><td>2</td></tr>
</table>
<script type="text/javascript">
(function (raphael) {
    $(function () {
        var values = [],
            labels = [];
        $("tr").each(function () {
            val = parseInt($("td", this).text(), 10)
            values.push(val);
            labels.push("%%.% ("+ val +") " + $("th", this).text());
        });
        $("table").hide();
        raphael("holder", 840, 500).g.piechart(220, 220, 200, values, {legend:labels,legendpos:'east'}).hover(
                function () {
                    this.sector.stop();
                    this.sector.scale(1.1, 1.1, this.cx, this.cy);
                        if (this.label) {
                            this.label[0].stop();
                            this.label[0].scale(1.5);
                            this.label[1].attr({"font-weight": 800});
                        }
                    },
                    function () {
                        this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
                        if (this.label) {
                            this.label[0].animate({scale: 1}, 500, "bounce");
                            this.label[1].attr({"font-weight": 400});
                        }
                    });
                });
})(Raphael.ninja());
</script>

When moving my mouse focus off of either of the bottom sectors (the ones with a value of 1), there is a chance they may simply disappear. In IE, this freezes all future mouseout animation on the sectors to cease, although mouseover animation still fires. The label animation also still fires on both events. In Firefox and Chrome, all animation events still fire, even the label animation for the sector which disappeared.

This is happening with raphael 1.0, 1.1 and 1.2.1 using g.raphael 0.4 and g.raphael.pie 0.4

I wanted to create a line chart of values over the last 30 days. This data spans multiple months, so I'd like the x axis labels to read something like "27 28 29 30 1 2 3 4 5 6 ...". I don't see how this is possible?

If some of the labels passed to Raphael.fn.g.axis are empty strings (or otherwise don't evaluate to "true"), then they don't get displayed, and g.Raphael calculates and displays something else...which looks odd when interspersed with other, expected labels.

I'd like to use the line graphing for a sports tracker type web app, and when a workout has a break in it (e.g. paused at one spot, and resumed at another), i would like to represent the break as a discontinuity in the line graph, e.g. the two endpoints on either side of the 'break' as open circles joined by a straight dashed line, whereas the normal continuous line would be solid.

http://github.com/kilian/grafico

http://kilianvalkhof.com/2010/design/grafico-javascript-charting-library/

If these two were combined I think it would be one of the best charting libraries out there.
Great work!

I would like my line chart text items to start at position 0 instead of 1. I have 26 items with values, but the first one starts at 0, and when taking lines.axis[0].text.items is gives 26. How do I adjust this so it starts at 0?

code:

for (var i = 0, ii = lines.axis[0].text.items.length; i < ii; i++) {
var currentItem = lines.axis[0].text.items[i];
originalText = currentItem.attr('text');
newText = labels[i];
currentItem.attr({'text': newText});
currentItem.rotate(90);
currentItem.attr({y: 479});
}
thanks for your help!

e.g. I want my Y axis to have a max of 100, and scale the actual y values accordingly. i.e. so that the chart always has the same proprtions, rather than the proportions being relative to the min and max value supplied.

the following does not work:

bar1 = paper.g.barchart(10, 10, 300, 220,
   [[55, 20, 13, 32, 5, 1, 2, 10],
    [5,   5,  1,  3, 5, 1, 2, 10]],
   0, {type: "sharp"});
bar1.clone().translate(0,230);
bar2 = paper.g.barchart(310, 10, 300, 220,
   [[55, 20, 13, 32, 5, 1, 2, 10],
    [0,   0,  1,  3, 5, 1, 2, 10]],
   0, {type: "sharp"});
bar2.clone().translate(0,230);

it gets an error while trying to translate the clone of bar2.
pathArray is null.

The interactive pie chart demo doesn't work for me in any kind of browser. There's only a static pie chart, no legends or hover-effect.

How do I rotate labels for a line chart by 90 degrees? By 45 degrees?

Every one of the gRaphaël demos, in Internet Explorer 6 & 7, shows up with the left edge of the generated graphic being in the center of the page, giving the impression that those versions of IE are simply not supported. IE8 does not have this issue.

Hi,
does anyone know how I could change the pie chart library to start from 90 degrees ?

thanks
jason

Hi!

I wanted to draw a barchart with 50 bars and found out that the colors used to draw the chart comes from an array colors from the g.raphael.js. Thia array is only filled with 10 colors. Then no color is used to draw the other bars, making them invisible.

This is my fix for the bug:
in the g.bar.js file I create a variable barColor and give this the color of the mod of i, such that the first (and only) 10 colors are re-used.
replace multi ? j : i by barColor,
set barColor = multi ? j%10 : i%10

in code:

var barColor;
for (var i = 0; i < len; i++) {
stack = [];
for (var j = 0; j < (multi || 1); j++) {
var h = Math.round((multi ? values[j][i] : values[i]) * Y),
top = y + height - barvgutter - h,
barColor = multi ? j%10 : i%10;
bar = this.g.finger(Math.round(X + barwidth / 2), top + h, barwidth, h, true, type).attr({stroke: colors[barColor], fill: colors[barColor]});

        if (multi) {
            bars[j].push(bar);
        } else {
            bars.push(bar);
        }

Hope it helps!
xx

Given the following:

<table><tr><th>Item 1</th><td>5</td></tr></table>
<div id="holder"></div>
<script type="text/javascript">
(function(raphael) {
    $(function(){
        values = labels = [];
        $("tr").each(function(){
            values.push(parseInt($("td",this).text()));
            labels.push($("th",this).text());
        }
        raphael("holder",840,500).g.piechart(220,220,200,values,,{legend:labels,legendpos:'east'});
    });
})(Raphael.ninja());

All I see is an empty circle, with a single pixel black border. I am running into this situation, because I am using the pie chart for reporting on live results of a poll on my website, and so far everybody is giving the same answer.

I seem to be only able to plot ten lines of data using the r.g.linechart function, does anybody know whether this is fixed within g.lines/g.raphael and can be altered?
or whether there's another way of doing this?

also, does anyone know if it's possible to plot values onto a log scale?

UPDATE:
realised it was just an issue with the number of colours Raphael was trying to use, sort now!

I am having a problem with a g.line graph whose columns (used for hover events) overlaps each other, or fail to cover some areas of the graph.
My dataset is :
var valuesX = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,]
var valuesY = [0,0,0,0,72,1,0,0,0,2,2,1,1,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,]

and I use this code to render my graph :
var r = Raphael("timeline");
var timeline = r.g.linechart(40, 10, 740, 280,
valuesX,
valuesY,
{
nostroke: false,
axis: "0 0 1 1",
symbol: "o",
axisxstep: 29,
}
).hoverColumn(function() {
this.tags = r.set();
for (var i = 0, ii = this.y.length; i < ii; i++) {
this.tags.push(r.g.tag(this.x,
this.y[i],
this.values[i],
170,
10).insertBefore(this).attr([{fill: "#333"}, {fill: "#fff"}]));
}
}, function () {
this.tags && this.tags.remove();
});

It would be great if when viewing a chart in Firefox or other web browser
you could right-click and save it as a PNG or SVG file; or alternatively,
copy it to the clipboard as an image.

At the moment using Firefox on Windows, I can 'copy' the chart from the
right-click menu, but pasting it into other applications (e.g. Outlook) does
nothing. It would be better to paste in the image. Is there anything you
can do to make Firefox do that?

First of all, stay with the good work you are doing, really nice graphs you have made, the issue I find here is that the href most of the times don't is associate to the right label, I try to find the reason, the only conclusion I made is that have to be with the % of each part of the pie, I have made just a few changes in your implementation, just enough to serve my needs, as you can see in the code below, I just passed 3 arrays that were fill at the same time so the order is same.

Function draw(labels,clicks,links) {

var r = Raphael("holder");
r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";

      r.g.text(320, 100, "Links").attr({"font-size": 20});

      var pie = r.g.piechart(320, 240, 100, clicks, {legend: labels, legendpos: "west", href: links});
      pie.hover(function () {
          this.sector.stop();
          this.sector.scale(1.1, 1.1, this.cx, this.cy);
          if (this.label) {
              this.label[0].stop();
              this.label[0].scale(1.5);
              this.label[1].attr({"font-weight": 800});
          }
      }, function () {
          this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
          if (this.label) {
              this.label[0].animate({scale: 1}, 500, "bounce");
              this.label[1].attr({"font-weight": 400});
          }
      });

};

Hi!
I would like my linechart text items to start at 0,0.
Here you can see my chart:
http://gyazo.com/f421887ecadae0d525c1545bba30eecf.png
Right now, the label at x=1 is actually belongs to x=0, and the label at x=2 actually belongs to x=1.. etc.. and the last label is not shown at all.
Is this fixable?

Thanks!
Regards,
Annick

after building a barchart and assigning it to a global variable, I later hide it so that I can do other stuff. If I then rebuild after a criteria change, the x-axis labels duplicate, and further down the page I can see any previously built x-axis labels

Also I do 2 bad things in this code. I have to adjust the colours by looping through as I dont know how to set the colours on building graph.

Also when implementing hover function, I dont know how to work out if I'm hovering over 1st or 2nd bar, so have to loop through again to work out which bar is being hovered over, in order to give differing messages.

any help appreciated!!
Thanks!

 var r = Raphael("divGenderGradeBar", 600, 520);
xGendGradeBar =r.g.barchart(10, 10, 580,500, tmpArry2, {stacked: true, type: "soft"});

xGendGradeBar.hover(function() {
         for (var i = 0; i < xGendGradeBar.bars[0].length; i++) {
            var bar = xGendGradeBar.bars[0][i];
            if (this.bar == bar) sex = ' Male';
            var bar = xGendGradeBar.bars[1][i];
            if (this.bar == bar) sex = ' Female';
        }  

    this.flag = r.g.popup(this.bar.x, this.bar.y, (this.bar.value || "0")  + sex ).insertBefore(this);
}, function() {
    this.flag.animate({opacity: 0}, 300, function () {this.remove();});
});

r.g.txtattr = {font:"12px Fontin-Sans, Arial, sans-serif", fill:"#000", "font-weight": "bold"};
 xGendGradeBar.label(BarChartGrades);

 for (var i = 0; i < xGendGradeBar.bars[0].length; i++) {
    var bar = xGendGradeBar.bars[0][i];
    bar.attr("fill", "#2E9AFE");
    bar.attr("stroke", "#2E9AFE");

    var bar = xGendGradeBar.bars[1][i];
    bar.attr("fill", "#01DF01");
    bar.attr("stroke", "#01DF01");
}  

The clear() function works as expected in FF but in IE7 state isn't clean.

Repro summary:

• Create canvas
• Create Pie graph (like in demo)
• call Clear() on canvas (I'd expect this to reset to initial state)
• Create same Pie graph again

Notice that the legend is broken in IE7. The words are stacked.

Repro code:

 var r = Raphael("test_graph");

 r.g.txtattr.font = "8px 'Arial', Fontin-Sans, sans-serif";

 var pie = r.g.piechart(220, 200, 40, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["ORGANIC SEARCH", "FACEBOOK/", "TWITTER", "32", "5", "OTHER", "2", "10"], legendpos: "west"});
 pie.hover(function () {
     this.sector.stop();
     this.sector.scale(1.1, 1.1, this.cx, this.cy);
     if (this.label) {
         this.label[0].stop();
         this.label[0].scale(1.6);
         this.label[1].attr({"font-weight": 800});
     }
 }, function () {
     this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
     if (this.label) {
         this.label[0].animate({scale: 1}, 500, "bounce");
         this.label[1].attr({"font-weight": 400});
     }
 });

 r.clear();
 pie = r.g.piechart(220, 200, 40, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["ORGANIC SEARCH", "FACEBOOK/", "TWITTER", "32", "5", "OTHER", "2", "10"], legendpos: "west"});
 pie.hover(function () {
     this.sector.stop();
     this.sector.scale(1.1, 1.1, this.cx, this.cy);
     if (this.label) {
         this.label[0].stop();
         this.label[0].scale(1.6);
         this.label[1].attr({"font-weight": 800});
     }
 }, function () {
     this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
     if (this.label) {
         this.label[0].animate({scale: 1}, 500, "bounce");
         this.label[1].attr({"font-weight": 400});
     }
 });

http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.pie.js#L108

cover.mouseover(function () {
fin.call(o);
}).mouseout(function () {
fout.call(o);
});

This should better read

cover.mouseover(function (e) {
fin.call(o, e);
}).mouseout(function (e) {
fout.call(o, e);
});

So the handlers can access the event object.