Need onmousemove implementation help

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Dan on 16th July 2013
I am attempting to implement the onmousemove event for use with the date/time scatter plot. Below is my code, everytime I run it, I get NaN for the value anywhere on the canvas, not just for the scatter graph. Any suggestions?
<code>

<div class="container-fluid">
    <canvas id='level'>[No canvas support]</canvas>
                
                
<!-- Begin script to adjust canvas dimensions upon a browser window resize -->
  <script>
(function() {
     var canvas = document.getElementById('level'),
             context = canvas.getContext('2d');
  drawScatter();
  drawTank();
  window.addEventListener('resize', resizeCanvas, false);
 
     function resizeCanvas() {
             canvas.width = window.innerWidth;
             canvas.height = 300;
   
             /**
              * Your drawings need to be inside this function otherwise they will be reset when
              * you resize the browser window and the canvas goes will be cleared.
              */
             drawScatter();
    drawTank();
     }
     resizeCanvas();

     function drawScatter() {
         var scatter = new RGraph.Scatter('level', <?php print($senscatter_string) ?>);
                                               
         // Set the start value to be the beginning of the day. If they're omitted time values default to 00:00:00
         scatter.Set('chart.xmin', '<?php print($start_date) ?>');

         // Set the end value to the end of the year
         scatter.Set('chart.xmax', '<?php print($end_date) ?>');
   scatter.Set('chart.ymax', 186);
 
   scatter.Set('chart.labels', ['<?php print($start_date)?>', ' ', ' ', ' ', ' ', '<?php print($half_date)?>', ' ', ' ',' ', ' ', '<?php print($end_date)?>']);
         scatter.Set('chart.line', true);
         scatter.Set('chart.line.colors', ['gray']);
         scatter.Set('chart.tickmarks', 'circle');
   scatter.Set('chart.title', 'Tank Level History');
   scatter.Set('chart.gutter.right', (.25*canvas.width));
   //RGraph.Effects.jQuery.Expand(scatter, {bounce: true});
         scatter.Draw();
    
 
  scatter.canvas.onmousemove = function (e)
     {
     var obj = e.target.__object__;
         
  var x = obj.getXValue(e);
     var y = obj.getYValue(e);
 
  //Convert Unix timestamp to YYYY-MM-DD HH:MM:SS format
   var time = x;
   
  var year = d.getFullYear();
     var month = ((d.getMonth()+1)>=10)? (d.getMonth()+1) : '0' + (d.getMonth()+1);
     var date = ((d.getDate())>=10)? (d.getDate()) : '0' + (d.getDate());
  var hour = ((d.getHours())>=10)? (d.getHours()) : '0' + (d.getHours());
  var minute = ((d.getMinutes())>=10)? (d.getMinutes()) : '0' + (d.getMinutes());
  var sec = ((d.getSeconds())>=10)? (d.getSeconds()) : '0' + (d.getSeconds());
  //If year is < 1971 convert to zero
     var time = ((d.getFullYear()<=1971)? '0' : (year+'/'+month+'/'+date+' '+hour+':'+minute+':'+sec));
     
 

     var t = document.getElementById("x");
  t.value=time;
 
     document.getElementById("y").value = y.toFixed(1);
 
  }
  }
  }
  function drawTank() {
  { var tank = new RGraph.VProgress('level', 0,186,<?php print($sensor_string) ?>);
  
    var grad = tank.context.createLinearGradient(0,0,0,<?php print($sensor_string) ?>);
             grad.addColorStop(0, 'blue');
        // light blue
        grad.addColorStop(0.75, '#8ED6FF');
        // dark blue
        grad.addColorStop(1, 'blue');
  
  

             tank.Set('chart.colors', [grad]);
             tank.Set('chart.title', 'Current Level');
             tank.Set('chart.scale.visible', true);
             tank.Set('chart.gutter.left', (.75*canvas.width));
             tank.Set('chart.gutter.right', (.10*canvas.width));
      tank.Set('chart.label.inner', true);
      //RGraph.Effects.VProgress.Grow(tank);
      tank.Draw();
  }
 
  
 
     }
  })();
   </script>
        
             <div style="position:relative; left: 25px">
             Level:
             <input type="text" id="y">
             Timestamp:
             <input type="text" id="x">
            
  
     
             </div>
Posted by RGraph support on 17th July 2013
Hi there,

