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
<http://december.com/html/4/element/html.html> <http://december.com/html/4/element/head.html> <http://december.com/html/4/element/meta.html charset="utf-8"> <http://december.com/html/4/element/title.html> Stacja Meteo v2.0 - zbysiusp </http://december.com/html/4/element/title.html> <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'/> <http://december.com/html/4/element/link.html rel="stylesheet" href="css/fontello.css" type="text/css" /> <http://december.com/html/4/element/link.html rel="stylesheet" type="text/css" href="tooltipster/css/tooltipster.bundle.min.css" /> <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> <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> <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> <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> <http://december.com/html/4/element/script.html type="text/javascript"> google.load('visualization', '1', {'packages':['corechart']}); google.setOnLoadCallback(drawChart_wiatr); function drawChart_wiatr() { $.ajax({ url: 'data_compass.php', dataType: 'json', }).done(function (results) { setTimeout(drawChart_wiatr, 60000); var data = new google.visualization.DataTable(); //var date_formatter = new google.visualization.DateFormat({pattern: "dddd, m/d/yy, h:mm"}); var date_formatter = new google.visualization.DateFormat({pattern: "EEEE, d MMM yyyy, HH:mm:ss"}); var formatter = new google.visualization.NumberFormat({pattern: '#,##0.0', negativeColor: 'red', negativeParens: true}); data.addColumn('datetime', 'dataczas'); data.addColumn('number', 'średni minutowy kierunek wiatru'); data.addColumn('number', 'średnia minutowa prędkość wiatru'); $.each(results, function (i, row) { data.addRow([ (new Date(row.czas_datetime)), parseFloat(row.wind_direction_average), parseFloat(row.wind_speed_average), ]); date_formatter.format(data, 0); formatter.format(data, 1); }); // ------------------------------------------------------------------------------------------- var linechart_options = { series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 0}, 2: {targetAxisIndex: 0}, }, pointShape: 'circle', pointSize: 2, pointsVisible: true, backgroundColor: '#e8e7e7', curveType: 'function', legend: { position: 'bottom' }, lineWidth: 0, colors: ['#bc640f', '#0f8dbc', '#8ebc0f'], fontName: 'Verdana', fontSize: 12, vAxis: { format:'#.##', gridlines: { color: '#343638', count: 6 }, viewWindow:{ min: 0 }, }, hAxis: { format:'HH', gridlines: { color: '#343638', count: 24, }, }, title: 'Kierunek wiatru ( stopnie )', titlePosition: 'out', titleTextStyle: { color: '#343638', fontName: 'Verdana', fontSize: 14, bold: true, italic: true }, tooltip: { tooltip: { isHtml: true }, textStyle: { color: '#343638', fontName: 'Verdana', fontSize: 12 }, showColorCode: true } }; var chart = new google.visualization.LineChart($('#wiatr_chart').get(0)); chart.draw(data, linechart_options); }); } </http://december.com/html/4/element/script.html> </http://december.com/html/4/element/head.html> <http://december.com/html/4/element/body.html> <http://december.com/html/4/element/table.html width="480" height="311" class="columns"> <http://december.com/html/4/element/tbody.html> <http://december.com/html/4/element/tr.html> <http://december.com/html/4/element/td.html> <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> </http://december.com/html/4/element/td.html> </http://december.com/html/4/element/tr.html> </http://december.com/html/4/element/tbody.html> </http://december.com/html/4/element/table.html> </http://december.com/html/4/element/body.html> </http://december.com/html/4/element/html.html>
<?php require_once 'database.php'; $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'); $wynik->execute(); $results = $wynik->fetchAll(PDO::FETCH_OBJ); $daten = new DateTime($data); $daten->modify('-1 day'); $minus_data = $daten->format("Y-m-d H:i:00"); $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'); $stmt->execute(); $results = $stmt->fetchAll(PDO::FETCH_OBJ); http://www.php.net/echo json_encode($results); ?>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)