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
<link href='https://fonts.googleapis.com/css?family=Lato:400,900,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'/> <link rel="stylesheet" href="css/fontello.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="tooltipster/css/tooltipster.bundle.min.css" />
<script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="tooltipster/js/tooltipster.bundle.min.js"></script>
<script 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);
});
}
<table width="480" height="311" class="columns"> <div id="wiatr_chart" style="width:1500px; height:315px; border: 1px solid red"></div>
<?php
require_once 'database.php';
$wynik = $conn->prepare("SELECT czas_datetime FROM tab_czujniki_2 ORDER BY czas_datetime DESC LIMIT 1") or
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
die('Błąd zapytania');
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_OBJ);
echo json_encode
($results); ?>
Pozdrawiam
zbysiusp
Ten post edytował zbysiusp 25.12.2016, 23:49:00