How to insert values in bars (flotcharts)

Question

I have some problems to show some values in bars. I want a chart like this: Example. I don't know what I'm missing in here.

$('#myModalChart').on('shown.bs.modal', function (e) {
    var data = [{
        label: "Foo",
        data: [
            [2],
            [3, 9, 12],
            [6, 0, 3],
            [9, 11, 12],
            [12, 0, 1],
            [15, 0, 2],
            [18],
            [3, 12, 12],
            [9, 12, 12]
        ]
    },
    {
        label: "Bar",
        data: [
            [2],
            [3, 0, 5],
            [6, 3, 7],
            [9, 4, 11],
            [12, 1, 3],
            [15, 2, 5],
            [18]
        ]
    },
    {
        label: "Tree",
        data: [
            [2],
            [3, 5, 9],
            [6, 7, 15],
            [9, 0, 4],
            [12, 3, 13],
            [15, 5, 17],
            [15, 17, 17],
            [12, 13, 13],
            [6, 15, 15],
            [18]
        ]
    },];

    var options = {
        series: {
            bars: {
                show: true,
                barWidth: 1
            }
        },
        xaxis: {
            align: "center",
            ticks: [
                [3.5, 'text1'],
                [6.5, 'text2'],
                [9.5, 'text3'],
                [12.5, 'text4'],
                [15.5, 'text5']
            ]
        }
    };

    var plot = $.plot("#chart2", data, options)
});

I want a chart like this, with labels in it. And I wish have in all of them.

What I'm missing?

enter image description here

Please, explain what doesn't work exactly and fix the link as it doesn't work. Also, check this [plunker](http://plnkr.co/edit/cURLucTxA2AvFJM5UA3Q?p=preview). Your code seems fine to me. Thank you! — kasimoglou, Apr 27 '15 at 11:51
I want a chart like this, with labels in it. And I wish have in all of them. What I'm missing? http://www.subirimagenes.net/i/150428084515398118.jpg — Arnau Guadall, Apr 28 '15 at 07:13

score 2 · Accepted Answer · edited May 23 '17 at 12:31

2

You have to create and place the data value labels yourself. How to do this can be seen in this answer.

I created a fiddle adjusting it to your code. Only the first data series (foo) has labels for now. you will have to adjust the position. The relevant code:

$.each(plot.getData()[0].data, function (i, el) {
    if (el.length > 1) {
        var o = plot.pointOffset({
            x: el[0],
            y: el[1]
        });
        $('<div class="data-point-label">' + el[1] + '</div>').css({
            position: 'absolute',
            left: o.left + 4,
            top: o.top,
            'text-align': 'center',
            display: 'none'
        }).appendTo(plot.getPlaceholder()).fadeIn('slow');
    }
});

But you may also have to cleanup your data. You have multiple data points with the same x values (which means bars behind / in front of each other which leads to some being invisible). Take a look at the side-by-side and stack plugins on the flot plugin page.

edited May 23 '17 at 12:31

Community

1
1

answered Apr 28 '15 at 11:01

Raidri

17,258
9
62
65

Your suggestion worked fine for me. But I have another dubt. The X values you said were if I don't put in there like [8, 15, 15] the chart seems I cut with an axe and putting that I can trick the chart to look better (In my opinion). – Arnau Guadall Apr 29 '15 at 07:01
I filled all data with a for(). But now I have another problem. How should I do to center verticalli labels? Because the label is placed on the top of the label and I want to stay centered. Maybe I have to subtract el[2] with el[1]? – Arnau Guadall Apr 29 '15 at 09:08
Use `(e[1]+e[2])/2` to get the center. But you also need to calculate the height of the label-div and subtract half of that to get the center of the label in the center of the bar. – Raidri Apr 29 '15 at 10:53

How to insert values in bars (flotcharts)

1 Answers1