Can I plot random points on a chart.js or Google Charts chart?

Question

I'm creating a chart representing centile curves in a child's development.

So from 1 to 18 years old, you take the caculated BMI and plot it, and see if you're in a healthy/overweight/underweight range.

I've mocked up the 98th and 50th centile lines in a chart.js chart:

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"],
    datasets: [
                {
            label: "98th",
            fillColor: "rgba(254,162,116,1)",
            strokeColor: "rgba(0,0,0,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [20.88534167, 19.81059732, 19.21573931, 18.79199228, 18.69458621, 18.94370352, 19.468687, 20.19907676, 21.0399018, 21.92476198, 22.81691772, 23.69887299, 24.57539594, 25.43122437, 26.24504753, 26.99794153, 27.67845403, 28.28680281]
        },
        {
            label: "50th",
            fillColor: "rgba(92,195,105,1)",
            strokeColor: "rgba(0,0,0,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [17.644, 16.655, 16.133, 15.752, 15.547, 15.498, 15.564, 15.748, 16.037, 16.423, 16.892, 17.433, 18.037, 18.675, 19.317, 19.938, 20.519, 21.052]
        }
    ]
};

var myLineChart = new Chart(ctx).Line(data, { 
    pointDot: false
});

(as you can see here)

So now I've got the different regions (let's say anything in green is "normal" range, anything in red is overweight), I want to plot some actual weights.

So at 2 years, you plot 15.3. At 3 years you plot 16.5, etc.

I don't really need a line chart to visualise these plots, although that would be acceptable if it's the only way of doing it.

Ideally, I just want to put "X" marks on the chart where the measurements actually are.

I guess what I want is a scatter chart overlayed onto these line charts.

Like this:

You can do this with Flot which is what's currently being used, but there are some separate issues whereby we're trying to migrate to either chart.js or Google Charts.

Answer 1

If your scatter points will come within the area that you have already drawn you can do this in the onAnimationComplete callback

var scatterPoints = [
    { x: 2, y: 15 },
    { x: 5.5, y: 20 }
]

var myLineChart = new Chart(ctx).Line(data, {
    pointDot: false,
    // disable tooltips so that a redraw won't wipe out our scatter points
    // alternatively we could extend the chart and move the scatter point drawing into the draw override
    showTooltips: false,
    onAnimationComplete: function () {
        var self = this;
        var ctx = self.chart.ctx;

        // style
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "red";

        scatterPoints.forEach(function (scatterPoint) {
            ctx.fillText("x",
                // adjust x axis value if the x axis does not start at 0

                self.scale.calculateX(scatterPoint.x - Number(self.scale.xLabels[0])),
                self.scale.calculateY(scatterPoint.y));
        })
    }
});

If you are only going to have integral values for x (i.e. ones that are already labels) you can do it in a simpler way - be adding a third series with the line color set to transparent.

---

Fiddle - http://jsfiddle.net/sucfguw1/

---