Trying to show two Thermometer charts on one page

Share RGraph:   Share or Like RGraph on Facebook!

« 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 stephen on 6th December 2015
Hello
I am trying to display two Thermostats on one page. I have tried the following code.
#
<html>
<title> test2 </title>
<head>

<script src='../test/libraries/RGraph.common.core.js' ></script>
<script src='../test/libraries/RGraph.thermometer.js' ></script>
<script src="RGraph.common.csv.js"></script>
<script>
    window.onload = function () {
      var water = new RGraph.Thermometer({
       id: 'cvs',
       min: 0,
       max: 100,
       value:40,
       options: {
            centerx: 100
         }
  }).draw()
        var rayburn = new RGraph.Thermometer({
       id: 'cvs',
       min: 0,
       max: 100,
       value:60,
       options: {
            centerx: 500
         }
  }).draw()
  }

</script>

</head>
<body>
<canvas id="cvs" width="100" height="400">
     [No canvas support]
</canvas>
</body>
</html>
#
but this only shows the last thermometer.
I have tried adding the following
#
  var thermo = new RGraph.Thermometer("cvs", 0,100,56)
       .Set('gutter.left',15)
       .Set('gutter.right',425)
#
but then I get nothing.

please can you help
thank you
Posted by Richard on 6th December 2015
Hi,

The centerx property is not a valid Thermometer property. Even if it were you are using the same value for both thermometers so the second would sit on top of the first - which is also what is probably happening now.

So you need to increase the width of your canvas to about 300 so that there's room for both thermometers. Then you need to adjust the size of the gutters to accommodate the thermometers. For example:

Thermometer 1:
     gutterLeft: 5
     gutterRight: 155

Thermometer 2:
     gutterLeft: 155
     gutterRight: 5

Eg

www.rgraph.net/fiddle/view.html/a-canvas-with-two-thermometers

Richard

Add a reply




« Back to message list