Google Graphique ligne converti timeofday au numéro

Question

Je travaille sur un graphique en ligne mais ont le problème que le format de cette ligne ne peut pas être changé:

function drawChart(){ var data = new google.visualization.DataTable(); data.addColumn('timeofday','quartal');

Je veux dans l'axe horizontal un simple format numérique (1,2,3,4 en quarts) mais quand je l'ai changé en 'nombre', le tableau disparaît.

Le deuxième problème est ici que le graphique montre en survolant les lignes 'NaN: NaN'. Je pense que cela est dû au mauvais format aussi.

JSON Format est la suivante: 4 [1, 0,1], [[2] 1,1], [[3], 1,1], [[4], 2,8]

Impossible de comprendre pourquoi le 1, [2], [3], [4] ci-dessus ne peut pas être un nombre.

Voici ma carte actuelle:

Je code suivant:

<?php 
$conn = new mysqli($servername, $username, $password, $dbname); 

$qry = "SELECT COUNT(CASE WHEN name_Gleitzeitrahmen = 'Ja' THEN 1 END) as Ja,COUNT(CASE WHEN name_Gleitzeitrahmen = 'Nein' THEN 1 END)as Nein,quarter(datum) as quartal FROM dashboard GROUP BY quartal"; 
$result = $conn->query($qry); 

if($result === FALSE) { 
echo mysqli_errno($result) .": ". mysqli_error($result) ."/n"; 
die(mysqli_error()); 
} 
$i = 0; //iteration counter - start at 0 

$totalRows = mysqli_num_rows($result); // we need this to know when to change the output 
$targetRows = $totalRows - 1; //row indies start from 0, not 1. 

foreach ($result as $row){ 

    //$comTime = str_replace(":",",",$row['quartal']); // for each row, remove the : and put , in its place -> nur wenn Zeitformat vorhanden 
    $comTime = $row['quartal']; 
    if ($targetRows == $i) { // if the index is the same value as the target (ie, it's the last row)... 

     $temp = "[[".$comTime."],".($row['Ja']).",".($row['Nein'])."]". PHP_EOL; 
     } else { 
     $temp = "[[".$comTime."],".($row['Ja']).",".($row['Nein'])."],". PHP_EOL; 
     } 
    $i = $i + 1; 
    $rows[] = $temp; 
} 

$table = $rows; 
$data = implode($table); //format the table as a single string, with line returns 

echo $i; 
echo $data; 

?> 



<script type="text/javascript"> 
    google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart(){ 
    var data = new google.visualization.DataTable(); 
     data.addColumn('timeofday','quartal'); // 
     data.addColumn('number','Ja'); //Typ number 
     data.addColumn('number','Nein'); 
     data.addRows([    
      <?php echo $data; ?> //dump the result into here, as it's correctly formatted 
     ]); 

    var options = { 
     title: 'Recorded Temperatures', 
     legend: { position: 'top' }, 
     width: 900, 
     height: 500, 
     hAxis: { format:'hh:mm:ss'}, 
     hAxis: { gridlines: { count: 4 } } 

    }; 

var chart = new google.visualization.LineChart(document.getElementById('chart')); 
    chart.draw(data, options);  
    } 
</script> 

Answer 1

voir ->working with timeofday

Le type de données DataTable 'timeofday' colonne prend une tableau de 3 ou 4 chiffres, représentant les heures, min utes, secondes et éventuellement millisecondes, respectivement.

ce qui signifie que la valeur de 'timeofday' doit être un tableau avec au moins 3 valeurs ...

les données devraient ressembler à quelque chose comme ça ...

[[1,0,0],1,1], [[2,0,0],1,1], [[3,0,0],1,1], [[4,0,0],2,8] 

voir travail suivant extrait ...

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('timeofday','quartal'); 
 
    data.addColumn('number','Ja'); 
 
    data.addColumn('number','Nein'); 
 
    data.addRows([ 
 
    [[1,0,0],1,1], [[2,0,0],1,1], [[3,0,0],1,1], [[4,0,0],2,8] 
 
    ]); 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(data); 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

EDIT

selon la data-format pour un graphique linéaire,
l'axe x peut être de tout type de colonne valide disponible

passage à un 'number' ...

data.addColumn('number','quartal'); 

signifierait supprimer le tableau interne pour la première colonne de données ...

[1,1,1], [2,1,1], [3,1,1], [4,2,8] 

le php aurait besoin de changer quelque chose comme ...

if ($targetRows == $i) { 
    $temp = "[".$comTime.",".($row['Ja']).",".($row['Nein'])."]". PHP_EOL; 
} else { 
    $temp = "[".$comTime.",".($row['Ja']).",".($row['Nein'])."],". PHP_EOL; 
}