I’m flattered!

Great work. It’s a great time for client-side graphs now that more browsers are beginning to support the canvas element.

Very cool, I’ve been looking for something like this for ages. I too had the problem that rendering graphs serverside was taking up way too much resources.

Props for a job well done, this beats all the other JS graphing scripts due to its relatively small size.

One suggestion: mouseover values at each “plot” of the graph?

Actually, you can set the height, I just seem to have forgotten to put it in the docs… I’ll update ASAP. You can set the height like so:

g = new Bluff.Line(’example’, ‘800×300′);

Found another bug:

var g = new Bluff.Pie(’example’, 400);
g.theme_37signals();
g.title = ‘My Graph’;

g.data(”Apples”, 0);
g.data(”Oranges”, 2);
g.data(”Watermelon”, 8);
g.data(”Peaches”, 10);
g.draw();

Results in a pie chart with peaches filling up the whole circle. The zero for apples is being interpreted as an empty value at line 436:

data_points = data_points || [];

This empty data set is causing _sums_for_pie to calculate a NaN total sum at line 1487.

Workaround using brackets: g.data(”Apples”, [0]);

This Ruby idiom doesn’t travel so well in the javascript world when you are using dynamic parameters, unfortunately.

Here are some suggestions for new features, I hope you’ll implement at least a few of them

-option to show dots on “area” graph!
-option for a top-line on “area” graph (basically overlay line graph on area graph)
-option for smaller dots
-option for thinner lines on “line” graph
-option for vertical grid (y axis grid)
-option for “dashed” grid lines
-equal grid thickness (some are thicker and a bit blurry)
-mouseover y values

Marcel,

1) Could you send me a link to the page you’re running the graph on so I can take a look? I can’t fix a bug if I can’t reproduce it.

2) You need to call clear() on the original graph to remove all the text nodes. There’s no way for the second graph to know that there’s already a graph on that canvas, so you need to clear the first one yourself.

Could you post the code you’re using? My suspicion is that you’re clearing the wrong object. Basically, each graph instance stores a list of references to the text nodes it creates, so that they can be removed. Any other graph objects, and the canvases they use, have no references to the text nodes and so cannot do anything about them (though I may make an attempt to work around this in a future release). You need to do something like this:

// First graph
var g = new Bluff.Line('example', 400);
// data, settings...
g.draw();

// Clear, then create a new graph
g.clear();
g = new Bluff.StackedBar('example', 400);
// continue as usual

As I explained, this is currently not possible. The text is created using a stack of divs, they are not part of the canvas and need to be managed separately. The only object that can remove them is the one that created them, since that’s where the references are stored. Therefore, you’re going to need to keep a reference to the original graph. Your situation is easily fixed without creating extra global vars:

var Graph = {
    draw: function(interval) {
        if (this._currentGraph) this._currentGraph.clear();

        var g = new Bluff.Area('graph', '800x180');
        this._currentGraph = g;

        g.title = 'Stock Performance';
        g.hide_title = 'True';
        g.hide_legend = 'True';
        g.marker_font_size = '11';
        g.minimum_value = '0';
        g.no_data_message = 'No data';

        g.data('Stock Value', hourly.reverse());

        g.labels = x_labels;
        g.draw();
    }
}

Just call Graph.draw() and if a graph already exists, it will be cleared.

Thank you for pointing that out, that worked great!

I didn’t know you could assign a function/class to a variable and still call it normally, you javascript wiz you

I just tried that approach and the text does not display if added inside the canvas tag. I think I might be able to solve this by wrapping the canvas in an extra div to hold the text nodes, so they’re positioned relative to the wrapper rather than relative to the whole page.

I’ll post something here if and when I fix this.

I’ve already fixed some of the reported bugs from the first release, and there will probably be a bug fix release in the next week or so. I’ll post here when that happens. Some feature requests depend on whether I can add them to Gruff as well, since Bluff is supposed to be a faithful mirror of Gruff.

There’s no official bug tracker, but the project is on Github. Feel free to fork it and add failing test cases and fixes.

http://github.com/jcoglan/bluff

There’s a readable version in the download (bluff-src.js), and you can also browse the source through the git repo.

Hi,

Here is the link,

http://www.kailashyadav.com/bluff.php

My problem is that i am using two div’s and i am hiding them on clicking. The problem is that the Labels are not cleared when i am hiding the div in which the canvas is shown.

Hey,
Bluff is really nice. I like it.
Here’s a little suggestion:
add this line to Bluff.Renderer._text_node:
div.style.zIndex = this._canvas.style.zIndex;

this would be really usefull in some designs

Wonderful to see a JS implementation for charting! This has been a long time in the making and I was somewhat baulking at using Flex or Google Chart to undertake simple charts…

A quick question, I noticed a reference to “background_image” in the bluff-min.js. Is is possible to use an image as the background for a chart?

Regards!

@Ralf As of the latest release, text rendered by Bluff is contained in divs with a class of “bluff-text”. Use that in your stylesheet if you need to modify presentation of the text labels.

Great work! Amazing.

Did you think about using http://typeface.neocracy.org/ for the text? It would make the images copy-able, it would also allow people to use custom typography.

Do you see a future in Javascript for something like:
http://flare.prefuse.org/

I checked out some physics and it looks totally possible, see:
http://blobsallad.se/