HumbleSoftware / Flotr2

Graphs and Charts for Canvas in JavaScript.
http://www.humblesoftware.com/flotr2/
MIT License
2.45k stars 528 forks source link

How to show bar values #243

Closed MarcDiethelm closed 10 years ago

MarcDiethelm commented 10 years ago

I'm using your bar chart. On hover over a bar the value is displayed as desired. However I want all the values to be displayed permanently, not just on hover. Markers seem like extra hassle that I want to avoid (I need to set their values, seriously?)

The way the values are displyed on hover is just the way I want them, only I want them all the time.

Can this be done? I found nothing in the docs.

cesutherland commented 10 years ago

Here's an example with markers: http://humblesoftware.com/flotr2/index#!color-gradients

-c

On Mon, Sep 16, 2013 at 7:53 PM, Marc Diethelm notifications@github.comwrote:

I'm using your bar chart. On hover over a bar the value is displayed as desired. However I want all the values to be displayed permanently, not just on hover. Markers seem like extra hassle that I want to avoid (I need to set their values, seriously?)

The way the values are displyed on hover is just the way I want them, only I want them all the time.

Can this be done? I found nothing in the docs.

— Reply to this email directly or view it on GitHubhttps://github.com/HumbleSoftware/Flotr2/issues/243 .

MarcDiethelm commented 10 years ago

I managed to do it almost the way I need it. Its not straightforward and quite frustrating, mostly due to the lack of API documentation and because the API for this kind of thing kind of sucks.

For posterity here's how I did it. It was mostly guesswork. Maybe it will help someone.

markers = {
    data: data2, // eg: [[0,18.6], [1, 6], [2, 28.23]]
    markers: {
        show: true,
        fontSize: 10.5,
        color: colOrange,
        position: horizontal ? 'rm' : 'ct',
        labelFormatter: function(o) {
            return (horizontal ? o.x : o.y).toFixed(2);
        }
    }
}

horizontal is a boolean indicating wether it's a horizontal or vertical bar chart in my case.