Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Przypisanie nazw do wartości liczbowych - Google Charts AJAX JSON
zbysiusp
post 25.12.2016, 12:40:26
Post #1





Grupa: Zarejestrowani
Postów: 65
Pomógł: 0
Dołączył: 11.07.2009

Ostrzeżenie: (0%)
-----


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:

Wykres omawiany w moim poście

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


Pozdrawiam
zbysiusp

Ten post edytował zbysiusp 25.12.2016, 23:49:00
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 15.10.2018 - 16:21