CODEWITHSUNDEEP
javascripthtmlbar-chartflot
eLemEnt
eLemEnt

Reputation: 1801

Need help for showing side by side bars in flot graph

Required output...

My code till now

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="jquery.flot.time.js"></script>    
<script type="text/javascript" src="jshashtable-2.1.js"></script>    
<script type="text/javascript" src="jquery.numberformatter-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>
<script type="text/javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="jquery.flot.orderBars.js"></script>
<script>

var data1 = [[1,0],[2,0],[3,3.5],[4,4.5],[5,6.2]];
var data2 = [[1,3.3],[2,2.3],[3,3],[4,2.5],[5,3.9]];
var data3 = [[1,3.3],[2,2.3],[3,6.5],[4,7],[5,10.1]];


var dataset = [
    {
        label: "ME(L)",
        data: data1,        
        color: "orange",
        bars: {
            show: true,
            align: "center",
            lineWidth:1
        }
    }, 
    {
        label: "AE(L)",
        data: data2,
        color: "green",
        bars: {
            show: true,
            align: "center",
            lineWidth:1
        }
    },
    {
        label: "Total(L)",
        data: data3,
        color: "blue",
        points: { symbol: "triangle", fillColor: "#0062FF", show: true },
        lines: {show:true}
    }
];

var options = {

xaxis: {
    tickLength: 0,
    axisLabel: "HOURS",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 10,
    color: "black"
},

yaxis: {
    axisLabel: "FUEL CONSUMPTION"
}

};

$(document).ready(function () {
    $.plot($("#placeholder"), dataset, options);
});

</script>
</head>
<body>
    <div style="width:450px;height:300px;text-align:center;margin:10px">       
        <div id="placeholder" style="width:100%;height:100%;"></div>       
    </div>
</body>
</html>

The output I am getting is

enter image description here

Required output enter image description here

Please somebody help Thank you

Upvotes: 1

Views: 358

Answers (1)

Raidri
Raidri

Reputation: 17550

Using the Side-by-side-improved plugin and this options gives you a similar result to your image.

var dataset = [{
    bars: {
        show: true,
        align: "left",
        barWidth: 0.3,
        lineWidth: 1,
        order: 1
    }
}, {
    bars: {
        show: true,
        align: "left",
        barWidth: 0.3,
        lineWidth: 1,
        order: 2
    }
}, ...];

See this fiddle for the full example.

Upvotes: 1

Related Questions