JavaScript
var margin = {
top: 50,
right: 50,
bottom: 120,
left: 70
};
var svg = "#chart svg";
var normalisedData = [{
"key": "Group A",
"type": "bar",
"yAxis": 1,
"values": [{
"x": 0,
"y": -6
}, {
"x": 1,
"y": 5
}, {
"x": 2,
"y": 3
}, {
"x": 3,
"y": 6
}, {
"x": 4,
"y": 9
}, {
"x": 5,
"y": 10
}]
}, {
"key": "Group B",
"type": "bar",
"yAxis": 1,
"values": [{
"x": 0,
"y": 5
}, {
"x": 1,
"y": 7
}, {
"x": 2,
"y": 5
}, {
"x": 3,
"y": 3
}, {
"x": 4,
"y": 9
}, {
"x": 5,
"y": 8
}]
}, {
"key": "Group A Benchmark",
"type": "line",
"yAxis": 1,
"values": [{
"x": 0,
"y": 0
}, {
"x": 1,
"y": 1
}, {
"x": 2,
"y": 0
}, {
"x": 3,
"y": 3
}, {
"x": 4,
"y": 0
}, {
"x": 5,
"y": 1
}]
}, {
"key": "Group B Benchmark",
"type": "line",
"yAxis": 1,
"values": [{
"x": 0,
"y": 1
}, {
"x": 1,
"y": 2
}, {
"x": 2,
"y": 1
}, {
"x": 3,
"y": 1
}, {
"x": 4,
"y": 2
}, {
"x": 5,
"y": 0
}]
}];
var axisKeys = ["2014-Jan", "2014-Feb", "2014-Mar", "2014-Apr", "2014-May", "2014-Jun"];
nv.addGraph(function () {
var chart = nv.models.multiChart()
.options({
reduceXTicks: false
})
.margin(margin)
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function (d) {
// If there is such element, return it
if (typeof axisKeys[d] !== "undefined") {
return axisKeys[d];
}
return "";
});
// Get normalised data for chart
...