Wskaźniki od Google

Z racji innych zajęć (automatyka przemysłowa, budynkowa, elektronika) interesują mnie sposoby prezentowania danych na stronach www. Ostatnio wpadł mi w oko wskaźnik, który jest na Google Developers https://www.rafalrebacz.pl/examples/gauges/gauge1.html. Można napisać – „śliczności” bo tak ładnie się prezentuje. Schludny, czytelny, animowany (zmienia wskazanie pobierając dane w tle) – nic tylko brać.

Przykład jak wyglądają wskaźniki:

Poniżej odrobinę przerobione wskaźniki:

Więcej na ten temat można znaleźć na https://developers.google.com/chart/interactive/docs/gallery/gauge

Poniżej przykład innego sformatowania wskaźników:

Pełny kod strony ze wskaźnikami:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["gauge"]});
      google.setOnLoadCallback(drawChart1);
      google.setOnLoadCallback(drawChart2);
      
      function drawChart1() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temp. WE', 80]
        ]);

        var options = {
          width: 400, height: 220,
          redFrom: 90, redTo: 100,
          yellowFrom:65, yellowTo: 90,
          minorTicks: 5
        };

        var chart1 = new google.visualization.Gauge(document.getElementById('chart_div1'));

        chart1.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 60 + Math.round(20 * Math.random()));
          chart12.draw(data, options);
        }, 15000)
        }

      function drawChart2() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temp. WY', 55]
        ]);

        var options = {
          width: 400, height: 320,
          redFrom: 70, redTo: 100,
          redColor: '#FF0000',
          yellowFrom:55, yellowTo: 70,
          yellowColor: '#FFFF00',
          minorTicks: 10,
          greenFrom: 40, greenTo: 55,
          greenColor: '#00AA00',
          max: 100,
          min: -100
        };

        var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));

        chart2.draw(data, options);

        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(15 * Math.random()));
          chart2.draw(data, options);
        }, 13000)
      }      
    </script>

</head>
<body>
  <div><span>temperatury</span></div>
  <div id="chart_div1" style="width: 400px; height: 220px;"></div>
  <div id="chart_div2" style="width: 400px; height: 320px;"></div> 
</body>
</html>

Opis parametrów:

  • greenFrom – wartość minimalna, od której wykreślany jest zakres zielony
  • greenTo – wartość maksymalna, do której wykreślany jest zakres zielony
  • greenColor – wartość koloru dla zakresu zielonego – string np. ’00FF00′
  • yellowFrom – wartość minimalna, od której wykreślany jest zakres żółty
  • yellowTo – wartość maksymalna, do której wykreślany jest zakres żółty
  • yellowColor – wartość koloru dla zakresu żółtego – string np. 'FFFF00′
  • redFrom – wartość minimalna, od której wykreślany jest zakres czerwony
  • redTo – wartość maksymalna, do której wykreślany jest zakres czerwony
  • redColor – wartość koloru dla zakresu czerwonego – string np. 'FF0000′
  • min – wartość minimalna wskaźnika
  • max – wartość maksymalna wskaźnika
  • minor ticks – liczba „małych” kresek pomiędzy dużymi na wskaźniku
  • majorTicks – [0,10,20,30,40,50,60,70,80,90,100] – tabela z wartościami, na których są rysowane „duże” kreski
  • width – szerokość wskaźnika
  • height – wysokość wskaźnika
  • animation:{duration: 2500} – czas animacji przejścia z jednej wartości do drugiej (w ms)

I jeszcze jeden przykład wskaźników (dane generowane w JavaScript)

I jeszcze jeden przykład wskaźników (dane pobierane z PHP)

kod pliku data.php

<?php 
$data=array();
$val = 40 + rand(10,20);
$data=array("temperature"=>$val);
$json=json_encode($data);
echo $json;
?>

kod pliku index.php:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["gauge"]});
      google.setOnLoadCallback(drawVisualization);
      
      $(document).ready(function() {
                chart = new google.visualization.Gauge(document.getElementById('visualization'));

      // wskaźnik temperatury
        data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temp', 0],
        ]);

        options = {
          width: 250, height: 250,
          max:100, min:0,
          animation:{duration: 500},
          redFrom:70, redTo:100,
          yellowFrom:50, yellowTo:70,
          greenFrom:0, greenTo:50,
          minorTicks: 10,
          majorTicks: ["0",,20,,40,,60,,80,,100]
        };

      });
      // funkcja aktualiująca dane
      function drawVisualization() {
        chart.draw(data, options)
      }
      
      function test(ajaxdata) {
        var temperature=ajaxdata.temperature;
        console.log(ajaxdata);
        data.setValue(0,1,temperature);
        chart.draw(data, options);
      }
      
      function status_update() {
               var jqxhr = $.getJSON('data.php?' + 'random=' + Math.random(), function() {
              })
              .fail(function() {
              })
              .done(function(ajaxdata) {
              test(ajaxdata);
              });
      }
      
      var refreshId = setInterval('status_update()', 2000);
      $.ajaxSetup({ cache: false });
    </script>
  </head>

  <body style="font-family: Arial;border: 0 none;">
    <!-- w tym DIV wyświetlony zostanie wskaźnik //-->
    <div id="visualization" style="float: left; width: 250px; height: 250px;"></div>
  </body>
</html>

Powiązane wpisy:

  1. Bootony – bootstrapowe przyciski
  2. Obrazki bootstrap
  3. Glify i inne
  4. Wskaźniki od highcharts.
  5. Shadow – cień w CSS

Autor: gervee

Pełnoetatowy ojciec małej gromadki, programista(?), "amator" fotograf, "dłubacz" lubiący DIY, miłośnik chmielonego napitku. "Żartowniś" bez poczucia humoru ;).

Jeden komentarz do “Wskaźniki od Google”

  1. dot. tematu wskaźniki od Google:
    W ostatnim przykładzie dotyczącym pobierania danej z pliku data.php jest taki oto zapis:
    „var jqxhr = $.getJSON(’data.php?’ + 'random=’ + Math.random(), function() {….”
    Analizując treść zamieszczonego pliku data.php nie wiadomo po co jest jego wywoływanie z parametrem „random” skoro zmienna json jest wywoływana przez samą funkcję „rand(10,20)”.
    Ciekawszym przykładem byłoby wywołanie ostatnio zapisanej do bazy danych wartości temperatury.
    Np. temperatury zmierzonej przez DHT22 i wysłanej do serwera MYSQL.
    Zamiast wskaźników od Google proponowałbym zastosowanie highcharts.js
    Panie Rafale, może pokazałby Pan jak to zrobić przy pomocy highcharts.js z wykorzystaniem MySQLa.
    Będę bardzo wdzięczny. Myślę że czytelnicy również
    Pozdrawiam

Dodaj komentarz