Chartjs-Unable to see the lines in chart.js

by

0👍

✅

You are telling chart.js which custom key it needs to look for for the y axis but not for the x axis. So chart.js is looking for the x key in the object.

Changing your parsing config to include the xAxisKey: 'time' will fix your issue.

<script>
    var updateInterval = 20 //in ms
    var numberElements = 5
    var values = []

    //Globals
    var updateCount = 0
    var endpoint = '/api/chart/data'
    var ctx = document.getElementById('myChart');
    var gchart = new Chart(ctx, {
        type: 'line',
        data: {
            label: [],
            datasets: [{

                label: 'Wholesale 24 K',
                data: [],
                fill: true,
                borderColor: 'rgb(245, 0, 0)',
                tension: 0.1,
                parsing: {
                    yAxisKey: 'b1',
                    xAxisKey: 'time'
                }
            }, {
                label: 'Retail 24 K',
                data: [],
                fill: true,
                borderColor: 'rgb(245, 225, 0)',
                tension: 0.1,
                parsing: {
                    yAxisKey: 's24K',
                    xAxisKey: 'time'
                }
            }]
        }, options: {
            interaction: {
                mode: 'index',
            }
        },
        
    })

    function addData(chart, label, data) {
        console.log(data)
        chart.data.labels.push(label);
        chart.data.datasets.forEach((dataset) => {
            dataset.data.push(data);
        });
        if (updateCount > numberElements) {
            gchart.data.labels.shift();
            gchart.data.datasets[0].data.shift();
            gchart.data.datasets[1].data.shift();
        }
        else updateCount++;
        chart.update();
    }

    setInterval(ajaxcal, 1000)
    function ajaxcal() {
        $.ajax({
            method: "GET",
            url: endpoint,
            success: function (data) {
                var lal = data.time
                addData(gchart, lal, data)
            },
            error: function (error_data) {
                console.log(error_data)
                console.log("Failed to fetch chart data from " + endpoint + "!")
            },

        })
    }
</script>

Leave a comment