Chart.js - Creating Custom Chart Types

Question

I want to create a Linegraph that renders 3 different datasets separately of each other. The y-axis is shared.

For instance, the first 4 points belong to dataset 1 (green), the next 7 points belong to dataset 2 (yellow), and the last 9 points belong to dataset 3 (red). The lines in each dataset do not connect. I'd also like to draw a vertical line in-between each graph on the shared canvas to distinguish the datasets further.

Having 3 canvas elements for each line graph is not cutting it for me. The Chart.JS docs are not clear on how to go about this type of customization. Any help to get me on the right track to code this myself is desired.

Thank you for your time.

Answer 1

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/

Answer 2

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.