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!!!