Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ AJAX _ Przypisanie nazw do wartości liczbowych - Google Charts AJAX JSON

Napisany przez: zbysiusp 25.12.2016, 12:40:26

Witam!

Proszę o pomoc w następującym temacie. Wygenerowałem plik JSON zawierający dane pogodowe z ostatniej doby: czas (datetime), prędkość wiatru (number), kierunek wiatru stopnie (number), kierunek wiatru nazwa (string). Dynamicznie tworzę wykres w Google Charts, w którym na osi x jest prezentowany czas (co 1 minutę), a na osi y kierunek wiatru w stopniach). Chciałbym teraz do stopni dołączyć nazwę kierunku wiatru (z pliku JSON) - np. 0 (N), 180 (S), tak aby była ona prezentowana obok wartości w stopniach na osi y lub po najechaniu kursorem na punkt wykresu - tooltip (zamiast 0 - N itd). Może są zupełnie inne rozwiązania tego problemu. Chciałbym także dodać drugą oś y dla prędkości wiatru. Za wszelkie sugestie i pomoc bardzo dziękuję. Wesołych Świąt. Zamieszczam kod generujący wykres oraz plik skrypt generujący plik JSON data_compass.php:

https://www.dropbox.com/s/t07j2zhrallu9ic/wykres_direction.jpg?dl=0

  1. <http://december.com/html/4/element/html.html>
  2. <http://december.com/html/4/element/head.html>
  3.  
  4. <http://december.com/html/4/element/meta.html charset="utf-8">
  5.  
  6. <http://december.com/html/4/element/title.html> Stacja Meteo v2.0 - zbysiusp </http://december.com/html/4/element/title.html>
  7.  
  8. <http://december.com/html/4/element/link.html href='https://fonts.googleapis.com/css?family=Lato:400,900,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'/>
  9. <http://december.com/html/4/element/link.html rel="stylesheet" href="css/fontello.css" type="text/css" />
  10. <http://december.com/html/4/element/link.html rel="stylesheet" type="text/css" href="tooltipster/css/tooltipster.bundle.min.css" />
  11.  
  12. <http://december.com/html/4/element/script.html src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></http://december.com/html/4/element/script.html>
  13. <http://december.com/html/4/element/script.html type="text/javascript" src="https://www.google.com/jsapi"></http://december.com/html/4/element/script.html>
  14. <http://december.com/html/4/element/script.html type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></http://december.com/html/4/element/script.html>
  15. <http://december.com/html/4/element/script.html type="text/javascript" src="tooltipster/js/tooltipster.bundle.min.js"></http://december.com/html/4/element/script.html>
  16.  
  17. <http://december.com/html/4/element/script.html type="text/javascript">
  18.  
  19. google.load('visualization', '1', {'packages':['corechart']});
  20. google.setOnLoadCallback(drawChart_wiatr);
  21.  
  22. function drawChart_wiatr() {
  23.  
  24. $.ajax({
  25. url: 'data_compass.php',
  26. dataType: 'json',
  27. }).done(function (results) {
  28.  
  29. setTimeout(drawChart_wiatr, 60000);
  30.  
  31. var data = new google.visualization.DataTable();
  32.  
  33. //var date_formatter = new google.visualization.DateFormat({pattern: "dddd, m/d/yy, h:mm"});
  34. var date_formatter = new google.visualization.DateFormat({pattern: "EEEE, d MMM yyyy, HH:mm:ss"});
  35. var formatter = new google.visualization.NumberFormat({pattern: '#,##0.0', negativeColor: 'red', negativeParens: true});
  36.  
  37. data.addColumn('datetime', 'dataczas');
  38. data.addColumn('number', 'średni minutowy kierunek wiatru');
  39. data.addColumn('number', 'średnia minutowa prędkość wiatru');
  40.  
  41. $.each(results, function (i, row) {
  42. data.addRow([
  43. (new Date(row.czas_datetime)),
  44. parseFloat(row.wind_direction_average),
  45. parseFloat(row.wind_speed_average),
  46. ]);
  47.  
  48. date_formatter.format(data, 0);
  49. formatter.format(data, 1);
  50.  
  51. });
  52.  
  53. // -------------------------------------------------------------------------------------------
  54.  
  55. var linechart_options = {
  56.  
  57. series: {
  58. 0: {targetAxisIndex: 0},
  59. 1: {targetAxisIndex: 0},
  60. 2: {targetAxisIndex: 0},
  61. },
  62.  
  63. pointShape: 'circle',
  64. pointSize: 2,
  65. pointsVisible: true,
  66. backgroundColor: '#e8e7e7',
  67. curveType: 'function',
  68. legend: { position: 'bottom' },
  69. lineWidth: 0,
  70. colors: ['#bc640f', '#0f8dbc', '#8ebc0f'],
  71. fontName: 'Verdana',
  72. fontSize: 12,
  73.  
  74.  
  75. vAxis: {
  76. format:'#.##',
  77. gridlines: {
  78. color: '#343638',
  79. count: 6
  80. },
  81.  
  82. viewWindow:{
  83. min: 0
  84. },
  85. },
  86.  
  87. hAxis: {
  88. format:'HH',
  89. gridlines: {
  90. color: '#343638',
  91. count: 24,
  92. },
  93.  
  94. },
  95. title: 'Kierunek wiatru ( stopnie )',
  96. titlePosition: 'out',
  97. titleTextStyle: {
  98. color: '#343638', fontName: 'Verdana', fontSize: 14, bold: true, italic: true
  99.  
  100. },
  101.  
  102. tooltip: {
  103.  
  104. tooltip: { isHtml: true },
  105.  
  106. textStyle: {
  107. color: '#343638',
  108. fontName: 'Verdana',
  109. fontSize: 12
  110. },
  111. showColorCode: true
  112. }
  113. };
  114.  
  115. var chart = new google.visualization.LineChart($('#wiatr_chart').get(0));
  116. chart.draw(data, linechart_options);
  117.  
  118. });
  119.  
  120. }
  121.  
  122. </http://december.com/html/4/element/script.html>
  123.  
  124. </http://december.com/html/4/element/head.html>
  125. <http://december.com/html/4/element/body.html>
  126. <http://december.com/html/4/element/table.html width="480" height="311" class="columns">
  127. <http://december.com/html/4/element/tbody.html>
  128. <http://december.com/html/4/element/tr.html>
  129. <http://december.com/html/4/element/td.html>
  130. <http://december.com/html/4/element/div.html id="wiatr_chart" style="width:1500px; height:315px; border: 1px solid red"></http://december.com/html/4/element/div.html>
  131. </http://december.com/html/4/element/td.html>
  132. </http://december.com/html/4/element/tr.html>
  133. </http://december.com/html/4/element/tbody.html>
  134. </http://december.com/html/4/element/table.html>
  135. </http://december.com/html/4/element/body.html>
  136. </http://december.com/html/4/element/html.html>


  1. <?php
  2. require_once 'database.php';
  3.  
  4. $wynik = $conn->prepare("SELECT czas_datetime FROM tab_czujniki_2 ORDER BY czas_datetime DESC LIMIT 1") or http://www.php.net/die('Błąd zapytania');
  5. $wynik->execute();
  6.  
  7. $results = $wynik->fetchAll(PDO::FETCH_OBJ);
  8.  
  9. $daten = new DateTime($data);
  10. $daten->modify('-1 day');
  11.  
  12. $minus_data = $daten->format("Y-m-d H:i:00");
  13.  
  14. $stmt = $conn->prepare("SELECT czas_datetime, wind_direction_average, wind_speed_average, compass FROM tab_czujniki_2 WHERE czas_datetime >= '$minus_data' ORDER BY czas_datetime ASC") or http://www.php.net/die('Błąd zapytania');
  15.  
  16. $stmt->execute();
  17. $results = $stmt->fetchAll(PDO::FETCH_OBJ);
  18. http://www.php.net/echo json_encode($results);
  19. ?>


Pozdrawiam
zbysiusp

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)