Jump to content

How to update a data attribute


viiartz
 Share

Recommended Posts

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 by viiartz
Link to comment
Share on other sites

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"}
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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 by Chikwado
Link to comment
Share on other sites

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);
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...