Google Chart Api使用日期时间值 [英] Google Chart Api make use of datetime value
问题描述
你好，我想在我的图表中显示日期时间，我在堆栈上进行了一些搜索，发现了类似问题，比如
以下是工具提示中html的结果：
更新
自定义工具提示，此处是它的文档。查看上面更新的代码，您需要对自定义工具提示进行三项更改：
-
将虚拟列添加到列表中列（with role = tooltip）：
$ barray（'type'=>'string'，'role'=>'tooltip '，'p'=> array（'html'=>'true'））， -
对于循环中的列：
li>$ temp [] = array（'v'=>'这是一个< b>自定义< ; / b>工具提示根据需要插入数据：在2015年4月25日，传感器值为：< b> 5< / b>'）;
-
让jsapi知道内容是html：
var options = {
...
tooltip：{isHtml：true}
};
更新
为了自定义水平轴值，您需要查看>。只需将 hAxis 对象（及其格式）添加到图表选项对象：
var options = {
...
hAxis：{
格式：'yyyy -M-d'
}
};
，您会看到如下所示的内容：
Hello I want in my chart to display the datetime, I made some search over the stack and I found similaer problems like this one but I could not understand how to fix that.
The part of the code that i believe i should change is the below..
<?php
$DB_NAME = 'project';
$DB_HOST = 'localhost';
$DB_USER = 'root';
$DB_PASS = 'smogi';
include_once 'header.php';
$view = ($_GET['view']);
$username2 =$_SESSION['username'];
$firstDate= $_POST['firstdatepicker'];
$lastDate= $_POST['lastdatepicker'];
$typeValue = ($_POST['typeValue']);
$startHour = ($_POST['startHour']);
$firstMin = ($_POST['firstMin']);
$lastHour = ($_POST['lastHour']);
$lastMin = ($_POST['lastMin']);
$firstTime = $startHour.':'.$firstMin.':00';
$lastTime = $lastHour.':'.$lastMin.':00';
$con = mysqli_connect('localhost','root','smogi','project');
/* Establish the database connection */
$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$sql="SELECT sensorValue,datetime FROM sensors WHERE username='$view' AND datetime BETWEEN '$firstDate''$firstTime' AND '$lastDate''$lastTime' AND typeValue='$typeValue' ORDER BY datetime DESC";
$result = mysqli_query($con,$sql);
$rows = array();
$table = array();
$table['cols'] = array(
// Labels for your chart, these represent the column titles.
array('label' => 'Date Time', 'type' => 'date'),
array('label' => 'Sensor Value', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// The following line will be used to slice the chart
$temp[] = array('v' => 'Date('.date('Y',strtotime($r['datetime'])).','.(date('n',strtotime($r['datetime'])) - 1).','.date('d',strtotime($r['datetime'])).',0,0,0)');
// Values of the each slice
$temp[] = array('v' => (int) $r['sensorValue']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
hAxis: {title: 'Date & Time'},
vAxis: {title: 'Sensor Values'},
title: 'Sensor Data',
is3D: 'true',
width: 900,
height: 600
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
My chart right now look like this ...
and what i want is instead of 1000,2000...5000 to display the datetime from the data that I am displaying.
My database table that contains the datetime is the below...
Can you help me please??? :)
I just tried the following code:
<?php
$rows = array();
$table = array();
$table['cols'] = array(
// Labels for your chart, these represent the column titles.
array('label' => 'Date Time', 'type' => 'date'),
array('label' => 'Sensor Value', 'type' => 'number'),
array('type' => 'string', 'role' => 'tooltip', 'p' => array('html' => 'true')),
);
$result = array(
array('datetime' => '2015-04-25 00:00:00', 'sensorValue' => 5),
array('datetime' => '2015-04-25 14:30:00', 'sensorValue' => 10),
array('datetime' => '2015-04-26 02:10:10', 'sensorValue' => 15),
array('datetime' => '2015-04-26 12:10:10', 'sensorValue' => 17),
array('datetime' => '2015-04-27 03:45:23', 'sensorValue' => 25),
array('datetime' => '2015-04-28 15:34:00', 'sensorValue' => 4),
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// The following line will be used to slice the chart
$temp[] = array('v' => 'Date('.date('Y',strtotime($r['datetime'])).',' .
(date('n',strtotime($r['datetime'])) - 1).','.
date('d',strtotime($r['datetime'])).','.
date('H',strtotime($r['datetime'])).','.
date('i',strtotime($r['datetime'])).','.
date('s',strtotime($r['datetime'])).')');
// Values of the each slice
$temp[] = array('v' => (int) $r['sensorValue']);
$temp[] = array('v' => 'This is a <b>custom</b> tooltip. Insert your data as you like: On the 25th of April, 2015 the sensor value was: <b>5</b>');
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
?>
<html>
<head>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
tooltip: {isHtml: true}
};
var chart = new google.visualization.ScatterChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
so I changed:
array('label' => 'Date Time', 'type' => 'number')toarray('label' => 'Date Time', 'type' => 'date')- formed the date with
'Date(date("Y"),date("n") - 1,date("d"),0,0,0)'as described here
Here is the result with html in tooltip:
UPDATE
If you want custom tooltips, here is the doc for it. See the updated code above, you need to make three changes to customize tooltips:
add the "virtual" column to the list of columns (with role = tooltip):
array('type' => 'string', 'role' => 'tooltip', 'p' => array('html' => 'true')),add the value for the column in the loop:
$temp[] = array('v' => 'This is a <b>custom</b> tooltip. Insert your data as you like: On the 25th of April, 2015 the sensor value was: <b>5</b>');and let jsapi know that the content is html:
var options = { ... tooltip: {isHtml: true} };
UPDATE
In order to customize horizontal axis values, you need to look at this first. Just add hAxis object (and its format) to the chart options object:
var options = {
...
hAxis: {
format: 'yyyy-M-d'
}
};
and you'll see something like:
这篇关于Google Chart Api使用日期时间值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
