在我的折线图上工作并且很困惑为什么它显示点而不是点之间的线。所以希望有人可以帮我解决我的问题。谢谢!
Google图表代码,我可以使用sql查询粘贴整个代码,因此如果需要:
<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>
代码:
$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}]}]}
答案 0 :(得分:1)
从我能够取出的数据中,您的数据点之间有
null
个值,默认情况下会破坏图表中的行。您可以通过将图表的interpolateNulls
选项设置为true
来覆盖此设置。
答案 1 :(得分:0)
1。您可以使用data.sort([{column:0}]);用于基于x轴对其进行排序,此处的column:0表示x轴。 google chart doc for sorting
2。如果您尝试传递的值是通过某些xml或json传递的,并且内部具有空值,则将无法正确绘制,并且会散布或折线图中的虚线,因此要绘制它们,请附条件删除所有空值,然后它将正确绘制。