Plot a stack bar graph with line graph combination.

Loading...

Look at the graph above, is that cool?

1. Include all necessary JavaScript files.

1
2
3
4
5
6
7
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.flot.tooltip/0.7.1/jquery.flot.tooltip.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.resize.min.js"></script>
<script src="jquery.flot.grow.js"></script> <!-- you can get from http://jumflot.jumware.com/examples/Experimental/grow.html -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.stack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script>

Notice that I’m using CDN for those library, of course you may host it yourself.

2. Add a placeholder for the graph

1
<div id="flot-graph" style="height:210px"></div>

Simple? Because all the data are populated from javascript.

3. Settings for the graph

The Settings here is refer to color, label, effect, etc. Let’s do it one by one

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var flot_options = {
    series: {
        grow: { // grow animation
            active: true, // activate the plugin
            steps: 50 // number of seperate steps will be shown from beginning to the end
        },
        stack: true, // is stackable?
        shadowSize: 2 // is the default size of shadows in pixels. Set it to 0 to remove shadows
    },
    grid: {
        hoverable: true, // once hover, it will highlight
        clickable: true,
        tickColor: '#f0f0f0', // the color in the background (i.e. cell border color)
        borderWidth: 0, // the border for the graph container
        color: '#333333' // the color of the label (on the right-hand-side)
    },
    xaxis:{
        tickDecimals: 0, // the number of decimals to display
        tickSize: 1, // the size of interval between 2 ticks
        tickFormatter: function(val, axis) {
            // you can format the label text to display
            return val;
        }
    },
    yaxis: { // same as x-axis
        ticks: 5,
        min: 0,
        tickDecimals: 0,
        tickFormatter: function(val, axis) {
            return val;
        }
    },
    tooltip: true, // whether to show tooltip
    tooltipOpts: {
        content: function(label, x, y) {
            // format the content of tooltip
            return parseInt(y) + ' ' + label;
        },
        defaultTheme: false,
        shifts: { // the position from the cursor
            x: 0,
            y: 20
        }
    }
};

Now we already done the general settings for the graph. Let’s configure bar graph and line graph differently

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var line_options = {
    show: true, // whether to show the line between ticks
    lineWidth: 2, // the thickness of the line
    fill: true, // whether the shape should be filled, in this case will be the color below the line
    fillColor: { // the color for the fill
        colors: [{ // this is to set the gradient
            opacity: 0.0
        }, {
            opacity: 0.7
        }]
    }
};

var bar_options = {
    show: true,
    align: 'center', // alignment for the bar
    lineWidth: 0, // the border width of the bar
    fill: true, // fill with color?
    barWidth: 0.6 // the width of the bars in units of the axis
};

4. Populate data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$.ajax({
    dataType: 'json',
    url: '/path/to/graph/data.php',
    success: populateGraph
});

function populateGraph(data) {
    var graph_data = [];

    graph_data.push({
        label: 'iOS', // the the label (show in the right side)
        bars: bar_options, // set the bar config defined just now
        color: '#d063e6', // set a different color for different bar
        data: data.ios // populate data to this bar
    });

    // same as above
    graph_data.push({label: 'Android', bars: bar_options, color: '#a4c739', data: data.android});

    graph_data.push({
        label: 'User',
        lines: line_options, // set the line graph config
        stack: false, // this is line graph, and not stackable, thus set to false
        color: '#00aeef',
        points: {radius: 5, show: true}, // the `circle` size for the line graph
        data: data.user
    });

    // set the overall data to the main graph with general settings
    $('#flot-graph').length && $.plot($('#flot-graph'), graph_data, flot_options);
}

Note that the format for the data should be in this form [x, y] (i.e. data.user above)

1
2
3
4
5
6
7
8
9
10
[
    [0, 28],
    [1, 17],
    [2, 21],
    [3, 30],
    [4, 22],
    [5, 9],
    [6, 18],
    [7, 27]
]

You’re done!!!