7👍
Extend the chart to draw lines (see Chart.js — drawing an arbitrary vertical line) and use null values to hide line segments, like so
Preview
Script
Chart.types.Line.extend({
name: "LineAlt",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var scale = this.scale
// draw lines
this.chart.ctx.save();
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(scale.calculateX(1.5), scale.startPoint);
this.chart.ctx.lineTo(scale.calculateX(1.5), scale.endPoint);
this.chart.ctx.stroke();
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(scale.calculateX(6.5), scale.startPoint);
this.chart.ctx.lineTo(scale.calculateX(6.5), scale.endPoint);
this.chart.ctx.stroke();
this.chart.ctx.restore();
}
});
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [28, 48, null, null, null, null, null, null, null]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [null, null, 40, 19, 86, 27, 90, null, null]
},
{
label: "My Third dataset",
fillColor: "rgba(151,205,187,0.2)",
strokeColor: "rgba(151,205,187,1)",
pointColor: "rgba(151,205,187,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,205,187,1)",
data: [null, null, null, null, null, null, null, 24, 32]
}
]
};
var ctx = document.getElementById('chart').getContext('2d');
new Chart(ctx).LineAlt(data);
Fiddle – http://jsfiddle.net/buhuebdm/
0👍
I can’t help with the multiple data sets (except to agree with the comments that it should work) but regarding your request “I’d also like to draw a vertical line in-between each graph on the shared canvas to distinguish the datasets further.” I wrote some rough code to draw lines over the top of my graphs that might be a useful starting point for you. I’m extending the Bar chart where you’ll want to extend the Line chart but that should be a simple text replacement in the code below.
Chart.types.Bar.extend({
name: 'BarOverlay',
draw: function (ease) {
// First draw the main chart
Chart.types.Bar.prototype.draw.apply(this);
var ctx = this.chart.ctx;
var barWidth = this.scale.calculateBarWidth(this.datasets.length);
for (var i = 0; i < this.options.verticalOverlayAtBar.length; ++i) {
var overlayBar = this.options.verticalOverlayAtBar[i];
// I'm hard-coding this to only work with the first dataset, and using a Y value that I know is maximum
var x = this.scale.calculateBarX(this.datasets.length, 0, overlayBar);
var y = this.scale.calculateY(2000);
var bar_base = this.scale.endPoint
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
ctx.moveTo(x, bar_base);
ctx.lineTo(x, y);
ctx.stroke();
}
ctx.closePath();
}
});
This also needs a change to the options structure to store a list of overlay coordinates:
// Add an array of columns at which a vertical line should be drawn
verticalOverlayAtBar: []
Note that my bars are vertical rather than horizontal.
To use this I set up the chart as usual but call my overlay method instead of the base chart:
var ctx = $("#PdCallHistoryChart").get(0).getContext("2d");
var PdHistoryChart = new Chart(ctx).BarOverlay(PdChartData, HistoryChartDefaults);
The overlay logic draws the main chart and is then free to work with the canvas and has access to the properties of the underlying graph so can calculate offsets based on the data drawn.
This is fairly rough so any Chart.js experts can feel free to wade in with criticism.