All gauges display the same value

[Shane Patel]

I've created a number of different gauges all with different ID's (temp-arc-gauge, press-arc-gauge, and hum-arc-gauge) however when i call my json code to populate the charts, all 3 charts display the very last data value which should only be shown in hum-arc-gauge. So by calling the set method, it sets the value for all charts on the screen even though i am getting a single instance of each. Is this an error on my part or with the chart library? Thanks for your help!

<div id="temp-arc-gauge" class="arc-gauge-7" data-height="180" data-value="0" style="float: left; width: 300px;">
    <div class="arc-gauge-text">
      <span class="value">0</span>&deg;
      <p class="small">celcius</p>
    </div>
</div>
<script>
    $('#temp-arc-gauge').arcGauge({
       colors: {
          0:   '#003366', // 0  calculated as display value / max value 
          0.2125:  '#33cc00', // 17deg
          0.425:  '#ffff66', // 34deg
          0.50: '#ff9966', // 40deg
          0.625:  '#ff3333'  // 50+deg
       },
       minValue: -20,
       maxValue:  80,
       onchange: function (value) {
          $('.arc-gauge-text .value').text(value);
       }
    });
</script>

<div id="press-arc-gauge" class="arc-gauge-7" data-height="180" data-value="0" style="float: left; width: 300px;">
    <div class="arc-gauge-text">
        <span class="value">0</span>
        <p class="small">millibars</p>
    </div>
</div>
<script>
    $('#press-arc-gauge').arcGauge({
       colors: {
      0.40:   '#003366', // 500mbar  calculated as display value / max value 
      0:  '#ff3333'  // 
   },
   minValue: 337,   //top of everest pressure
   maxValue:  1036, //pacific ocean pressure
   onchange: function (value) {
      $('.arc-gauge-text .value').text(value);
   }
});
</script>   

<div id="hum-arc-gauge" class="arc-gauge-7" data-height="180" data-value="0" style="float: left; width: 300px;">
    <div class="arc-gauge-text">
        <span class="value">0</span>%
        <p class="small">percent</p>
    </div>
</div>
<script>
    $('#hum-arc-gauge').arcGauge({
       colors: {
      0:    '#33cc00', // r  calculated as display value / max value 
      0.75: '#ff9966'  // 
   },
   minValue: 0,   //top of everest pressure
   maxValue:  100, //pacific ocean pressure
   onchange: function (value) {
      $('.arc-gauge-text .value').text(value);
   }
});
</script>   

<script> var myVar = setInterval(function(){ myTimer() }, 1000);

    function myTimer() {
        $.ajax({
            type: 'GET', 
            url: "https://sapoemd2b412a60.us2.hana.ondemand.com/SensorDataFetch/dbfetch.xsjs", 
            dataType: "JSON",
            //headers: {"No 'Access-Control-Allow-Origin":"*"},
            //crossDomain: true,
            success: function(data){
            //console.log(data.results["0"].device);
            //console.log(data);
            //console.log($('.arc-gauge-7'));
            //var tgauge = $('.arc-gauge-7')[0];
            var tgauge = $('#temp-arc-gauge')[0];
            console.log(tgauge);
            tgauge.set(data.results["0"].temperature);
            console.log(data.results["0"].temperature);
            var pgauge = $('#press-arc-gauge')[0];
            pgauge.set(data.results["0"].pressure);
            console.log(data.results["0"].pressure);
            var hgauge = $('#hum-arc-gauge')[0];
            hgauge.set(data.results["0"].humidity);
            console.log(data.results["0"].humidity);
          }
        });
    }
</script>

[Shane Patel]

<script>
    var myVar = setInterval(function(){ myTimer() }, 1000);

    function myTimer() {
        $.ajax({
            type: 'GET', 
            url: "https://sapoemd2b412a60.us2.hana.ondemand.com/SensorDataFetch/dbfetch.xsjs", 
            dataType: "JSON",
            //headers: {"No 'Access-Control-Allow-Origin":"*"},
            //crossDomain: true,
            success: function(data){
            //console.log(data.results["0"].device);
            //console.log(data);
            //console.log($('.arc-gauge-7'));
            //var tgauge = $('.arc-gauge-7')[0];
            var tgauge = $('#temp-arc-gauge')[0];
            console.log(tgauge);
            tgauge.set(data.results["0"].temperature);
            console.log(data.results["0"].temperature);
            var pgauge = $('#press-arc-gauge')[0];
            pgauge.set(data.results["0"].pressure);
            console.log(data.results["0"].pressure);
            var hgauge = $('#hum-arc-gauge')[0];
            hgauge.set(data.results["0"].humidity);
            console.log(data.results["0"].humidity);
          }
        });
    }
</script>

[Shane Patel]

Problem was with CSS. Needed to create lines for the value fields. Everything works =)

[Indri Muska]

Happy to hear you've solved the issue! :)