javascript - Display image based on response from getJSON data -


i new web development , trying figure out how display image based on response getjson. data being received rest api. data stored in 2 arrays, humid , date. humid contains humidity string. humid array converted integer array- humid_final. wanted know how display image on screen based on particular value in humid_final array.

if latest entry in humid_final array= 50 display image a. else display image b. (where image a,b static images stored locally).

$(function updat() {    var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";    var humid = [],      date = [],      humid_final = []      $.getjson(url, function (json) {        $(json['items']).each(function(i, data) {        //store indicator name                // fill date array        humid.push(data.humidity);        // fill string data array         date.push(data.date);      });        console.log(date);      // query send string need convert numbers      (var = 0; < humid.length; i++) {        if (humid[i] != null) {          humid_final.push(parsefloat(humid[i]))        } else {         humid_final.push(null)        };      }        var chart = new highcharts.chart({        chart: {          type: 'spline',          renderto: 'container'        },        title: {          text: 'indicatorname'        },        tooltip: {          valuedecimals: 2,          pointformat: '<span style="color:{point.color}">\u25cf</span> {series.name}: <b>{point.y}%</b><br/>'        },        plotoptions: {          series: {            marker: {              enabled: false            }          }        },        subtitle: {          text: 'source: world bank data'        },        xaxis: {          categories: date //.reverse() have min year on left         },        series: [{          name: 'humidity',          data: humid_final //        }]      });      }); //getjson method    settimeout(updat, 3000);  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  <script src="https://code.highcharts.com/highcharts.js"></script>  <script src="https://code.highcharts.com/modules/exporting.js"></script>  <script src= "opendataapi.js"></script>  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

you're there. give image tag in html id , make point standard image imageb <img id="changingimage" src="./images/imageb.png" />

then let's try translate ...

if latest entry in humid_final array= 50 display image a. else display image b.

into javascript:

if (humid_final[humid_final.length-1] == 50) {     document.getelementbyid('changingimage').src="./images/imagea.png"; }

Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more