Working on my line chart and very confused why it shows dots and not lines between the dots. So hope someone can help me with my problem. Thanks!
Google chart code, I can paste the whole code with sql query and so if needed:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
Temperatur = document.getElementById('Temperatur'),
Badende_Per_Time = document.getElementById('Badende_Per_Time'),
Luft_Temperatur = document.getElementById('Luft_Temperatur');
FrittKlor = document.getElementById('FrittKlor');
BundetKlor = document.getElementById('BundetKlor');
TotalKlor = document.getElementById('TotalKlor');
PH = document.getElementById('PH');
AutoKlor = document.getElementById('AutoKlor');
AutoPh = document.getElementById('AutoPh');
AutoTemperatur = document.getElementById('AutoTemperatur');
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
Temperatur.onchange = drawChart;
Badende_Per_Time.onchange = drawChart;
Luft_Temperatur.onchange = drawChart;
FrittKlor.onchange = drawChart;
BundetKlor.onchange = drawChart;
TotalKlor.onchange = drawChart;
PH.onchange = drawChart;
AutoKlor.onchange = drawChart;
AutoPh.onchange = drawChart;
AutoTemperatur.onchange = drawChart;
function drawChart() {
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
width: 1100, height: 520,
title: 'Diagram',
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 5,
vAxis: {title: "Verdi", titleTextStyle: {italic: false}},
hAxis: {title: "Tid", titleTextStyle: {italic: false}},
explorer: { actions: ['dragToZoom', 'rightClickToReset'],
axis: 'both' },
focusTarget: 'category',
};
if (!AutoTemperatur.checked) data.removeColumn(10);
if (!AutoPh.checked) data.removeColumn(9);
if (!AutoKlor.checked) data.removeColumn(8);
if (!PH.checked) data.removeColumn(7);
if (!TotalKlor.checked) data.removeColumn(6);
if (!BundetKlor.checked) data.removeColumn(5);
if (!FrittKlor.checked) data.removeColumn(4);
if (!Luft_Temperatur.checked) data.removeColumn(3);
if (!Badende_Per_Time.checked) data.removeColumn(2);
if (!Temperatur.checked) data.removeColumn(1);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Code:
$sth = sqlsrv_query($conn,"
SELECT routines.date, routines.time,
SUM( CASE WHEN measurements.title = 'T_Temperatur' THEN CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ) ELSE NULL END) AS Temperatur,
SUM( CASE WHEN measurements.title = 'T_Badende_per_Time' THEN CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ) ELSE NULL END) AS Badende_Per_Time,
SUM( CASE WHEN measurements.title = 'T_Luft_Temperatur' THEN CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ) ELSE NULL END) AS Luft_Temperatur,
SUM( CASE WHEN measurements.title = 'M_Fritt_Klor' THEN CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ) ELSE NULL END) AS FrittKlor,
SUM( CASE WHEN measurements.title = 'M_Bundet_Klor' THEN CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ) ELSE NULL END) AS BundetKlor,
SUM( CASE WHEN measurements.title = 'M_Total_Klor' THEN CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ) ELSE NULL END) AS TotalKlor,
SUM( CASE WHEN measurements.title = 'M_PH' THEN CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ) ELSE NULL END) AS PH,
SUM( CASE WHEN measurements.title = 'M_Auto_Klor' THEN CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ) ELSE NULL END) AS AutoKlor,
SUM( CASE WHEN measurements.title = 'M_Auto_PH' THEN CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ) ELSE NULL END) AS AutoPh,
SUM( CASE WHEN measurements.title = 'A_Auto_Temperatur' THEN CAST( REPLACE( routines.value, ',', '.' ) AS DECIMAL( 18, 2 ) ) ELSE NULL END) AS AutoTemperatur
FROM routines
INNER JOIN measure_routine ON routines.id = measure_routine.routine_id
INNER JOIN measurements ON measure_routine.measure_id = measurements.id
INNER JOIN pools ON measure_routine.pool_id = pools.id
WHERE routines.date between '".$fraDato."' AND '".$tilDato."'
AND (pools.name = '".$basseng."' OR pools.name = 'Svommehall')
AND routines.time between '".$fraTid."' AND '".$tilTid."'
GROUP BY routines.date, routines.time
ORDER BY routines.date, routines.time;
;");
if( $sth === false ) {
die( print_r( sqlsrv_errors(), true));
}
$rows = array();
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'routines.date' & 'routines.time', 'type' => 'datetime'),
array('label' => 'Temperatur', 'type' => 'number'),
array('label' => 'Badende_Per_Time', 'type' => 'number'),
array('label' => 'Luft_Temperatur', 'type' => 'number'),
array('label' => 'FrittKlor', 'type' => 'number'),
array('label' => 'BundetKlor', 'type' => 'number'),
array('label' => 'TotalKlor', 'type' => 'number'),
array('label' => 'PH', 'type' => 'number'),
array('label' => 'AutoKlor', 'type' => 'number'),
array('label' => 'AutoPh', 'type' => 'number'),
array('label' => 'AutoTemperatur', 'type' => 'number'),
);
$rows = array();
while($r = sqlsrv_fetch_array ($sth))
{
//$temp = array();
// assumes dates are in the format "yyyy-MM-dd"
$dateString = $r['date'];
$year = $dateString->format('Y');
$month = $dateString->format('m') -1;
$day = $dateString->format('d');
// assumes time is in the format "hh:mm:ss"
$timeString = $r['time'];
$hours = $timeString->format('G');
$minutes = $timeString->format('i');
$seconds = $timeString->format('s');
$temp = array();
$temp[] = array('v' => "Date($year, $month, $day, $hours, $minutes, $seconds)");
$temp[] = array('v' => $r['Temperatur']);
$temp[] = array('v' => $r['Badende_Per_Time']);
$temp[] = array('v' => $r['Luft_Temperatur']);
$temp[] = array('v' => $r['FrittKlor']);
$temp[] = array('v' => $r['BundetKlor']);
$temp[] = array('v' => $r['TotalKlor']);
$temp[] = array('v' => $r['PH']);
$temp[] = array('v' => $r['AutoKlor']);
$temp[] = array('v' => $r['AutoPh']);
$temp[] = array('v' => $r['AutoTemperatur']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);
//echo $jsonTable;
$jsonTable:
00)"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":28.5}]},{"c":[{"v":"Date(2014, 4, 08, 6, 00, 00)"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":28.5}]},{"c":[{"v":"Date(2014, 4, 08, 7, 58, 33)"},{"v":null},{"v":null},{"v":null},{"v":1.94},{"v":0.39},{"v":2.33},{"v":7.19},{"v":2.13},{"v":7.05},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 7, 59, 39)"},{"v":28.1},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 7, 59, 59)"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":28.5}]},{"c":[{"v":"Date(2014, 4, 08, 8, 01, 04)"},{"v":null},{"v":null},{"v":27.8},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 8, 02, 20)"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 8, 40, 20)"},{"v":null},{"v":0},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 9, 30, 18)"},{"v":null},{"v":33},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 9, 59, 59)"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":28.44}]},{"c":[{"v":"Date(2014, 4, 08, 10, 38, 34)"},{"v":null},{"v":36},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 11, 23, 02)"},{"v":null},{"v":null},{"v":null},{"v":1.94},{"v":0.39},{"v":2.33},{"v":7.21},{"v":2.15},{"v":7.08},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 11, 36, 40)"},{"v":null},{"v":0},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 12, 00, 00)"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":28.44}]},{"c":[{"v":"Date(2014, 4, 08, 12, 30, 40)"},{"v":null},{"v":6},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 13, 33, 47)"},{"v":null},{"v":0},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 14, 22, 46)"},{"v":null},{"v":null},{"v":null},{"v":1.99},{"v":0.29},{"v":2.28},{"v":7.22},{"v":2.1},{"v":7.01},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 14, 26, 30)"},{"v":null},{"v":3},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 14, 39, 00)"},{"v":28.2},{"v":0},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 14, 41, 53)"},{"v":null},{"v":null},{"v":26.7},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 15, 45, 49)"},{"v":null},{"v":17},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 16, 34, 38)"},{"v":null},{"v":38},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 17, 16, 13)"},{"v":null},{"v":null},{"v":null},{"v":1.89},{"v":0.44},{"v":2.33},{"v":7.17},{"v":2.08},{"v":7.08},{"v":null}]},{"c":[{"v":"Date(2014, 4, 08, 17, 24, 04)"},{"v":null},{"v":62},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]}]}