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.

    has anyone used any of the charting tools, like chartjs?

    Scheduled Pinned Locked Moved General Discussion
    18 Posts 5 Posters 6.0k Views 5 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 Away
      sdetweil
      last edited by

      i am making a module to add visualization of my friends water well system. I have a mobile app that does this, but it is hard to remember to look at the phone app…

      anyhow, there is a rest api to get the raw measurements (collected at once a minute 24/7)…

      for a 3 day view that is around 4200 entries.

      Sam

      How to add modules

      learning how to use browser developers window for css changes

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

        Mmm rainfc uses jquery sparkline.

        Mmm-rainfc at git

        Modules MMM-rainfc, MMM-bustimes, MMM-Harmony, MMM-Rijks

        S 1 Reply Last reply Reply Quote 0
        • S Away
          sdetweil @cirdan
          last edited by sdetweil

          @cirdan thanks… trying to stay away from jquery… and the chartjs works fine with 5 or 10 points…

          i have made some progress. the chart appears and has the right axis labels and values…

          the chart itself is drawn wrong… with the jagged line across the x-axis at the right Y-axis height, being drawn vertically on the right edge of the chart, top to bottom…

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          cirdanC lavolp3L 2 Replies Last reply Reply Quote 1
          • cirdanC Offline
            cirdan @sdetweil
            last edited by

            @sdetweil not too fond of jquery too. Had to add labels in a creative way. But looks like you are on your way to a chartjs implementation. No experience with that. I would like to see the result though. Perhaps I can rewrite mmm-rainfc. Also when you get stuck, a svg solution is also an possibility…user spotyourdeal did a rewrite of the sparkline into svg for mmm-rainfc

            Modules MMM-rainfc, MMM-bustimes, MMM-Harmony, MMM-Rijks

            1 Reply Last reply Reply Quote 0
            • lavolp3L Offline
              lavolp3 Module Developer @sdetweil
              last edited by

              @sdetweil Well well I was googling “chartjs” about the minute you wrote this down today! Ha! Great.
              I’d like to use it to make some amendments to MMM-rain-forecast and maybe get in my own graph.
              Have you seen MMM-chart, a MM cahrt template, which also seems to have examples of applications like yours.
              I haven’t taken a close look into any of it but I’ll do soon.
              Cheers and good luck!

              How to troubleshoot modules
              MMM-soccer v2, MMM-AVStock

              S 1 Reply Last reply Reply Quote 0
              • S Away
                sdetweil @lavolp3
                last edited by

                @lavolp3 said in has anyone used any of the charting tools, like chartjs?:

                MMM-chart,

                thanks… my data does not come back in JSON… but as CSV. with a unix milliseconds timestamp.

                one data set is a float value (could be truncated to int), one is an int.

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • S Away
                  sdetweil @sdetweil
                  last edited by sdetweil

                  ok, well, this was user error…

                  while I had an array for time based points, ONE element in the array was JUST a single value.

                  this caused the charting tool to act weird…

                  fixing the one data point resolved the issue…

                  now, I want to change the color of the fill area under certain conditions (low reservoir, or constant running water) to alert about trouble to be resolved…looks like that is some custom extension i have to write…

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 1
                  • S Away
                    sdetweil
                    last edited by sdetweil

                    here are some pics of the two charts

                    two charts upper right

                    two

                    two charts closer view
                    two closer

                    one chart
                    one chart

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    lavolp3L 1 Reply Last reply Reply Quote 2
                    • lavolp3L Offline
                      lavolp3 Module Developer @sdetweil
                      last edited by

                      @sdetweil Looking good! How did you realize it? MMM-Chart? Chartjs and your own module?

                      How to troubleshoot modules
                      MMM-soccer v2, MMM-AVStock

                      S 1 Reply Last reply Reply Quote 0
                      • S Away
                        sdetweil @lavolp3
                        last edited by sdetweil

                        @lavolp3 using chartjs and my own module. my data is not in JSON format required by MMM-Charts

                        here is the chartjs code
                        i have an structure, with arrays of points (by the sensor value), javascript Date, and value.
                        there are also arrays that contain the axis labels.

                        make div for chart
                        	var c = document.createElement("div");	
                        	c.style.width=self.config.width+"px";
                          	c.style.height=self.config.height+"px";
                        	if(!self.config.stacked)
                        	   c.style.display='inline-block';
                        	self.wrapper.appendChild(c);
                        
                                canvas= document.createElement("canvas");
                         	canvas.id="myChart"+this_pin;
                                c.appendChild(canvas);
                        
                        for(var pin_index=0; 
                              pin_index < self.config.Pins.length;  (how do you do less than in markup?, space after < )
                              pin_index++)
                        {
                        var this_pin=self.config.Pins[pin_index];
                        
                               self.charts[pin_index] = new Chart(canvas, {
                                      type: 'line',
                                      showLine: true,							
                                      data: {
                                        datasets: [
                                          {
                        		    xAxisID: 'dates',
                                            data: self.data[this_pin], 
                                            fill:true,
                                            borderColor: '#2196f3', 
                           		    backgroundColor: '#2196f3', 
                        	             },
                                        ]
                                      },
                                      options:	 { 
                        			legend: { display: false},
                        			tooltips: {
                        			    enabled: false,
                        			    displayColors: false
                        			  },
                        			responsive: false,
                        			elements: {
                        			    point: { radius: 0 },
                        			    line: {
                                		        tension: 0, // disables bezier curves
                        			     }
                                		},
                                        scales: {
                                          xAxes: [{
                        			id: 'dates',
                                            type: 'time',
                        			distribution: 'linear',
                                            scaleLabel: {
                                                display: true,
                                                labelString: self.config.labels[pin_index]+" - last "+self.config.dayrange+" days",
                        			fontColor: 'white'
                                            },
                        			gridLines: {
                        				display: false,
                        				zeroLineColor: '#ffcc33'
                        			},
                          		        time: {
                              		              unit: 'minute'
                                  		      },
                        			bounds: 'data',
                                            ticks: {
                        			display: false ,
                        			maxRotation: 90,
                        			source: 'data',
                        			maxTicksLimit: self.data[this_pin].length,                    },
                                          }],
                                          yAxes: [{
                                                display: true,
                                                scaleLabel: {
                                                    display: true,
                                                    labelString: self.config.yaxis_legend[pin_index],
                        			    fontColor: 'white'
                                                },
                        			gridLines: {
                        			   display: true,
                        			   color: "#FFFFFF",
                        			   zeroLineColor: '#ffcc33',
                        			   fontColor: 'white',									 
                                                   scaleFontColor: 'white',
                        			},
                        
                                            ticks: {
                        			beginAtZero: true,
                        			source: 'data',
                                                min: 0,
                        			fontColor: 'white'
                                            },
                                            }]
                                        },
                                      }
                                    });
                        }
                        

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        lavolp3L 1 Reply Last reply Reply Quote 1
                        • 1
                        • 2
                        • 1 / 2
                        • 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