[Chartjs]-Chart.js Line-Chart with different Labels for each Dataset

by

27👍

✅

I had a battle with this today too.
You need to get a bit more specific with your dataset. In a line chart “datasets” is an array with each element of the array representing a line on your chart. Chart.js is actually really flexible here once you work it out. You can tie a line (a dataset element) to an x-axis and/or a y-axis, each of which you can specify in detail.

In your case if we stick with a single line on the chart and you want the “time” part of the entry to be along the bottom (the x-axis) then all your times could go into the “labels” array and your “number” would be pin-pointed on the y-axis. To keep it simple without specifying our own scales with x and y axes and given this data:

var MyData = [{time:"10:00", number: "127"},
              {time:"11:00", number: "140"},
              {time:"12:00", number: "135"},
              {time:"13:00", number: "122"}];

You could set up the “data” property of your chart to be:

var data = {
    labels: ["10:00", "11:00", "12:00", "13:00"],
    datasets: [
        {
            label: "My First dataset",

            // Insert styling, colors etc here

            data: [{x: "10:00", y: 127},
                   {x: "11:00", y: 140},
                   {x: "12:00", y: 135},
                   {x: "13:00", y: 122}]
        }
    ]};

Note that the data array is now a bit more specific with each element of data plotting itself on the x-axis by referencing one of the labels rather than just being a raw number. You can now put another dataset object in the datasets array following this pattern and have two lines, obviously give your lines different colours and names (“label”).

Hope this helps.

14👍

I found a really good solution here: https://github.com/chartjs/Chart.js/issues/3953

Basically, you can add in your own ‘labels’ property to each dataset and leverage it in the callbacks for the xAxes labels, tooltips, or whatever you like.

var ctx = $("#myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [1, 2, 3, 4, 5],
            backgroundColor: [
                'green',
                'yellow',
                'red',
                'purple',
                'blue',
            ],
            labels: [
                'green',
                'yellow',
                'red',
                'purple',
                'blue',
            ]
        }, {
            data: [6, 7, 8],
            backgroundColor: [
                'black',
                'grey',
                'lightgrey'
            ],
            labels: [
                'black',
                'grey',
                'lightgrey'
            ],
        },]
    },
    options: {
        responsive: true,
        legend: {
            display: false,
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var dataset = data.datasets[tooltipItem.datasetIndex];
                    var index = tooltipItem.index;
                    return dataset.labels[index] + ': ' + dataset.data[index];
                }
            }
        }
    }
});

What’s important here is this piece:

        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var dataset = data.datasets[tooltipItem.datasetIndex];
                    var index = tooltipItem.index;
                    return dataset.labels[index] + ': ' + dataset.data[index];
                }
            }
        }

4👍

Since there’s a number of questions in your post, I’ll try to help out with at least some of them. In the case of your Entry model with a number and a time you should create a scattered graph. Here you define data objects with x and y values as shown in my example below. It requires that each entry x has a corresponding y.
Have a look at the scatter chart.
http://www.chartjs.org/docs/#line-chart-scatter-line-charts

var d = new Date();
var scatterChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{
                x: new Date().setDate(d.getDate()-5),
                y: 0
            }, {
                x: new Date(),
                y: 10
            }, {
                x: new Date().setDate(d.getDate()5),
                y: 5
            }]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                    type: "time",
                    time: {
                        format: "HH:mm",
                        unit: 'hour',
                        unitStepSize: 2,
                        displayFormats: {
                            'minute': 'HH:mm', 
                            'hour': 'HH:mm'
                        },
                        tooltipFormat: 'HH:mm'
                    },
                    gridLines: {
                        display: false
                    }
                }],
        }
    }
});

Leave a comment