Working on a line google chart where I am going to have values which are not so big from eachother, maybe some decinals in difference. So now its making it difficult to mouseover each dots to see the value. Is it possible to make the value to show right next to the dot with the same color of the legend ? Or is it another better solution to this problem ? Here is how it looks now:
Code:
<?php
$con=mysql_connect("localhost","root","") or die("Failed to connect with database!!!!");
mysql_select_db("nih_bw", $con);
$sth = mysql_query("
SELECT routines.date, routines.time,
SUM( IF( measurements.title = 'T_Temperatur', CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ), null ) ) AS Temperatur,
SUM( IF( measurements.title = 'T_Badende_per_Time', CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ), null ) ) AS Badende,
SUM( IF( measurements.title = 'T_Luft_Temperatur', CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ), null ) ) AS Luft
FROM routines
INNER JOIN measure_routine ON routines.id = measure_routine.routine_id
INNER JOIN measurements ON measure_routine.measure_id = measurements.id
GROUP BY routines.date, routines.time
ORDER BY routines.date, routines.time;
;");
//Select measurements.title, routines.value, routines.date, routines.time from routines, measure_routine, measurements Where routines.id=measure_routine.routine_id AND measure_routine.measure_id=measurements.id AND measurements.title='T_Badende_per_Time' order by routines.date, routines.time
$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'routines.date' & 'routines.time', 'type' => 'datetime'),
array('label' => 'Temperatur', 'type' => 'number'),
array('label' => 'Badende', 'type' => 'number'),
array('label' => 'Luft', 'type' => 'number'),
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
// assumes dates are in the format "yyyy-MM-dd"
$dateString = $r['date'];
$dateArray = explode('-', $dateString);
$year = $dateArray[0];
$month = $dateArray[1] - 1; // subtract 1 to convert to javascript's 0-indexed months
$day = $dateArray[2];
// assumes time is in the format "hh:mm:ss"
$timeString = $r['time'];
$timeArray = explode(':', $timeString);
$hours = $timeArray[0];
$minutes = $timeArray[1];
$seconds = $timeArray[2];
$temp = array();
$temp[] = array('v' => "Date($year, $month, $day, $hours, $minutes, $seconds)");
$temp[] = array('v' => $r['Temperatur']);
$temp[] = array('v' => $r['Badende']);
$temp[] = array('v' => $r['Luft']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);
echo $jsonTable;
?>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
/*width: 900, height: 900, */
title: 'Visualization',
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 5,
vAxis: {title: "Values", titleTextStyle: {italic: false}},
hAxis: {title: "Time", titleTextStyle: {italic: false}},
explorer: { actions: ['dragToZoom', 'rightClickToReset'],
axis: 'both' },
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
