charts - 谷歌图表显示点而不是折线图

Question

在我的折线图上工作并且非常困惑为什么它显示点而不是点之间的线。所以希望有人能帮我解决我的问题。谢谢!

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;

$json表:

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}]}]} 

Answer 1

来自 asgallant's comment :

From what I've been able to tease out of your data, your data points have null values in between them, which breaks the line in the charts by default. You can override this by setting the chart's interpolateNulls option to true.