Bar and line chart combination in dimple
Bar and line chart combination using dimple.js library. Very simple and straightforward. Not much chart configuration options that why it's called a simple chart.
HTML
<script src="http://dimplejs.org/dist/dimple.v1.1.3.min.js"></script>
<div id="chartContainer">
JavaScript
var svg = dimple.newSvg("#chartContainer", 800, 400);
// Data hack required to get revenue and profit on the same axis, units are
// arbitrarily allocated to revenue but the values will be summed by date
var data = [{
"Month": "01/2013",
"Metric": "Revenue",
"Revenue/Profit": 2000,
"Units": 4
}, {
"Month": "02/2013",
"Metric": "Revenue",
"Revenue/Profit": 3201,
"Units": 3
}, {
"Month": "03/2013",
"Metric": "Revenue",
"Revenue/Profit": 1940,
"Units": 5
}, {
"Month": "04/2013",
"Metric": "Revenue",
"Revenue/Profit": 2500,
"Units": 1
}, {
"Month": "05/2013",
"Metric": "Revenue",
"Revenue/Profit": 800,
"Units": 4
}, {
"Month": "01/2013",
"Metric": "Profit",
"Revenue/Profit": 2000,
"Units": 0
}, {
"Month": "02/2013",
"Metric": "Profit",
"Revenue/Profit": 2000,
"Units": 0
}, {
"Month": "03/2013",
"Metric": "Profit",
"Revenue/Profit": 14000,
"Units": 0
}, {
"Month": "04/2013",
"Metric": "Profit",
"Revenue/Profit": 3200,
"Units": 0
}, {
"Month": "05/2013",
"Metric": "Profit",
"Revenue/Profit": 1200,
"Units": 0
}];
var chart = new dimple.chart(svg, data);
chart.setBounds(60, 20, 680, 330);
// Add your x axis - nothing unusual here
var x = chart.addCategoryAxis("x", "Month");
// First y axis is the combination axis for revenue and profit
var y1 = chart.addMeasureAxis("y", "Revenue/Profit");
// Second is the units only
var y2 = chart.addMeasureAxis("y", "Units");
// Plot the bars first - the order of series determines their dom position
// from back to front, this means bars are at the back. It's important
// to note that the string here "Unit Sales" is NOT in the data. Any string
// not in the data is just used to apply a label which can be used for colouring
// as it is here and will also appear in tool tips
var bars = chart.addSeries("Unit Sales", dimple.plot.bar, [x, y2]);
// Use a simple line by metric for...