Question

I am trying to implement a flot bar graph, but I am having a few problems

The first being that setting the yaxsis min and max does not seem to work, the graph still only goes from 0 – 14.

Second I dont know how to set individual colours and names for each bar.

This is what I have

var d2 = [{
     "label": "Face",
     "data": [[0 , "3"], [5, "13"]]
 },
 {
     "label": "Telephone",
     "data": [[1, "400"], [6, "337"]]
 },
 {
     "label": "Web",
     "data": [[2, "1304"], [7, "843"]]

 }];





var options = {

    yaxes: {min: 0, max: 25000},

     xaxis: {
         tickSize: [1],
         autoscaleMargin: .10,
         show: false
     },


    series: {
        lines: { show: false},
        bars: {
            show: true,
            barWidth: 0.9,
            align: 'center',
             multiplebars:true,             
            },

        points: {
            show: true
        }
    }


};



$.plot($('#graph1'), d2, options);

Does anyone know how to fix these?

Thanks

Answer 1

If you want a different name and color for each bar then you’ll need to configure the bar settings as part of the data sets.

var data1 = [
        {
            label: "Face",
            data: [[0 , 3], [5, 13]],
            bars: {
                show: true,
                barWidth: 0.9,
                fill: true,
                lineWidth: 1,
                order: 1,
                fillColor:  "#AA4643"
            },
            color: "#AA4643"
        },
        {
            label: "Telephone",
            data: [[1, "400"], [6, "337"]],
            bars: {
                show: true,
                barWidth: 0.9,
                fill: true,
                lineWidth: 1,
                order: 2,
                fillColor:  "#89A54E"
            },
            color: "#89A54E"
        }]

Then graph them like this:

$.plot($("#placeholder"), data1, options);

As for min and max not working, what happens if you don’t configure them? Does the axis fit the data correctly?