All geek questions in one place

Dynamically updating Google calibration information using jquery ajax - from json feed

I had a REQ from a client who wanted to see a graphical representation of sysInfo data on a LAMP server. For those of us who prefer visual, here's a live demo here .

I found sensors on Google charts, and in their demograph the chart moved. What I showed the client, so that they wanted. Just after I poked under the hood, I quickly realized that they just update it with random numbers. so I tried to do it myself. I searched the Internet, and I even posted my problems here, but no one answered.

So here is what I did ...

At first, I tried to update the google render visualization diagram with ajax. my json feed is back:

[
{"key":"label1","value":"50.25"},
{"key":"label2","value":"99.43"},
{"key":"label3","value":"4.47"},
{"key":"label4","value":"7.06"}
]

, , . , , . №1: API . json. , - : "", eval(), . , ...

script :

    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
    // load the visualization api & skin
    google.load('visualization', '1', {packages:['gauge']});
    // draw the initial chart from snapshot data for quick rendering
    google.setOnLoadCallback(drawChart); 
    // set global vars once DOM finishes
    $(document).ready(function() {
      chart = new google.visualization.Gauge(document.getElementById('chart_div'));
      options = {width: 400, height: 120,
          redFrom:  <?=$CODE_RED?>, redTo:100,
          yellowFrom:<?=$CODE_YEL?>, yellowTo:<?=$CODE_RED?>,
          greenFrom:<?=$CODE_GRN?>0, greenTo:<?=$CODE_YEL?>, 
          minorTicks: 5};
      // initialize ajax update of chart every 15 seconds
      setInterval("getStats ('./getJson.sysinfo.php?dash')", 15000); 
     });

:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows(8);
    data.setValue(0, 0, 'label1');
    data.setValue(0, 1, <?=number_format($X1,2) ?>);
    data.setValue(1, 0, 'label2');
    data.setValue(1, 1, <?=number_format($X2,2)?>);
    data.setValue(2, 0, 'label3');
    data.setValue(2, 1, <?=number_format($X3,2)?>);
    data.setValue(3, 0, 'label4');
    data.setValue(3, 1, <?=number_format($X4,3)?>);
    chart.draw(data, options);
 }

, , , setInterval() doc.ready - 15 . ajax - php-, json_encode(). script, , ! , json firebug. . :

function getStats (source) {
  $.ajax({
    url: source,
    type: 'POST',
    dataType: 'json',
    success: function(data) { refreshChart(data); },
    error: function (request, status, error) {
           alert("REQUEST:\t"+request
              +"\nSTATUS:\t"+status
              +"\nERROR:\t"+error);
     }
   });
 }

refreshChart() - , :

    function refreshChart(serverData) {
        var chartData = [];
        for(var i = 0; i < serverData.length; i++) {
    //      chartData.push([serverData[i][0], $.serverData[i][1]['value']]);
    //      chartData.push([serverData[i][0], $.serverData[i][1].val()]);
          chartData.push([serverData[i][0], serverData[i][1].value]);
        }
//  note2self[347] = "I tried the above a million different ways and firebug coming back 
//+ with: "missing ] after element list" on the function declaration line..." 
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Label');
        data.addColumn('number', 'Value');
        data.addRows(chartData);  
        chart.draw(data, options);
     } 

    </script>

, , DataTable , , setInterval (data.setValue(i, 1, serverData i), 1500) . , - json. , , , - ... ( , ), : " ..." . , . " , ", - , - " , ?" , . - . , . . nada, non, zylch, niet, ...

, , :

  • , . , ... jQuery , , , .draw() .
  • , , - jQuery, . , json parsing. , .
  • # 1 # 2 , undefined.
  • - , .Guage , , DataTable() - .
  • data.setValue(i, 1, serverData [i].value) AJAX() - refreshChart().
  • , , - , json . , . , , ... , . , chartData.push() . arrayName [] [] . , goset.setValue(). , success(), , , - , , :
for (var i = 0; i < data.length; i++) {
        if (i<4) {
            dashData.setValue(i, 0, jsonData[i].k);
            dashData.setValue(i, 1, jsonData[i].v);
             } ...

. , , , . drupal wordpress . LogicWizards.NET b/c. jQuery , google .

, :

<!-- /** Client-Side Scripts **/ --> 
<script type='text/javascript' src='http://www.google.com/jsapi'></script> 
<script type='text/javascript'> 
// load the visualization api & skin
google.load('visualization', '1', {packages:['gauge']});
// draw the initial chart from snapshot data for quick rendering
google.setOnLoadCallback(drawChart); //as soon as the API is loaded
// set global vars once DOM finishes
$(document).ready(function() {
  dash = new google.visualization.Gauge(document.getElementById('chart_div'));
  dashData = new google.visualization.DataTable();
  options = { width: 400, height: 120,
      redFrom:75, redTo:100,
      yellowFrom:50, yellowTo:75,
      greenFrom:00, greenTo:50, 
      minorTicks: 5};
 });

function drawChart() {
 // method to define initial chart
    dashData.addColumn('string', 'Label');
    dashData.addColumn('number', 'Value');
    dashData.addRows(8);
    dashData.setValue(0, 0, 'CPU');
    dashData.setValue(0, 1, 54.40);
    dashData.setValue(1, 0, 'RAM');
    dashData.setValue(1, 1, 99.54);
    dashData.setValue(2, 0, 'SWAP');
    dashData.setValue(2, 1, 4.25);
    dashData.setValue(3, 0, 'NET');
    dashData.setValue(3, 1, 0.402);
    dash.draw(dashData, options);
 }

function updateJSON (source) {
 // method to update all subsequent charts
 var jsonData = null; //there really no reason for this anymore (see below)
 $.ajax({ url:source, type:'POST', dataType:'json',
    success: function(data) { jsonData=data;
    for (var i = 0; i < data.length; i++) {
      if (i<4) {
          dashData.setValue(i, 0, jsonData[i].k);
          dashData.setValue(i, 1, jsonData[i].v); 
          if (i<3) { dash.draw(dashData, options); }
        }
           $("#"+jsonData[i].k).text(jsonData[i].v); 
      }
     },
    error: function (request, status, error) {
           alert("REQUEST:\t"+request
               +"\nSTATUS:\t"+status
                +"\nERROR:\t"+error);        }
   }); //end-ajax
  return jsonData; //obsolete: updates are now done through the success callback
 }

function isSet (variable) { // mimic the php function 
  return (typeof variable !== "undefined" && variable.length) ? 1 : 0;
 }

function setDelay(delay){ 
 // method to change timer sleep interval
    clearInterval(timer); //kill the last timer
    timer=setInterval(json,delay*1000); //delay is miliseconds
  }
</script>

, updateJSON(). . , , - - , . , StackedOverflow , . .

- , http://LogicWizards.NET. , , " ". ... , . . , . , , , ... , .

, -, .

,

~ -

+3
1

1.1 .

google.load('visualization', '1')


google.load('visualization', '1.1')
+1

Source: https://habr.com/ru/post/1779737/

More articles:


All Articles