[Chartjs]-Time series line chart is not displayed

by

5👍

✅

You are using outdated Chart Library or not including proper Chart Library, I am not sure what you are using in your actual code. Below code worked for me. Just add ChartJs bundle file to have all dependencies loaded.

/**
 * JS Code for the admin-panel/contact/reports.
 * 
 * It handles initializtion of the customer flow chart.
 */

'use strict';

jQuery(document).ready(function() {

    console.log('admin-panel/contact/reports');

    // Initialize the custome flow chart.
    initializeCustomerFlowChart();

});

function initializeCustomerFlowChart() {

    var dataSet = [];   
    for(var i = 0 ; i < 20; i++) {      
        var date = new Date();
        date = date.setDate( date.getDate() + i);
        dataSet.push({ t: date, y: i.toString() });
    }   

    var data = {
        datasets: [
            {
                label: 'Customer Flow',
                backgroundColor: 'rgba(255,0,0, 0.5)',
                borderColor: 'rgb(255,0,0)',
                data: dataSet,
                type: 'line',
                pointRadius : 0,
                fill: false,
                lineTension: 0,
                broderWidth: 2              
            }
        ]
    };

    var options = {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'series',
                ticks: {
                    source: 'data',
                    autoSkip: true
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'No. Of Customer'
                }
            }]
        },
        tooltips: {
            intersect: false,
            mode: 'index',
            callbacks: {
                label: function(tooltipItem, myData) {
                    var label = myData.datasets[tooltipItem.datasetIndex].label || '';
                    if (label) {
                        label += ': ';
                    }
                    label += parseFloat(tooltipItem.value).toFixed(2);
                    return label;
                }
            }
        }
    };

    var config = {
        type: 'bar',
        data: data, 
        options: options
    };  

    var context = document.getElementById('contact-reports-customer-flow-chart').getContext('2d');
    var chart = new Chart(context, config);

}

<canvas id="contact-reports-customer-flow-chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>

Hope this solves the issue.

Leave a comment