MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Confused displaying a simple graph with Chart.js

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    3 Posts 2 Posters 1.3k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Offline
      sunnykeerthi
      last edited by

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

      1 Reply Last reply Reply Quote 0
      • S Offline
        sunnykeerthi
        last edited by

        This post is deleted!
        1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil
          last edited by

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

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • 1 / 1
          • First post
            Last post
          Enjoying MagicMirror? Please consider a donation!
          MagicMirror created by Michael Teeuw.
          Forum managed by Sam, technical setup by Karsten.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy