How do I change the Gauge value without using the grow() effect?


« 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 mat on 11th June 2014
I want to change gauges' value , without using the .grow() method, since this one freezes my browser (latest chrome) in case the window is minimized for a long time. (or when the gagues are not visible, like when I browse in other tab).

if I do

gaugeObj.value= newvalue

it does not change the gauge value until I "click" the canvas.
How can I change it?
I've tried using the .draw() method, but it has some side-effects (some strange border around the gauges.). and maybe it is too much for that? Or the gauge need to be completely redrawn using .draw() method?


Thanks.
Posted by Richard on 11th June 2014
The Gauge won't change it's value until you redraw the canvas:

RGraph.redraw();

The reson you're getting the strange effect when you call the .draw() method is probably du to the canvas not being cleared first - so the second draw is being drawn on top of the first. So:


gaugeObj.value= newvalue;
RGraph.redraw(); // Could also use RGraph.redrawCanvas(gaugeObj.canvas) here too




Richard
Posted by mat on 11th June 2014
Thanks. Just a few questions:
First, does RGraph.redraw(), redraws ALL the RGraph charts ? (as it does not get any parameters?)

Second,
What is more efficient and generally better:

Rgraph.clear(gaugeObj.canvas);
gaugeObj.draw();

or:

RGraph.redraw(); // as you've suggested.


Posted by Richard on 12th June 2014
Yes the RGraph.redraw() method redraws all of the RGraph charts - as opposed to the redrawCanvas() function I mentioned.

For your second question if you only have 1 chart on the page the two methods are essentially the same. But if you have more then the former method only redraws one canvas whereas the redraw function redraws all the RGraph charts.



Richard
Posted by Don Bozarth on 4th August 2016
Why does this not update the gauge.

The label data is being updated and the values reflect the reading from the web server feed the data.

But, I cannot get the proper syntax to redraw the gauge with the new value at 310ms.

Here is the code. Like I said the label data being available at all times with new data is working fine.

<div hidden><label id="lbl336" opc-tag-txt='{"tag":"RemoteSCADAHosting.FuelConnectVPS.A_Speed.Value","config":{"formats":{"bad_q":"?????","bool_f":"False","bool_t":"True","float":"0","int":"0","string":"{0}"},"offset":0}}'></label></div>

<canvas id="cvs" width="300" height="300">
     [No canvas support]
</canvas>

<script>
     window.onload = function ()
     {
         var gauge = new RGraph.Gauge({
             id: 'cvs',
             min: -2000,
             max: 2000,
             value: [parseFloat($('#lbl336').text())],
             options: {
                 titleTop: 'Air Speed',
                 titleTopSize: '22',
                 titleTopFont: 'Impact',
                 titleTopColor: 'white',
                 titleBottom: 'Knots',
                 titleBottomSize: 'Italic 14',
                 titleBottomFont: 'Impact',
                 titleBottomColor: '#ccc',
                 titleBottomPos: 0.4,
                 backgroundColor: 'black',
                 backgroundGradient: true,
                 centerpinColor: '#666',
                 needleSize: [null, 50],
                 needleColors: ['Gradient(transparent:white:white:white:white:white)', 'Gradient(transparent:#d66:#d66:#d66:#d66)'],
                 textColor: 'white',
                 tickmarksBigColor: 'white',
                 tickmarksMediumColor: 'white',
                 tickmarksSmallColor: 'white',
                 borderOuter: '#666',
                 borderInner: '#333',
                 colorsRanges: [[160,200,'rgba(255,0,0,1)'], [120,160,'rgba(255,255,0,0.95']],
                 textAccessible: true
             }
         }).draw();
         setInterval(function () {
         gauge.set('value', [parseFloat($('#lbl336').text())]);
         RGraph.redraw();
         }, 310);
     };
</script>

I would deeply apprecaite the help. I am pondering using a commercial license from you. I like the graphs and functionality. Just need to get live data from my labels to update them.

Don Bozarth
don@fuelcnc.com
Posted by Richard on 4th August 2016
Hi there,

You could try changing your update function to use setTimeout() instead of setInterval():

var delay = 310;

function update ()
{
      gauge.set('value', [parseFloat($('#lbl336').text())]);
      RGraph.redraw();

     setTimeout(update, delay);
}

setTimeout(update, delay);


Also keep in mind that Chrome slows down tabs that are in the background, which can negatively impact timers. So see if using MSIE (for example) makes a difference.



Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website (get information on how to do it by clicking on the chain icon at the top right of the page)
Posted by Don Bozarth on 4th August 2016
Loads value correct once. To get new values I have to refresh the browser. Can you give the full text of the window.onload function. I have tried 100 ways.....


         <div hidden><label id="lbl336" opc-tag-txt='{"tag":"RemoteSCADAHosting.FuelConnectVPS.A_Speed.Value","config":{"formats":{"bad_q":"?????","bool_f":"False","bool_t":"True","float":"0","int":"0","string":"{0}"},"offset":0}}'></label></div>

<canvas id="cvs" width="300" height="300">
     [No canvas support]
</canvas>

<script>
     window.onload = function ()
  {
         var gauge = new RGraph.Gauge({
             id: 'cvs',
             min: -2000,
             max: 2000,
             value: [parseFloat($('#lbl336').text())],
             options: {
                 titleTop: 'Air Speed',
                 titleTopSize: '22',
                 titleTopFont: 'Impact',
                 titleTopColor: 'white',
                 titleBottom: 'Knots',
                 titleBottomSize: 'Italic 14',
                 titleBottomFont: 'Impact',
                 titleBottomColor: '#ccc',
                 titleBottomPos: 0.4,
                 backgroundColor: 'black',
                 backgroundGradient: true,
                 centerpinColor: '#666',
                 needleSize: [null, 50],
                 needleColors: ['Gradient(transparent:white:white:white:white:white)', 'Gradient(transparent:#d66:#d66:#d66:#d66)'],
                 textColor: 'white',
                 tickmarksBigColor: 'white',
                 tickmarksMediumColor: 'white',
                 tickmarksSmallColor: 'white',
                 borderOuter: '#666',
                 borderInner: '#333',
                 colorsRanges: [[160,200,'rgba(255,0,0,1)'], [120,160,'rgba(255,255,0,0.95']],
                 textAccessible: true
             }

         }).draw();
  
      function update (){
               var delay = 10;
               gauge.set('value', [parseFloat($('#lbl336').text())]);
               RGraph.redrawCanvas(gauge.canvas);
      setTimeout(update, delay);
            }
      var delay = 10;
      setTimeout(update, delay);
     };
         
</script>
Posted by Richard on 4th August 2016
Hi there,

Try this:

<script>
     window.onload = function ()
     {
         var gauge = new RGraph.Gauge({
             id: 'cvs',
             min: -2000,
             max: 2000,
             value: parseFloat($('#lbl336').text()),
             options: {
             }
         }).draw();



         var delay = 10;


      
         function update ()
         {
             gauge.set('value', parseFloat($('#lbl336').text()) );
             RGraph.redrawCanvas(gauge.canvas);

             setTimeout(update, delay);
         }

         setTimeout(update, delay);
     };
</script>




Richard

Posted by Don Bozarth on 4th August 2016
Lol. I did that too. And tried it once more with the same result. I must refresh each time.
Posted by Richard on 4th August 2016
Hi there,

Change the update function to this:

          function update ()
          {
              gauge.value = parseFloat($('#lbl336').text());
              RGraph.redrawCanvas(gauge.canvas);

              setTimeout(update, delay);
          }




Richard

Posted by Don Bozarth on 4th August 2016
That works great. Now, the next issue. Sorry. Just trying to understand your API.

I have 2 gauges now. seadogsystems.fuelcontrolconnect.com/dashboard_test.html

You will see that the left gauge does not draw.

Here is the code for the right gauge:

<div hidden><label id="lbl336" opc-tag-txt='{"tag":"RemoteSCADAHosting.FuelConnectVPS.A_Speed.Value","config":{"formats":{"bad_q":"?????","bool_f":"False","bool_t":"True","float":"0","int":"0","string":"{0}"},"offset":0}}'></label></div>

<canvas id="cvs" width="250" height="250">
     [No canvas support]
</canvas>

<script>
     window.onload = function ()
  {
         var gauge = new RGraph.Gauge({
             id: 'cvs',
             min: -2000,
             max: 2000,
             value: [parseFloat($('#lbl336').text())],
             options: {
                 titleTop: '',
                 titleTopSize: '18',
                 titleTopFont: 'Impact',
                 titleTopColor: '#555555',
                 titleBottom: 'IPM',
                 titleBottomSize: 'Italic 14',
                 titleBottomFont: 'Impact',
                 titleBottomColor: '#555555',
                 titleBottomPos: 0.7,
                 backgroundColor: '#dddddd',
                 backgroundGradient: true,
                 centerpinColor: '#bbbbbb',
                 needleSize: 80,
                 needleColors: ['Gradient(transparent:#555555:#555555:#555555:#555555:#555555)', 'Gradient(transparent:#d66:#d66:#d66:#d66)'],
                 textColor: '#888888',
     textSize: 8,
                 tickmarksBigColor: '#555555',
                 tickmarksMediumColor: '#555555',
                 tickmarksSmallColor: '#555555',
                 borderOuter: '#cccccc',
                 borderInner: '#999999',
                 colorsRanges: [[-2000,-1500,'rgba(255,0,0,1)'], [1500,2000,'rgba(255,255,0,0.95']],
                 textAccessible: true
             }

         }).draw();
           var delay = 10;


       
           function update ()
           {
               gauge.value = parseFloat($('#lbl336').text());
               RGraph.redrawCanvas(gauge.canvas);

               setTimeout(update, delay);
           }


          setTimeout(update, delay);
     };
         