1. Formatting your code will make it more readable and help you spot the issue.
2. Using a console will also help significantly.
3. What are the values of these variables:

var x = obj.getXValue(e);
var y = obj.getYValue(e);

4. You appear to using the 'd' variable as if it is a Date object though you haven't actually created it.


Richard, RGraph Support

Help support RGraph - single site license only £99!
   www.rgraph.net/license#single-site
Posted by Dan on 17th July 2013
Sorry about the messy code, I've cut and pasted and changed so many things. I used Chrome's console and it pretty much asked me the same about getXvalue.

I am trying to assign the x and y variables the values of the position of the mouse over the scatter graph. Am I not going about that correctly?

The following is the code I am working with now. I get the x and y values when the page first loads, but when I resize the browser window the console says:
"Uncaught TypeError: Object [object Object] has no method 'getXValue' test.php:2743
scatter.canvas.onmousemove test.php:2743"

<div>
       <div style="position:relative; left: 25px">
             Level:
             <input type="text" id="y">
             Timestamp:
             <input type="text" id="x">
  
     
       </div>
       <canvas id='level'></canvas>
                
<!-- Begin script to adjust canvas dimensions upon a browser window resize -->
                
               
<script>
  var canvas = document.getElementById('level'),
       context = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = 300;
 
  drawTank();
 
 
  function drawTank(){
  
   var tank = new RGraph.VProgress('level', 0,186,<?php print($sensor_string) ?>);
  
    var grad = tank.context.createLinearGradient(0,0,0,<?php print($sensor_string) ?>);
             grad.addColorStop(0, 'blue');
        // light blue
        grad.addColorStop(0.75, '#8ED6FF');
        // dark blue
        grad.addColorStop(1, 'blue');
  
   tank.Set('chart.colors', [grad]);
             tank.Set('chart.title', 'Current Level');
             tank.Set('chart.scale.visible', true);
             tank.Set('chart.gutter.left', (.75*canvas.width));
             tank.Set('chart.gutter.right', (.10*canvas.width));
       tank.Set('chart.label.inner', true);
       //RGraph.Effects.VProgress.Grow(tank);
       tank.Draw();
  }

  drawScatter();
 
  function drawScatter(){
  
   var scatter = new RGraph.Scatter('level', <?php print($senscatter_string) ?>);
                                               
          // Set the start value to be the beginning of the day. If they're omitted time values default to 00:00:00
          scatter.Set('chart.xmin', '<?php print($start_date) ?>');

          // Set the end value to the end of the year
          scatter.Set('chart.xmax', '<?php print($end_date) ?>');
   scatter.Set('chart.ymax', 186);
 
   scatter.Set('chart.labels', ['<?php print($start_date)?>', ' ', ' ', ' ', '<?php print($half_date)?>', ' ', ' ', ' ', '<?php print($end_date)?>']);
          scatter.Set('chart.line', true);
          scatter.Set('chart.line.colors', ['gray']);
          scatter.Set('chart.tickmarks', 'circle');
   scatter.Set('chart.title', 'Tank Level History');
   scatter.Set('chart.gutter.right', (.25*canvas.width));
   //RGraph.Effects.jQuery.Expand(scatter, {bounce: true});
          scatter.Draw();
  
  
  }
 
 
  (function() {
    
   window.addEventListener('resize', resizeCanvas, false);
 
       function resizeCanvas() {
              canvas.width = window.innerWidth;
    canvas.height = 300;
   
              drawScatter();
    drawTank();
  
      }
   resizeCanvas();
   
   
  function drawScatter(){
  
    var scatter = new RGraph.Scatter('level', <?php print($senscatter_string) ?>);
                                               
           // Set the start value to be the beginning of the day. If they're omitted time values default to 00:00:00
           scatter.Set('chart.xmin', '<?php print($start_date) ?>');

           // Set the end value to the end of the year
           scatter.Set('chart.xmax', '<?php print($end_date) ?>');
    scatter.Set('chart.ymax', 186);
 
    scatter.Set('chart.labels', ['<?php print($start_date)?>', ' ', ' ', ' ', '<?php print($half_date)?>', ' ', ' ', ' ', '<?php print($end_date)?>']);
           scatter.Set('chart.line', true);
           scatter.Set('chart.line.colors', ['gray']);
           scatter.Set('chart.tickmarks', 'circle');
    scatter.Set('chart.title', 'Tank Level History');
    scatter.Set('chart.gutter.right', (.25*canvas.width));
    //RGraph.Effects.jQuery.Expand(scatter, {bounce: true});
           scatter.Draw();
  
  
  }
  {
    var scatter = new RGraph.Scatter('level', <?php print($senscatter_string) ?>);
    scatter.Set('chart.xmin', '<?php print($start_date) ?>');
  
    // Set the end value to the end of the year
    scatter.Set('chart.xmax', '<?php print($end_date) ?>');
    scatter.Set('chart.ymax', 186);
   
    scatter.Set('chart.labels', ['<?php print($start_date)?>', ' ', ' ', ' ', '<?php print($half_date)?>', ' ', ' ', ' ', '<?php print($end_date)?>']);
    scatter.Set('chart.line', true);
    scatter.Set('chart.line.colors', ['gray']);
    scatter.Set('chart.tickmarks', 'circle');
    scatter.Set('chart.title', 'Tank Level History');
    scatter.Set('chart.gutter.right', (.25*canvas.width));
    //RGraph.Effects.jQuery.Expand(scatter, {bounce: true});
    scatter.Draw();
    scatter.canvas.onmousemove = function (e)
    {
     var obj = e.target.__object__;
     
     var x = obj.getXValue(e);
     var y = obj.getYValue(e);
    
     //Convert Unix timestamp to YYYY-MM-DD HH:MM:SS format
     var d = new Date(x);
      
     var year = d.getFullYear();
     var month = ((d.getMonth()+1)>=10)? (d.getMonth()+1) : '0' + (d.getMonth()+1);
     var date = ((d.getDate())>=10)? (d.getDate()) : '0' + (d.getDate());
     var hour = ((d.getHours())>=10)? (d.getHours()) : '0' + (d.getHours());
     var minute = ((d.getMinutes())>=10)? (d.getMinutes()) : '0' + (d.getMinutes());
     var sec = ((d.getSeconds())>=10)? (d.getSeconds()) : '0' + (d.getSeconds());
     //If year is < 1971 convert to zero
     var time = ((d.getFullYear()<=1971)? '0' : (year+'/'+month+'/'+date+' '+hour+':'+minute+':'+sec));
    
    
   
     var t = document.getElementById("x");
     t.value=time;
    
     document.getElementById("y").value = y.toFixed(1);
     //alert("The function called 'drawScatter' has been called.");
     }
    
  }
  function drawTank(){
   var tank = new RGraph.VProgress('level', 0,186,<?php print($sensor_string) ?>);
  
    var grad = tank.context.createLinearGradient(0,0,0,<?php print($sensor_string) ?>);
             grad.addColorStop(0, 'blue');
        // light blue
        grad.addColorStop(0.75, '#8ED6FF');
        // dark blue
        grad.addColorStop(1, 'blue');
  
             tank.Set('chart.colors', [grad]);
             tank.Set('chart.title', 'Current Level');
             tank.Set('chart.scale.visible', true);
             tank.Set('chart.gutter.left', (.75*canvas.width));
             tank.Set('chart.gutter.right', (.10*canvas.width));
       tank.Set('chart.label.inner', true);
       //RGraph.Effects.VProgress.Grow(tank);
       tank.Draw();
  }

  })();
   </script>
Posted by RGraph support on 17th July 2013
Hi there,

You can simply check the return values of the scatter.getXValue(e) and scatter.getYValue(e) calls.

Hint: Whilst you're trying to get it working - boil your code down to the absolute bare minimum necessary.




Richard, RGraph support
Posted by Dan on 17th July 2013
I believe that worked. I plan on simplifying things to make it look neater and more logical.

Thanks for taking a look, I was pouring over that all yesterday and I just don't have a strong enough grasp on javascript yet. I will be doing more research and studying to help me out, but thanks again for the second set of eyes.
Posted by RGraph support on 17th July 2013
Hi there,

> I plan on simplifying things to make it look neater and more logical.

It will help (or I might just be quite anal!) - plus there's two functions in RGraph that may be of use:

p(value)

This function is a little extension of the alert() function and shows the structure of variables and their type.

a(value)

Just a shortcut for alert().

Plus you will find the console.log() function very useful to log variables to your console ( www.rgraph.net/docs/howto-debugging-with-chrome.html ).





Richard, RGraph Support

Help support RGraph - single site license only £99!
   www.rgraph.net/license#single-site

Add a reply




« Back to message list