CODEWITHSUNDEEP
javascriptsvgchartsraphaelgraphael
lance-java
lance-java

Reputation: 27984

gRaphaël - Bar chart examples with labels and dates

I'm interested in using the gRaphaël charting library to render SVG charts.

In particular I'd like to render a bar chart with dates along the x-axis. Is there any documentation and / or examples that explain:

  1. Using dates as the x-axis of a bar chart
  2. Adding labels to the x-axis of a bar chart

The examples here don't include x-axis labels or dates. The documentation here does not mention x-axis labels. Looking at the source code here I found a label(labels, isBottom) function which might help but I can't find any documentation or examples of how to use it.

Upvotes: 0

Views: 356

Answers (1)

Chris Fan
Chris Fan

Reputation: 126

For adding labels to the x-axis of a bar chart, you can write a function like this:

function barchartAxis (x, y, width, barwidth, gutter, labels, orientation, type, dashsize, paper) {

dashsize = dashsize == null ? 2 : dashsize;
type = type || "t";
paper = arguments[arguments.length-1];

var path = type == "|" || type == " " ? ["M", x + .5, y, "l", 0, .001] : orientation == 1 || orientation == 3 ? ["M", x + .5, y, "l", 0, -length] : ["M", x, y + .5, "l", length, 0],
    j = 0,
    txtattr = { font: "11px 'Fontin Sans', Fontin-Sans, sans-serif" },
    text = paper.set();

if (+orientation == 1 || +orientation == 3) {
    // y-axis    
} else {
    addon = (orientation ? -1 : 1) * (dashsize + 9 + !orientation);

    var halfBarwidth = barwidth/2,
        dx = barwidth + gutter,
        X = x + halfBarwidth,
        txt = 0;

    while (X <= x + width - halfBarwidth) {
        type != '-' &&
            type != ' ' &&
                (path = path.concat(
                    ['M', X + .5, y - (type == '+' ? dashsize : !!orientation * dashsize * 2), 'l', 0, dashsize * 2 + 1]
                ));

        text.push(txt = paper.text(X, y + addon, (labels && labels[j++])).attr(txtattr));
        X += dx;
    }
}

var res = paper.path(path);
//...
return res;

}

Just the same logic as linechart's axis.

Upvotes: 1

Related Questions