javascript - Highcharts gauge is render before the data is fetched by json -
i have came across strange problem. have web page 2 highcharts gauge module , retrieving data using json php script. json looks [{"pid":"1019","date":"15-10-2014","time":"02:52:36","temperature":"31","humidity":"65"}]
1) problem is, during first iteration when data retried isn't reflected @ module. [image]
2) during second iteration of data data displayed module there no color highlight and
3) during third iteration onwards module reflects data color highlight.
![[image]](https://www.dropbox.com/s/6jcut3mb3pseze2/1.jpg?dl=0){kind=link}
i think problem due async behavior of json. not sure it, newbie web programming. javascript following
var point, temperature, humidity, pressure, windspeed, winddirection, light, rainfall, elevation, lat, lang, bvolt, bcurrent, svolt, scurrent, temp; $.getjson("http://openweather.in/localpublish/livedata.php", function(data) { console.log(data); temperature = parsefloat(data[0].temperature); humidity = parsefloat(data[0].humidity); pressure = parsefloat(data[0].pressure); windspeed = parsefloat(data[0].windspeed); winddirection = parsefloat(data[0].winddirection); light = parsefloat(data[0].light); rainfall = parsefloat(data[0].rainfall); elevation = parsefloat(data[0].elevation); lat = parsefloat(data[0].lat); lang = parsefloat(data[0].lang); bvolt = parsefloat(data[0].bvolt); bcurrent = parsefloat(data[0].bcurrent); svolt = parsefloat(data[0].svolt); scurrent = parsefloat(data[0].scurrent); }); $(document).ready(function () { var gaugeoptions = { chart: { type: 'solidgauge' }, title: null, pane: { center: ['50%', '75%'], size: '120%', startangle: -90, endangle: 90, background: { backgroundcolor: (highcharts.theme && highcharts.theme.background2) || '#eee', innerradius: '60%', outerradius: '100%', shape: 'arc' } }, tooltip: { enabled: false }, // value axis yaxis: { linewidth: 0, minortickinterval: null, tickpixelinterval: 400, tickwidth: 0, title: { y: -70 }, labels: { y: 16 } }, plotoptions: { solidgauge: { datalabels: { y: -30, borderwidth: 0, usehtml: true } } } }; // temperature gauge $('#container-temperature').highcharts(highcharts.merge(gaugeoptions, { yaxis: { stops: [ [1, '#55bf3b'], // green [0.5, '#dddf0d'], // yellow [0.75, '#df5353'] // red ], min: 0, max: 50 }, credits: { enabled: false }, series: [{ name: 'temperature', data: [parsefloat(temperature)], datalabels: { format: '<div style="text-align:center"><span style="font-size:20px;color:' + ((highcharts.theme && highcharts.theme.contrasttextcolor) || 'black') + '">{y}</span><br/>' + '<span style="font-size:12px;color:silver">°c</span></div>' }, tooltip: { valuesuffix: '°c' } }] })); // humidity gauge $('#container-humidity').highcharts(highcharts.merge(gaugeoptions, { yaxis: { stops: [ [1, '#55bf3b'], // green [0.55, '#dddf0d'], // yellow [0.8, '#df5353'] // red ], min: 0, max: 100 }, credits: { enabled: false }, series: [{ name: 'humidity', data: [parsefloat(humidity)], datalabels: { format: '<div style="text-align:center"><span style="font-size:20px;color:' + ((highcharts.theme && highcharts.theme.contrasttextcolor) || 'black') + '">{y:.1f}</span><br/>' + '<span style="font-size:12px;color:silver">%rh</span></div>' }, tooltip: { valuesuffix: '%rh' } }] })); // atmospheric pressure gauge $('#container-pressure').highcharts(highcharts.merge(gaugeoptions, { yaxis: { stops: [ [1, '#55bf3b'], // green [0.55, '#df5353'] // red ], min: 0, max: 20 }, credits: { enabled: false }, series: [{ name: 'atmospheric pressure', data: [parsefloat(pressure)], datalabels: { format: '<div style="text-align:center"><span style="font-size:20px;color:' + ((highcharts.theme && highcharts.theme.contrasttextcolor) || 'black') + '">{y:.1f}</span><br/>' + '<span style="font-size:12px;color:silver">* 100 hbar</span></div>' }, tooltip: { valuesuffix: 'hpa' } }] })); setinterval(function () { $.getjson("http://openweather.in/localpublish/livedata.php", function(data) { console.log(data); temperature = data[0].temperature; humidity = data[0].humidity; pressure = data[0].pressure; windspeed = data[0].windspeed; winddirection = data[0].winddirection; light = data[0].light; rainfall = data[0].rainfall; elevation = data[0].elevation; lat = data[0].lat; lang = data[0].lang; bvolt = data[0].bvolt; bcurrent = data[0].bcurrent; svolt = data[0].svolt; scurrent = data[0].scurrent; }); point = $('#container-temperature').highcharts().series[0].points[0]; point.update(parsefloat(temperature)); point = $('#container-humidity').highcharts().series[0].points[0]; point.update(parsefloat(humidity)); point = $('#container-pressure').highcharts().series[0].points[0]; point.update(parsefloat(pressure)); /* point = $('#container-windspeed').highcharts().series[0].points[0]; point.update(windspeed); point = $('#container-winddirection').highcharts().series[0].points[0]; point.update(winddirection); point = $('#container-light').highcharts().series[0].points[0]; point.update(light); point = $('#container-rainfall').highcharts().series[0].points[0]; point.update(rainfall); point = $('#container-elevation').highcharts().series[0].points[0]; point.update(elevation); point = $('#').highcharts().series[0].points[0]; point.update(humidity); temp = bvolt + ' v'; $('#disp-batteryv').val(temp); temp = bcurrent + ' ma'; $('#disp-batteryc').val(temp); temp = svolt + ' v'; $('#disp-solarv').val(temp); temp = scurrent + ' ma'; $('#disp-solarc').val(temp); */ }, 1*60*1000); });
try this
var point, temperature, humidity, pressure, windspeed, winddirection, light, rainfall, elevation, lat, lang, bvolt, bcurrent, svolt, scurrent, temp; $.getjson("http://openweather.in/localpublish/livedata.php", function(data) { console.log(data); temperature = parsefloat(data[0].temperature); humidity = parsefloat(data[0].humidity); pressure = parsefloat(data[0].pressure); windspeed = parsefloat(data[0].windspeed); winddirection = parsefloat(data[0].winddirection); light = parsefloat(data[0].light); rainfall = parsefloat(data[0].rainfall); elevation = parsefloat(data[0].elevation); lat = parsefloat(data[0].lat); lang = parsefloat(data[0].lang); bvolt = parsefloat(data[0].bvolt); bcurrent = parsefloat(data[0].bcurrent); svolt = parsefloat(data[0].svolt); scurrent = parsefloat(data[0].scurrent); var gaugeoptions = { chart: { type: 'solidgauge' }, title: null, pane: { center: ['50%', '75%'], size: '120%', startangle: -90, endangle: 90, background: { backgroundcolor: (highcharts.theme && highcharts.theme.background2) || '#eee', innerradius: '60%', outerradius: '100%', shape: 'arc' } }, tooltip: { enabled: false }, // value axis yaxis: { linewidth: 0, minortickinterval: null, tickpixelinterval: 400, tickwidth: 0, title: { y: -70 }, labels: { y: 16 } }, plotoptions: { solidgauge: { datalabels: { y: -30, borderwidth: 0, usehtml: true } } } }; // temperature gauge $('#container-temperature').highcharts(highcharts.merge(gaugeoptions, { yaxis: { stops: [ [1, '#55bf3b'], // green [0.5, '#dddf0d'], // yellow [0.75, '#df5353'] // red ], min: 0, max: 50 }, credits: { enabled: false }, series: [{ name: 'temperature', data: [parsefloat(temperature)], datalabels: { format: '{y}
' + '°c' }, tooltip: { valuesuffix: '°c' } }] })); // humidity gauge $('#container-humidity').highcharts(highcharts.merge(gaugeoptions, { yaxis: { stops: [ [1, '#55bf3b'], // green [0.55, '#dddf0d'], // yellow [0.8, '#df5353'] // red ], min: 0, max: 100 }, credits: { enabled: false }, series: [{ name: 'humidity', data: [parsefloat(humidity)], datalabels: { format: '{y:.1f}
' + '%rh' }, tooltip: { valuesuffix: '%rh' } }] })); // atmospheric pressure gauge $('#container-pressure').highcharts(highcharts.merge(gaugeoptions, { yaxis: { stops: [ [1, '#55bf3b'], // green [0.55, '#df5353'] // red ], min: 0, max: 20 }, credits: { enabled: false }, series: [{ name: 'atmospheric pressure', data: [parsefloat(pressure)], datalabels: { format: '{y:.1f}
' + '* 100 hbar' }, tooltip: { valuesuffix: 'hpa' } }] })); setinterval(function () { $.getjson("http://openweather.in/localpublish/livedata.php", function(data) { console.log(data); temperature = data[0].temperature; humidity = data[0].humidity; pressure = data[0].pressure; windspeed = data[0].windspeed; winddirection = data[0].winddirection; light = data[0].light; rainfall = data[0].rainfall; elevation = data[0].elevation; lat = data[0].lat; lang = data[0].lang; bvolt = data[0].bvolt; bcurrent = data[0].bcurrent; svolt = data[0].svolt; scurrent = data[0].scurrent; }); point = $('#container-temperature').highcharts().series[0].points[0]; point.update(parsefloat(temperature)); point = $('#container-humidity').highcharts().series[0].points[0]; point.update(parsefloat(humidity)); point = $('#container-pressure').highcharts().series[0].points[0]; point.update(parsefloat(pressure)); /* point = $('#container-windspeed').highcharts().series[0].points[0]; point.update(windspeed); point = $('#container-winddirection').highcharts().series[0].points[0]; point.update(winddirection); point = $('#container-light').highcharts().series[0].points[0]; point.update(light); point = $('#container-rainfall').highcharts().series[0].points[0]; point.update(rainfall); point = $('#container-elevation').highcharts().series[0].points[0]; point.update(elevation); point = $('#').highcharts().series[0].points[0]; point.update(humidity); temp = bvolt + ' v'; $('#disp-batteryv').val(temp); temp = bcurrent + ' ma'; $('#disp-batteryc').val(temp); temp = svolt + ' v'; $('#disp-solarv').val(temp); temp = scurrent + ' ma'; $('#disp-solarc').val(temp); */ }, 1*60*1000); });
Comments
Post a Comment