MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Confused displaying a simple graph with Chart.js



  • 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!!!



  • This post is deleted!


  • 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;
        }
    });
    

Log in to reply