CODEWITHSUNDEEP
javascriptajaxchart.jsmomentjs
af3ld
af3ld

Reputation: 794

Dynamically created Chart.js chart overpopulating time based x-axis?

I want to create a chart.js line chart with values on the y axis and dates on the x-axis. However, when I populate the chart, the x-axis is filled with ticks that shouldn't be included (you can see my data smooshed to the far right). When I log into chart.data.labels everything seems correct; this is the output: Array(3) ["10/23/2020, 12:00:00 AM", "10/27/2020, 12:00:00 AM", "10/28/2020, 12:00:00 AM"].

enter image description here

When I comment out the time xAxes[0].type=time and xAxes.time the data loads as expected, however all the labels are stacked in the left corner of the x-axis. I am unsure how to proceed to make the chart only display the date labels. I've included my code below:

    var chart = new Chart(document.getElementById("grade-chart"), {
        type: 'line',
        options: {
            legend: {display: true},
            title: {
                display: true,
                text: 'Project Grading'
            },
            scales: {
                xAxes: [{
                    type: 'time',
                    distribution: 'linear',
                    scaleLabel: {
                        display: true,
                        labelString: 'Date Surveyed'
                    },
                    time: {
                        unit: 'month',
                        bounds: 'data',
                        minUnit: 'day',
                        ticks: {
                            source: 'labels'
                        }
                    },
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Scores'
                    },
                    ticks: {
                        beginAtZero: true,
                        max: 100
                    }
                }]
            },
        }
    });

    $.ajax({
        method: 'get',
        url: '/admin/project/project_grade_detail_chart/project_id/' + $("#project-id").val(),
        dataType: 'json',
        success: function(json){
            var dates = json['dates'].map(v => new Date(v).toLocaleString())
            chart.data.labels.push(dates);
            Object.keys(json).forEach(function(name) {
                if(name != 'dates') {
                    chart.data.datasets.push({
                        data: json[name].map((value, i) => ({'t': dates[i], 'y': value})),
                        label: name,
                        borderColor: randColor(),
                        fill: false
                    });
                }
            });
            chart.update(0);
            console.log(chart.data.labels)
        }
    });

edit: I tried adding autoskip and maxticks per https://stackoverflow.com/a/39326127/5574063, but it was not successful

Upvotes: 3

Views: 1122

Answers (1)

uminder
uminder

Reputation: 26150

The problem is due to the option ticks.source: 'labels' defined on your x-axis. You should change it to ticks.source: 'data' or simply omit it and let Chart.js choose the best option.

Also when providing the data as data points using t and y properties, there's no need to define chart.data.labels.

success: function(json){
  var dates = json['dates'].map(v => new Date(v).toLocaleString())
  chart.data.labels.push(dates); // remove this line
  ...

Upvotes: 1

Related Questions