2016-08-03 11 views
2

私はテーブルからデータを取り込んでグラフを作成しています。しかし、すべての列の値が空/ NULLの場合、それは私に与えます軸#0のデータ列は文字列ではありません チャートを作成するためには、列/列を無視/隠していますか?答えの後折れ線グラフ列がすべてNULLでない場合

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['vdate', 'THS', 'FT3', 'FT4'], 
 
     [new Date('08/01/2016'), 10, null, 30], 
 
     [new Date('08/02/2016'), 40, null, 60], 
 
     [new Date('08/03/2016'), 70, null, 90] 
 
    ]); 
 

 
    var chartColors = ['#000000', '#D20000', '#5CB85C']; 
 

 
    var options = { 
 
     legendTextStyle: {color: '#757575'}, 
 
     fontName: 'Didact Gothic', 
 
     curveType: 'function', 
 
     height: 300, 
 
     pointSize: 5, 
 
     interpolateNulls: true, 
 
     colors: chartColors, 
 
     hAxis: {title: 'Visit', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}}, 
 
     vAxis: {title: 'Prices', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}, viewWindow: {min:0}} 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
 
    data.addColumn({type: 'string', role: 'annotation'}); 
 

 
    var view = new google.visualization.DataView(data); 
 
    var initialchart =[0]; 
 
    var selectedColors = []; 
 
    if($("#kolom1").is(':checked')) { 
 
    \t initialchart.push(1,{ calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"}); 
 
    \t selectedColors.push(chartColors[0]); 
 
    } 
 
\t if ($("#kolom2").is(':checked')) { 
 
    \t initialchart.push(2,{ calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}); 
 
     selectedColors.push(chartColors[1]); 
 
    } 
 
\t if ($("#kolom3").is(':checked')) { 
 
    \t initialchart.push(3,{ calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"}); 
 
     selectedColors.push(chartColors[2]); 
 
    } 
 
    view.setColumns(initialchart); 
 
    options.colors = selectedColors; 
 
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
 
    chart.draw(view, options); 
 

 
    $(".checkbox").change(function() { 
 
     view = new google.visualization.DataView(data); 
 
     var checkchart =[0]; 
 
     var selectedColors = []; 
 

 
     if($("#kolom1").is(':checked')) { 
 
     checkchart.push(1,{calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"}); 
 
     selectedColors.push(chartColors[0]); 
 
     } 
 
     if($("#kolom2").is(':checked')) { 
 
     checkchart.push(2,{calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}); 
 
     selectedColors.push(chartColors[1]); 
 
     } 
 
     if($("#kolom3").is(':checked')) { 
 
     checkchart.push(3,{calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"}); 
 
     selectedColors.push(chartColors[2]); 
 
     } 
 
     view.setColumns(checkchart); 
 
     options.colors = selectedColors; 
 
     chart.draw(view, options); 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});
.exams { 
 
    padding: 5px; 
 
    background: #a2a2a2; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="checkboxes" style="min-height: 100px;"> 
 
    <input type="checkbox" class="checkbox" style="display: none;" id="kolom1" checked="checked" /><label class="exams" for="kolom1"><span class="check_icon"></span>TSH</label> 
 
    <input type="checkbox" class="checkbox" style="display: none;" id="kolom2" checked="checked" /><label class="exams" for="kolom2"><span class="check_icon"></span>FT3</label> 
 
    <input type="checkbox" class="checkbox" style="display: none;" id="kolom3" checked="checked" /><label class="exams" for="kolom3"><span class="check_icon"></span> FT4</label> 
 
</div> 
 
<div name="curve_chart" id="curve_chart"></div>

更新:

私は、いずれかの列が nullの場合、私はからデータを取得言ったように、それは空のチャートが表示されます。この答えをしようとしましたテーブルを作成し、チャートを作成します。 data.addRowsは正しいですか?ヌルのため

修正:

私は問題があった場所のすべての行の最後の値が間違っていたので、PHPの変数は、ヌルのためのスペースを渡した*こちら] は、私はそれを修正しましたphp if isnnullと下のコードを更新してください。

while($row = mysqli_fetch_array($results)){ 
if (is_null($row['check_tsh']) {$check_tsh = "null";} 
if (is_null($row['check_ft3']) {$check_ft3 = "null";} 
if (is_null($row['check_ft4']) {$check_ft4 = "null";} 
$chartentry .= "['".date("d/m/Y", strtotime($row['vdate']))."', ".$check_tsh.", ".$check_ft3.", ".$check_ft4."],"; 
} 

//chartentry Array: ['02/08/2016', 100,, 300],['03/08/2016', , , ],['04/08/2016', , , ],['05/08/2016', , , ] 

var data = new google.visualization.DataTable(); 
data.addColumn('string', 'vdate'); 
    data.addColumn('number', 'THS'); 
    data.addColumn('number', 'FT3'); 
    data.addColumn('number', 'FT4'); 
data.addRows([<?php echo $chartentry ?>]); 

答えて

0

これは、arrayToDataTableメソッドの欠点である。最初の行のデータは、すべての列で正しいタイプのデータでなければならず、{v: value, f: 'formatted value'}構文を使用してはなりません。 nullの値が行にあるため、APIはnullの列のデータ型を想定しているか、有効なデータ型を取得できないというエラーをスローしています。この問題を解決するには、標準DataTableコンストラクタに切り替える必要があります。

google.charts.load('current', { 
 
     callback: function() { 
 
     var data = new google.visualization.DataTable(); 
 
     data.addColumn('string', 'vdate'); 
 
\t \t \t data.addColumn('number', 'THS'); 
 
\t \t \t data.addColumn('number', 'FT3'); 
 
\t \t \t data.addColumn('number', 'FT4'); 
 
     data.addRows([ 
 
      ['08/01/2016', 10, null, 30], 
 
      ['08/02/2016', 40, null, 60], 
 
      ['08/03/2016', 70, null, 90] 
 
     ]); 
 
     
 
     var chartColors = ['#000000', '#D20000', '#5CB85C']; 
 

 
     var options = { 
 
      legendTextStyle: {color: '#757575'}, 
 
      fontName: 'Didact Gothic', 
 
      curveType: 'function', 
 
      height: 300, 
 
      pointSize: 5, 
 
      interpolateNulls: true, 
 
      colors: chartColors, 
 
      hAxis: {title: 'Visit', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}}, 
 
      vAxis: {title: 'Prices', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}, viewWindow: {min:0}} 
 
     }; 
 

 
     var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
 
     data.addColumn({type: 'string', role: 'annotation'}); 
 

 
     var view = new google.visualization.DataView(data); 
 
     var initialchart =[0]; 
 
     var selectedColors = []; 
 
     if($("#kolom1").is(':checked')) { 
 
     \t initialchart.push(1,{ calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"}); 
 
     \t selectedColors.push(chartColors[0]); 
 
     } 
 
    \t if ($("#kolom2").is(':checked')) { 
 
     \t initialchart.push(2,{ calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}); 
 
      selectedColors.push(chartColors[1]); 
 
     } 
 
    \t if ($("#kolom3").is(':checked')) { 
 
     \t initialchart.push(3,{ calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"}); 
 
      selectedColors.push(chartColors[2]); 
 
     } 
 
     view.setColumns(initialchart); 
 
     options.colors = selectedColors; 
 
     var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
 
     chart.draw(view, options); 
 

 
     $(".checkbox").change(function() { 
 
      view = new google.visualization.DataView(data); 
 
      var checkchart =[0]; 
 
      var selectedColors = []; 
 

 
      if($("#kolom1").is(':checked')) { 
 
      checkchart.push(1,{calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"}); 
 
      selectedColors.push(chartColors[0]); 
 
      } 
 
      if($("#kolom2").is(':checked')) { 
 
      checkchart.push(2,{calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}); 
 
      selectedColors.push(chartColors[1]); 
 
      } 
 
      if($("#kolom3").is(':checked')) { 
 
      checkchart.push(3,{calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"}); 
 
      selectedColors.push(chartColors[2]); 
 
      } 
 
      view.setColumns(checkchart); 
 
      options.colors = selectedColors; 
 
      chart.draw(view, options); 
 
     }); 
 
     }, 
 
     packages: ['corechart'] 
 
    });
.exams { 
 
     padding: 5px; 
 
     background: #a2a2a2; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <div id="checkboxes" style="min-height: 100px;"> 
 
     <input type="checkbox" class="checkbox" style="display: none;" id="kolom1" checked="checked" /><label class="exams" for="kolom1"><span class="check_icon"></span>TSH</label> 
 
     <input type="checkbox" class="checkbox" style="display: none;" id="kolom2" checked="checked" /><label class="exams" for="kolom2"><span class="check_icon"></span>FT3</label> 
 
     <input type="checkbox" class="checkbox" style="display: none;" id="kolom3" checked="checked" /><label class="exams" for="kolom3"><span class="check_icon"></span> FT4</label> 
 
    </div> 
 
    <div name="curve_chart" id="curve_chart"></div>

ここhttps://jsfiddle.net/bqacua6y/

を作業コードを参照してくださいここでは詳細な説明を参照してくださいhttps://groups.google.com/forum/?fromgroups=#!topic/google-visualization-api/2Jafk8PyjV4

+0

Iこれを試したが、列なしでチャートを作成するメインウィンドウにnsinします。 これはlegend *と値のないものにのみ表示されます。 更新した私の最初の投稿をご覧ください。 – John

+0

問題がどこにあるのか分かりました。 – John

+0

@John cool cool! –