私はテーブルからデータを取り込んでグラフを作成しています。しかし、すべての列の値が空/ 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 ?>]);
Iこれを試したが、列なしでチャートを作成するメインウィンドウにnsinします。 これはlegend *と値のないものにのみ表示されます。 更新した私の最初の投稿をご覧ください。 – John
問題がどこにあるのか分かりました。 – John
@John cool cool! –