grafiek opmaken per maand van het jaar

Door Berta Pappens op 30-10-2023 16:28

3.270 views

Hallo,

Heeft er iemand een script om een grafiek op te maken van gegevens per maand van het jaar.
Ik heb dit al als voorbeeld , maar kan geen grafiek maken.


$sqlb="SELECT COUNT(*) as total FROM database WHERE MONTH(datin) = MONTH(CURRENT_DATE) AND YEAR(datin) = YEAR(CURRENT_DATE)";

$result = $con->query($sqlb);
$data =  $result->fetch_assoc();
echo '<center>';
echo '<font color ="black">Aantal ingaves deze maand : ' ;
echo'<font color ="red">'.$data['total'];
echo '<br>';

Dank bij voorbaat

- Ariën -

30-10-2023 20:12

Waarom zou het niet werken?
In data van jscharts staat een komma-gescheiden reeks met cijfers. Het maakt voor chart.js niet uit of deze handmatig zijn ingevuld of via een PHP-script gegenereerd worden.

Als het niet werkt, dan doe je blijkbaar iets fout?

B Berta Pappens

30-10-2023 20:20

Ik krijg enkel dit te zien zonder staaf grafiek

545,6491,13340,1986,1635,1226,1161,521,5265,1461,0,0

- Ariën -

30-10-2023 20:25

Hoe ziet je volledige code er dan uit?

B Berta Pappens

30-10-2023 20:29

hier is de volledige code :
er zitten nog echo's tussen voor kontrole
Maar ik krijg geen grafiek


<?php

  

// query even ophakken in leesbare regels
$x = 1;
$tot=array();
do {
$sqlb="SELECT COUNT(*) as total FROM database WHERE MONTH(datin) = ".$x." AND YEAR(datin) = YEAR(CURRENT_DATE)";

$result = $con->query($sqlb);
$data =  $result->fetch_assoc();
echo '<center>';
echo '<font color ="black">Aantal voor maand  '.$x.' : ' ;
echo'<font color ="red">'.$data['total'];
echo '<br>';
$values= implode(", ",$tot);
$x++;
} while ($x <= 12);
echo $values ;

?>		
<html>
<head>
    <title>Staafdiagram voorbeeld met Chart.js</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myBarChart" width="1000" height="400"></canvas>


    <script>
        // Je gegevens voor het staafdiagram

		
        var data = {
            labels: ["januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
            datasets: [{
                label: "Cachen per maand",
                data: [<?php echo $values;?> ], // Hier voeg je je eigen data toe.
				
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)'
					'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)'
					'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)'
					'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)'
					'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                ],
                borderWidth: 1
            }]
        };

        var options = {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        };

        // Maak een staafdiagram
        var ctx = document.getElementById('myBarChart').getContext('2d');
        var myBarChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: options
        });
    </script>
</body>
</html>

- Ariën -

30-10-2023 20:29 gewijzigd op 30-10-2023 20:30

Luisteren of lezen is lastig, blijkbaar?

- Ariën - op 30/10/2023 20:07:17

Die do-while loop kan weggooien. Dat is echt nonsens wat je daar doet.
Check even op die link van W3Schools hoe ze dat doen.

B Berta Pappens

30-10-2023 20:31

Ik wil eerst de oplossing voor de grafiek en daarna zal ik verder de aanpassing doen

- Ariën -

30-10-2023 20:33

ja, zie mijn eerdere posts. En bekijk ook even je output in je HTML-source.
Dat schept ook vaak verduidelijking in plaats van dat je enkel tegen een site aankijkt.

? Onbekende gebruiker

30-10-2023 22:28

Ik denk dat je de data zoveel mogelijk in de database kunt voorbereiden:


WITH dataset AS (  -- hier vraag je de data op met je query
  SELECT
    MONTH(datin) AS maand,
    COUNT(*) AS totaal
  FROM database
  WHERE YEAR(datin) = YEAR(CURRENT_DATE)
  GROUP BY maand
)
SELECT  -- hier maak je er een grafiek van
  YEAR(CURRENT_DATE) AS jaar,
  maand,
  totaal,
  ROUND((totaal / MAX(totaal) OVER ()) * 100, 2)  AS procent,
  REPEAT("#", (totaal / MAX(totaal) OVER ()) * 40) AS staaf
FROM dataset
ORDER BY maand;

Nadat de gegevens zijn opgehaald uit de database met

$data = $result->fetch_assoc();

Kan je de gegevens van elke rij ophalen met:

foreach($data as $rij) {
  // hier doe je iets met de gegevens uit de rij, bv:
  print $rij['procent'] . ' ' . $rij['staaf'] . PHP_EOL;  // nog geen HTML
}

Je kunt in plaats van tekst ook HTML uitvoer maken in de foreach-lus:


  print '<span style='display:block;height:1em;width:' . $rij['procent'] . '%;background:black'></span><br>';

Ik heb bovenstaande droog getypt en niet uitgeprobeerd, mocht je tegen een fout aanlopen dan willen we je hier graag verder helpen.

- Ariën -

31-10-2023 00:09

Ook dat is een mogelijkheid. Enige nadeel is dat de queries wat complexer te lezen zijn.

Ivo P

31-10-2023 09:07 gewijzigd op 31-10-2023 09:10

Kan MySQL wel overweg met WITH ?

--- sinds 8.0 kennelijk

Reageren

Inloggen om te reageren