2
Ich nehme Daten aus einer Tabelle und erstellen ein Diagramm. Aber wenn alle Werte der Spalte leer sind/Null gibt es mir Daten Spalte für Achse # 0 kann nicht vom Typ sein String Gibt es eine Möglichkeit, wenn alle Werte einer Spalte null sind, um das Diagramm noch zu erstellen diese Spalte/Spalten ignorieren/verstecken?Liniendiagramm Spalte ausblenden Wenn alles 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>Update nach Antwort:
habe ich diese Antwort versuchen, wird es ein leeres Diagramm angezeigt werden, wenn eine der Spalten null ist Wie ich sagte, ich Daten von einem nehmen Tabelle und erstellen Sie das Diagramm. Sind meine data.addRows korrekt?
Fix für null:
Ich fand, wo das Problem war, der PHP-Variable vorging Räume für null, so wird der letzte Wert auf jeder Zeile falsch war , * hier] Ich reparierte es mit einem php wenn is_null und den Code unten aktualisieren.
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 versuchte dies, aber es erstellt das Diagramm ohne jede Spalte nsin Hauptfenster. Es zeigt sie nur im Legent * plus das, das keine Werte hat. Bitte sehen Sie meinen ersten Post mit Update. – John
Danke, ich habe herausgefunden, wo das Problem war. – John
@ John klingt cool! –