</script>


Here is the code for the left gauge:

          <div hidden><label id="lbl436" opc-tag-txt='{"tag":"RemoteSCADAHosting.FuelConnectVPS.A_POS.Value","config":{"formats":{"bad_q":"?????","bool_f":"False","bool_t":"True","float":"0","int":"0","string":"{0}"},"offset":0}}'></label></div>

<canvas id="cvs2" width="250" height="250">
     [No canvas support]
</canvas>

<script>
     window.onload = function ()
  {
         var gauge2 = new RGraph.Gauge({
             id: 'cvs2',
             min: -2000,
             max: 2000,
             value: [parseFloat($('#lbl436').text())],
             options: {
                 titleTop: '',
                 titleTopSize: '18',
                 titleTopFont: 'Impact',
                 titleTopColor: '#555555',
                 titleBottom: 'IPM',
                 titleBottomSize: 'Italic 14',
                 titleBottomFont: 'Impact',
                 titleBottomColor: '#555555',
                 titleBottomPos: 0.7,
                 backgroundColor: '#dddddd',
                 backgroundGradient: true,
                 centerpinColor: '#bbbbbb',
                 needleSize: 80,
                 needleColors: ['Gradient(transparent:#555555:#555555:#555555:#555555:#555555)', 'Gradient(transparent:#d66:#d66:#d66:#d66)'],
                 textColor: '#888888',
     textSize: 8,
                 tickmarksBigColor: '#555555',
                 tickmarksMediumColor: '#555555',
                 tickmarksSmallColor: '#555555',
                 borderOuter: '#cccccc',
                 borderInner: '#999999',
                 colorsRanges: [[-2000,-1500,'rgba(255,0,0,1)'], [1500,2000,'rgba(255,255,0,0.95']],
                 textAccessible: true
             }

         }).draw();
           var delay = 10;


       
           function update ()
           {
               gauge2.value = parseFloat($('#lbl436').text());
               RGraph.redrawCanvas(gauge2.canvas);

               setTimeout(update, delay);
           }


          setTimeout(update, delay);
     };
         
</script>


I ensured both are using separate label data. And have changed the gauge Var to gauge and gauge2. I also changed the id: to cvs and cv2. Neither are sharing data. Both are in independent <div> areas.

Did I miss something?

BTW. I love your gauges. Look at the Unit A tab and compare to jqPlot and JustGage. You win hands down.
Posted by Don Bozarth on 4th August 2016
They start on around line 518...
Posted by Richard on 4th August 2016
Hi there,

When you assign the second window.onload function it overwrites the first - so the first never runs. Create both charts in a single window.onload function.



window.onload = function ()
{
     // Create the first chart
     var gauge1 = new RGraph.Gauge({
         id: 'cvs1',
         min: -2000,
         max: 2000,
         value: [parseFloat($('#lbl336').text())],
         options: {
         }
     }).draw();



     // Create the second chart
     var gauge2 = new RGraph.Gauge({
         id: 'cvs2',
         min: -2000,
         max: 2000,
         value: [parseFloat($('#lbl436').text())],
         options: {
         }
     }).draw();
}



