viiartz Posted July 15, 2016 Share Posted July 15, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted July 15, 2016 Share Posted July 15, 2016 Are you getting value for mintemp showing In console.log? Also div is not closed properly this <div id="gg2" class="gauge" data-value="999"</div> Should be <div id="gg2" class="gauge" data-value="999"></div> Link to comment Share on other sites More sharing options...
viiartz Posted July 15, 2016 Author Share Posted July 15, 2016 Yes, I am! Sorry about the non closed tag, the mistake was made in the paste and copy the edit process! 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 More sharing options...
viiartz Posted July 15, 2016 Author Share Posted 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! <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 More sharing options...
Chikwado Posted July 15, 2016 Share Posted July 15, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted July 15, 2016 Share Posted 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); Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now