Wie man Datenbankwerte nach Datum für Google-Diagramme iteriert

Question

Ich habe ähnliche Fragen gesehen, aber immer noch nicht verstehen, wie es funktioniert .. Ich habe diese While-Schleife Schleifen meiner DB für Termine, Leads und verkauft. Für jedes Datum in der DB möchte ich die täglichen Leads anzeigen und für jedes Datum in der DB in einem Liniendiagramm verkaufen.

$sql = "SELECT * FROM customers WHERE source = 'website' ORDER BY date ASC"; 
$result = $conn->query($sql); 
if ($result->num_rows > 0) { 
    while($row = $result->fetch_assoc()) { 
     $sold = $row['sold']; 
     $visit= $row['visit']; 
     $date= $row['date']; 
    }else{ 

    }  
} 

Hier ist das Diagramm Skript -

<script type="text/javascript"> 

    google.charts.setOnLoadCallback(drawChartl); 

    function drawChartl() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Date', 'Leads', 'Sold'], 
     ['1st', 6,  2], 
     ['2nd', 3,  1], 
     ['3rd', 2,  3], 
    ]); 

    var options = { 
     title: 'Internet Performance', 
     curveType: 'function', 
     legend: { position: 'top' } 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 

    chart.draw(data, options); 
    } 
</script> 


<div id="curve_chart" style="width: 1900px; height: 500px"></div> 

Answer 1

folgenden Ausschnitt sehen ...

ein Array benötigen, die die Daten aller hält ->$json

dann jede Zeile hinzufügen zu $json ->$dataRow

die n schreiben das Ergebnis an den javascript ->data.addRows(<?= $jsonstring ?>);

versuchen so etwas wie dies, müssen wahrscheinlich auch das Datum zu formatieren ...

<?php 
    $json = array(); 
    $sql = "SELECT * FROM customers WHERE source = 'website' ORDER BY date ASC"; 
    $result = $conn->query($sql); 
    if ($result->num_rows > 0) { 
     while($row = $result->fetch_assoc()) { 
      $dataRow = array(
       $row['date'], 
       $row['visit'], 
       $row['sold'] 
     ); 
      array_push($json, $dataRow); 
     } 
    } 

    $jsonstring = json_encode($json); 
?> 

<script src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    google.charts.load('current', { 
    'callback': function() { 
     var data = google.visualization.arrayToDataTable([ 
     [{type: 'string', label: 'Date'}, {type: 'number', label: 'Leads'}, {type: 'number', label: 'Sold'}] 
     ]); 

     data.addRows(<?= $jsonstring ?>); 

     var options = { 
     title: 'Internet Performance', 
     curveType: 'function', 
     legend: { position: 'top' } 
     }; 

     var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
     chart.draw(data, options); 
    }, 
    'packages': ['corechart'] 
    }); 
</script> 

<div id="curve_chart" style="width: 1900px; height: 500px"></div>