Flot Bar Chart - how to create non stack up values

Question

I'm new to flot. I have this bar chart:

and here is the code I used for it:

$.getJSON('chartBar.json', function(graphDataBar){

    $.plot($('#graph-bars'), graphDataBar, {
        series: {
            bars: {
                show: true,
                barWidth: .1,
                align: 'right'


            },
            shadowSize: 0
        },
        grid: {
            color: '#646464',
            borderColor: 'transparent',
            borderWidth: 20,
            hoverable: true
        },
        xaxis: {
            tickColor: 'transparent',
            ticks: [[6,'Week 48'],[7,'Week 49'],[8,'Week 50'],[9,'Week 51'],[10,'Week 52']],
            min: 5.5,
            max: 10.5,
            mode: 'time',
         timeformat: "%b %d",
         minTickSize: [1, "day"],
         tickSize: [1, "day"],
         autoscaleMargin: .10
        },
        yaxis: {
            tickSize: 5
        }
    });

I ve tried to use the properties inside x-axis but nothing seems to help. I know there is a way to do it, I ve seen examples such as This one. But it doesnt seem to work. What Im trying to succeed here is this

As well I ve seen other sample on Stackoverflow like This But it still didnt work out. Im not sure if I see this the wrong way, or if I need to use the timestamp in order to make it work, but I do it the wrong way.

Could anyone explain to me how the solution would work? I would like to understand it for future Bar Charts

Thank you in advance

You need a side-by-side plugin like this: https://github.com/pkoltermann/SideBySideImproved — Raidri, Sep 27 '15 at 20:42

score 0 · Answer 1 · edited May 23 '17 at 10:26

I've made an assumption that the JSON data is the same as in your other question here so apologies if this is not the case.

I've created a Fiddle here that demonstrates the "non stacked bars" using the following JSON data:

[
    {       
        "data": [ [6, 520], [7, 600], [8, 850], [9, 900], [10, 300] ],
        "color": "#F02626",
        "points": {  "fillColor": "#F02626", "radius": 6 },
        "lines": { "fillColor": "#CCF8FF"}
    }, 
    {
        "data": [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ],
        "color": "#26F041",
        "points": { "radius": 10, "fillColor": "#26F041" }
    }, 
    {
        "data": [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ],
        "color": "#20AEFA",
        "points": { "radius": 6, "fillColor": "#20AEFA"}
    }
]

This uses the orderBars plugin. The key to getting the bars to appear side by side (rather than vertically) is to set the series.bars.order attribute to 1:

series: {
    bars: {
        ...
        order: 1
    }
},

Flot Bar Chart - how to create non stack up values

1 Answers1