Confused displaying a simple graph with Chart.js

[sunnykeerthi]

Hi,

I’m pretty new to Magic Mirror development. I am trying to develop a module using chart.js. I’m using the module provided at MMM-Chart.

Here is my code.

Module.register("MMM-Chart", {
    defaults: {
        width: 200,
        height: 200,
        chartConfig: {
            type: 'bar',
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        }
    },

    getScripts: function () {
        return ["modules/" + this.name + "/node_modules/chart.js/dist/Chart.bundle.min.js"];
    },

    start: function () {
        this.config = Object.assign({}, this.defaults, this.config);
        Log.info("Starting module: " + this.name);
    },

    getDom: function () {
        console.log("*****" + JSON.stringify(this.config.chartConfig));
        // Create wrapper element
        const wrapperEl = document.createElement("div");
        wrapperEl.setAttribute("style", "position: relative; display: inline-block;");

        // Create chart canvas
        const chartEl = document.createElement("canvas");
        chartEl.width = this.config.width;
        chartEl.height = this.config.height;

        // Init chart.js
        this.chart = new Chart(chartEl.getContext("2d"), this.config.chartConfig);

        // Append chart
        wrapperEl.appendChild(chartEl);

        return wrapperEl;
    }
});

When I run this code, there is no error popped in the console, also there is no chart displayed on my screen.

Here is what I’ve added to my config file.

{
module: "MMM-Chart",
position: "top_left"
}

please let me know on where am I going wrong and how can I fix this.

Thanks!!!

[sunnykeerthi]

This post is deleted!

[sdetweil]

here is the updated code from above.

Module.register("MMM-Chart", {
    defaults: {
        width:  200,
        height: 200,
        chartConfig: {
            type: 'bar',
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        }
    },

    getScripts: function () {
        return ["modules/" + this.name + "/node_modules/chart.js/dist/Chart.min.js"];  // use right file name
// note that YOU must install chartjs into your project 
// need package.json
    },

    start: function () {
        this.config = Object.assign({}, this.defaults, this.config);
        Log.info("Starting module: " + this.name);
    },

    getDom: function () {
        console.log("*****" + JSON.stringify(this.config.chartConfig));
        // Create wrapper element
        const wrapperEl = document.createElement("div");
        var e =document.createElement("div");    // add div to give size to chart area
        //e.setAttribute("style", "position: relative; display: inline-block;");  // position already set
        e.style.width = this.config.width+"px";   // set right style attribute with size in pixels
        e.style.height = this.config.height+"px";   // set right style attribute with size in pixels     
        wrapperEl.appendChild(e);
        // Create chart canvas
        const chartEl = document.createElement("canvas");
        // Append chart
        e.appendChild(chartEl);
        // Init chart.js
        this.chart = new Chart(chartEl, this.config.chartConfig);

        return wrapperEl;
    }
});