Put the code that updates the chart after the code that creates each chart (I didn't add it here).





Richard

Posted by Don Bozarth on 4th August 2016
Well, it appears I have it from here....

Thanks for the fantastic support. Check out your handy work...

seadogsystems.fuelcontrolconnect.com/dashboard_test.html

Posted by Don Bozarth on 4th August 2016
Seems I spoke a moment too soon..

I want to display the value in each gauge.

valueText:

Results in an error:

this.valueToFixed is not a fuction. Line 744 in rgraph.gauge.js


How am I going wrong. I tried true because you show the parameter is binary "default: false". Same error. I set to a numeric int of 10 valueText: 10. Same error.

Thanks again.
Posted by Richard on 4th August 2016
Hi there,

This:
this.valueToFixed( ...

Should be this:

this.value.toFixed( ...

Not sure why it's like that - in the copy I have here it's as it should be. But just change your copy and that should work.




Richard

Posted by Don Bozarth on 18th August 2016
Richard,

I am having an issue. I have your gauges working fantastic. Thanks for the help. I would like to now use the line charting with live data but cannot figure out how.

I have tried using the dynamic versions.

What I would like is to have a line chart like this www.rgraph.net/demos/line-filled-blue.html using live data from a source like this:

<div hidden><label id="lbl436" opc-tag-txt='{"tag":"RemoteSCADAHosting.FuelConnectVPS.A_POS.Value","config":{"formats":{"bad_q":"?????","bool_f":"False","bool_t":"True","float":"0","int":"0","string":"{0}"},"offset":0}}'></label></div>

This works with gauges great.

Could you help with the proper syntax?

Any help is appreciated.
Posted by Richard on 18th August 2016
Hi there,

Going to need a lot more info than that - you're tag does not even contain any data that could be used on a line chart.

If you're only getting one value at a time from your server then you could use the RGraph.AJAX.getNumber() function:

RGraph.AJAX.getNumber('/getdata.html', function (num)
{
     // Do something with that number.
});


In the AJAX function you could add that number on to the end of an array, pop one off the front of the array and then redraw the Line chart with that array. That's the basis of these demos:

www.rgraph.net/demos/line-dynamic-updates.html
www.rgraph.net/demos/line-dynamic-updates-range.html
www.rgraph.net/demos/line-dynamic-scrolling-dual-canvas.html
www.rgraph.net/demos/line-dynamic-scrolling.html
www.rgraph.net/demos/line-effects-scrolling.html
www.rgraph.net/demos/line-dynamic-last-10-minutes.html



Richard

Posted by Don Bozarth on 18th August 2016
Thank you. I am starting to get it now.

Is there a way to smooth the lines? My graph appears blocky....

seadogsystems.fuelcontrolconnect.com/index.html

If not shown there is a click me button for a pop window on the "Energy Dashboard" tab.

My data is streaming at 100ms.

Also, I want a light blue fill but I also want a dark blue line. Is this possible?

Code behind the graph is in the main call for all RGraphs:

         var obj = null;
         var numvalues = 2000;
         var value = 0;
         var value2 = 0;

         // RGraph.array_pad(array, length[, value])
         var data1 = RGraph.arrayPad([], numvalues, null);
         var data2 = RGraph.arrayPad([], numvalues, null);
    
         function drawGraph ()
         {
             // "cache" this in a local variable
             var RG = RGraph;
             var ma = Math;
             var canvas = document.getElementById("dynamic");
             RG.clear(canvas);
            

             if (!obj) {
                 obj = new RGraph.Line({
                     id: 'dynamic',
                     data: [data1, data2],
                     options: {
                         xticks: 100,
                         backgroundGridAutofitNumvlines: 15,
                         title: 'Bandwidth used (Mb/s)',
                         titleXaxis: 'Bandwidth used',
                         titleXaxisPos: 0.5,
                         colors: ['black'],
                         linewidth: 0.5,
                         yaxispos: 'right',
                         ymax: 20,
                         ymin: -20,
                         noxaxis: true,
                         numyticks: 0,
                         filled: true,
                         filledRange: true,
                         filledRangeThreshold: 25,
                         filledRangeThresholdColors: ['red','#0c0'],
                         fillstyle: 'red',
                         colors: ['rgba(0,0,0,0)'],
                         tickmarks: null,
                         textAccessible: true,
                         scaleZerostart: true
                     }
                 }).draw();
             }

            
             value = parseFloat($('#A_Dash_Pos').text());
             value2 = 0
            
             obj.original_data[0].push(value);
             obj.original_data[1].push(value2);
            
             obj.original_data[0] = RG.arrayShift(obj.original_data[0]);
             obj.original_data[1] = RG.arrayShift(obj.original_data[1]);
            
             obj.draw();

            

             RGraph.Effects.updateCanvas(drawGraph);
         }



         drawGraph();

Lastly, I would like to have a timestamp at 1 sec intervals along the x axis. Possible?
Posted by Richard on 18th August 2016
Hi there,

> Is there a way to smooth the lines? My graph appears blocky....

You could try using the spline option.


> Also, I want a light blue fill but I also want a dark blue line. Is this possible?

Yes - you can set the colors property and also the fillstyle property. This chart has different colors for the stroke and fill:

www.rgraph.net/demos/line-effects-scrolling.html

> Lastly, I would like to have a timestamp at 1 sec intervals along the x axis. Possible?

Yes, though at every second the X axis will get rather crowded - even using angled text (for which you'll need to set the textAccessible option to false).

This chart does scrolling labels (it also misses labels out occasionally but that, I think, is due to timer inaccuracies - accommodate these and it would be OK).

www.rgraph.net/demos/line-dynamic-last-10-minutes.html

(watch it for 5 mins or so)



Richard

Add a reply

 




« Back to message list
RGraph on social media