谷歌图表显示点不是折线图

时间:2014-05-08 11:09:50

标签: charts google-visualization

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

enter image description here

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

2 个答案:

答案 0 :(得分:1)

来自asgallant's comment

  

从我能够取出的数据中,您的数据点之间有null个值,默认情况下会破坏图表中的行。您可以通过将图表的interpolateNulls选项设置为true来覆盖此设置。

答案 1 :(得分:0)

1。您可以使用data.sort([{column:0}]);用于基于x轴对其进行排序,此处的column:0表示x轴。 google chart doc for sorting

2。如果您尝试传递的值是通过某些xml或json传递的,并且内部具有空值,则将无法正确绘制,并且会散布或折线图中的虚线,因此要绘制它们,请附条件删除所有空值,然后它将正确绘制。