rád bych načetl z MySQL hodnoty Timestamp a Value(INT) a ty zobrazil v grafu. Rád bych použil Google Charts. Když vykreslím klasický Line Chart, je to ok. Ale vzhledem k dlouhodobému měření potřebuji využít Annotation chart, kde si mohu zoomovat a posouvat v čase. A tady je ten problém, že to nedokážu zprovoznit.
V databázi mám dva sloupce, první DateTime ve formátu 2021-02-05 19:55:34 a druhý Value1 ve formátu čísla INT.
Díky za každou radu, případné doporučení jak takový graf udělat.
<?php
//index.php
$connect = mysqli_connect("server", "user", "pass", "db");
$query = '
SELECT Value1,
UNIX_TIMESTAMP(CONCAT_WS(" ", DateTime)) AS datetime
FROM SAVE_DATA
';
$result = mysqli_query($connect, $query);
$rows = array();
$table = array();
$table['cols'] = array(
array(
'label' => 'DateTime',
'type' => 'datetime'
),
array(
'label' => 'Value1',
'type' => 'number'
)
);
while($row = mysqli_fetch_array($result))
{
$sub_array = array();
$datetime = explode(".", $row["datetime"]);
$sub_array[] = array(
"v" => 'Date(' . $datetime[0] . '000)'
);
$sub_array[] = array(
"v" => $row["Value1"]
);
$rows[] = array(
"c" => $sub_array
);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var options = {
title:'Sensors Data',
legend:{position:'bottom'},
chartArea:{width:'95%', height:'65%'}
};
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
displayAnnotations: true
};
chart.draw(data, options);
}
</script>
<style>
.page-wrapper
{
width:1000px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="page-wrapper">
<br />
<div id="chart_div" style="width: 100%; height: 500px"></div>
</div>
</body>
</html>
Přihlásit se
Registrovat
FAQ
Hledat
