How to update a data attribute

viiartz · July 15, 2016

Hi, I'm new to javascript soI'mm not quite sure how to make the following code to work.

I found this JS library (justgage.com) that i want to use to show the max and min temperatures using the gages! I retrieve the max and min temps in a JSON object and I would like to pass (the max temp in this case) to the gage function using the data attribute 'data-value' (which is initialised with the value 999). How do I use the value in the maxTemp variable (how a passed) to be used by the justgage code. I tried using this command "document.getElementById("gg2").setAttribute("data-value",minTemp);" but that didn't work, so I'm at a loss as I said I'm new to javascript. The other problem is that I don't know what to search for on the JS forums out there.

<body>
  <div class="container">
        <div id="gg2" class="gauge" data-value="999"</div>
  </div>
  <script src="../raphael-2.1.4.min.js"></script>
  <script src="../justgage.js"></script>    
   
<script type="text/javascript"> 
  
      $(document).ready(function() {
          //justgage code
          
var dflt = {
            min: 0,
            max: 200,
            donut: false,
            gaugeWidthScale: 0.6,
            counter: true,
            hideInnerShadow: true
          }
         
          var gg2 = new JustGage({
            id: 'gg2',
            title: 'data-attributes',
            defaults: dflt
          });


          getData(); 
          
          // check for new updates
          setInterval('getData()',5000);
   
      });


      function getData() {  
          $.getJSON('http://api.thingspeak.com/channels/132600/feed/last.json?timezone=Australia/Brisbane' function (json_data) {
            var maxTemp = json_data.field1;
            var minTemp = json_data.field3;
            // console.log(json_data);
            // console.log(minTemp);
            // console.log(maxTemp);
            document.getElementById("gg2").setAttribute("data-value",minTemp); //Min temp   
         });  
        
      }
          
</script> 
</body>

Edited July 15, 2016 by viiartz

dsonesuk · July 15, 2016

Are you getting value for mintemp showing In console.log?

Also div is not closed properly this

Should be

viiartz · July 15, 2016

Yes, I am!

Sorry about the non closed tag, the mistake was made in the paste and copy the edit process! :facepalm:

This the JSON object I'm retrieving.

{"created_at":"2016-07-15T19:55:14+10:00","entry_id":1249,"field1":"17.37","field2":"15-Jul-2016 10:15:57","field3":"15","field4":"14-Jul-2016 21:02:23"}

viiartz · July 15, 2016

Also, in one of the example they say you can use javascript and the 'var gg2' has an addition attribute 'value'. Not sure if that helps (see code below)

var gg2 = new JustGage({

id: 'gg2',

value: 999; <-----

title: 'data-attributes',

defaults: dflt

});

The Html code does not have the 'data-value' property

here is the original code from on of the examples. Two gages, one uses "data-attributes" the other uses a "javascript call" either way I'm clueless! :Unsure:

<body>
  <div class="container">
    <div id="gg1" class="gauge"></div>
    <div id="gg2" class="gauge" data-value="25"></div>
  </div>
  <script src="../raphael-2.1.4.min.js"></script>
  <script src="../justgage.js"></script>
  <script>
  document.addEventListener("DOMContentLoaded", function(event) {

    var dflt = {
      min: 0,
      max: 200,
      donut: true,
      gaugeWidthScale: 0.6,
      counter: true,
      hideInnerShadow: true
    }

    var gg1 = new JustGage({
      id: 'gg1',
      value: 125,
      title: 'javascript call',
      defaults: dflt
    });

    var gg2 = new JustGage({
      id: 'gg2',
      title: 'data-attributes',
      defaults: dflt
    });

  });
  </script>
</body>

Chikwado · July 15, 2016

Your external file has to be in the <head> </head> section. Did you create that javascript external file by yourself? We do not know what is in that external file. Knowing a command in that external file will help us guide or help you on what you are trying to do. If possible show them.

Edited July 15, 2016 by Chikwado

Ingolme · July 15, 2016

It looks like there's a refresh method which can be called like this:

gg2.refresh(minTemp);

Please don't use evaluated strings in your setInterval calls, it's really inefficient, try passing a function reference instead:

setInterval(getData,5000);

Sign In

How to update a data attribute

Recommended Posts

viiartz

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

viiartz

Link to comment

Share on other sites

viiartz

Link to comment

Share on other sites

Chikwado

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity