Question
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:
https://stackoverflow.com/questions/23540070
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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}]}]}
Solution
From asgallant's comment:
From what I've been able to tease out of your data, your data points have
nullvalues in between them, which breaks the line in the charts by default. You can override this by setting the chart'sinterpolateNullsoption totrue.
OTHER TIPS
1.You can use data.sort([{column: 0}]); for sorting it based on x-axis, Here column:0 indicatesx-axis. google chart doc for sorting
2.If the value you are trying to pass is through some xml or json and it has null values inside, It will not plot properly and will be scattered or as dotted lines in line graph so to plot them, have a condition to remove all null values and then it will plot correctly.
