aggiungere grafico alla pagina php

[ik0yuo]

Buon Giorno a tutti, ho aggiunto correttamente un grafico che collegato al database mi da i risultati, ma se lo aggiungo un'altro su la stessa pagina non è visibile.. ho fatto delle ricerche su google ma non ho trovato la soluzione.

<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js">
</script>
<script>
      const ctx = document.getElementById("chart").getContext('2d');
      const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
          datasets: [{
            label: '<?= $mese ?>  <?= $type ?>',
            backgroundColor: 'rgba(161, 198, 247, 1)',
            borderColor: 'rgb(47, 128, 237)',
            data: [<?= $giorno1 ?>, <?= $giorno2 ?>, <?= $giorno3 ?>, <?= $giorno4 ?>, <?= $giorno5 ?>, <?= $giorno6 ?>, <?= $giorno7 ?>, <?= $giorno8 ?>, <?= $giorno9 ?>, <?= $giorno10 ?>, <?= $giorno11 ?>, <?= $giorno12 ?>, <?= $giorno13 ?>, <?= $giorno14 ?>, <?= $giorno15 ?>, <?= $giorno16 ?>, <?= $giorno17 ?>, <?= $giorno18 ?>, <?= $giorno19 ?>, <?= $giorno20 ?>, <?= $giorno21 ?>, <?= $giorno21 ?>, <?= $giorno23 ?>, <?= $giorno24 ?>, <?= $giorno25 ?>, <?= $giorno26 ?>, <?= $giorno27 ?>, <?= $giorno28 ?>, <?= $giorno29 ?>, <?= $giorno30 ?>, <?= $giorno31 ?>],
          }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
              }
            }]
          }
        },
      });
</script>

Come posso fare per far visualizzare lo stesso grafico due volte su la sessa pagina? grazie per l'aiuto

[alemoppo]

Ho provato così e funziona:

<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js">
</script>
<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>
<script>
      const ctx1 = document.getElementById("chart1").getContext('2d');
      const myChart1 = new Chart(ctx1, {
        type: 'bar',
        data: {
          labels: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
          datasets: [{
            label: '12  15',
            backgroundColor: 'rgba(161, 198, 247, 1)',
            borderColor: 'rgb(47, 128, 237)',
			data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 21, 23, 24, 25, 26, 27, 28, 29, 30, 31],
          }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
              }
            }]
          }
        },
      });
	  
	  const ctx2 = document.getElementById("chart2").getContext('2d');
      const myChart2 = new Chart(ctx2, {
        type: 'bar',
        data: {
          labels: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
          datasets: [{
            label: '12  15',
            backgroundColor: 'rgba(161, 198, 247, 1)',
            borderColor: 'rgb(47, 128, 237)',
			data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 21, 23, 24, 25, 26, 27, 28, 29, 30, 31],
          }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
              }
            }]
          }
        },
      });
</script>

Se non riesci, puoi indicare l'URL?

p.s: nota che hai messo due volte $giorno21 e non c'è $giorno22. Ti suggerirei di automatizzare $giornoX con un array.

Ciao!

[GraphOGLRisorse]

Salve,
oltre a quanto menzioato da alemoppo, un modo per semplificare e più funzionale, può essere quello di creare una semplice calsse PHP.

Qulcosa tipo:

<?php
class Grafico {
  public $mese;
  public $type;
  
  public $giorno = array();

  public function __construct() {
    // valori recuperati dal database  
    $this->mese = $mese; 
    $this->type = $type; 
    $this->giorno = array($giorno1, $giorno2, $giorno3, ....); 
  }
  public function get_mese() {
    return $this->mese;
  }
  public function get_type() {
    return $this->type;
  }
  public function get_giorno($num) {
    return $this->giorno[$num];
  }
}
?>

Notare che nella classe non ho inserito tutte le variabili di recupero dei valori dal database.

Esempio d'uso:

<?php
$grafico1 = new Grafico();
echo $grafico1->get_mese();
echo "<br>";
echo $grafico1->get_type();
echo "<br>";
echo $grafico1->get_giorno(0);
echo "<br>";
echo $grafico1->get_giorno(1);
echo "<br><br>";

$grafico2 = new Grafico();
echo $grafico2->get_mese();
echo "<br>";
echo $grafico2->get_type();
echo "<br>";
echo $grafico2->get_giorno(0);
echo "<br>";
echo $grafico2->get_giorno(1);
?>

Notare che il numero del giorno in get_giorno() parte da 0 e non da 1, quinidi i vaolori inseriti nella funzione andranno da 0 a 30.

Cordiali saluti.

[ik0yuo]

Ciao a tutti grazie per l'aiuto e suggerimenti ho provato in locale e funziona perfettamente quindi dovevo solo modificare
<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>
<script>
const ctx1 = document.getElementById("chart1").getContext('2d') ;
const myChart1 = new Chart(ctx1, {
e nell'altro grafico
const ctx2 = document.getElementById("chart2").getContext('2d') ;
const myChart2 = new Chart(ctx2, {

ottimo ho imparato una cosa nuova quindi se voglio aggiungere un'alto grafico sarà sufficente aggiungere
<canvas id="chart3"></canvas>
esatto? grazie mille per l'aiuto

[alemoppo]

Sì, come regola HTML gli id DEVONO essere univoci: non possono esserci più di un elemento con lo stesso ID per pagina.

Ciao!

[ik0yuo]

Buongiorno la grafica va perfettamente ho provato ad aggiungere un 3° grafico e va.. ma non capisco perche il grafico 3 mi fa vedere l'anno uno si e uno no mi puoi indicare come far si che si vedono tutti gli anni? che ho inserito? questo è il url
https://www.ik0yuo.org/?page=statistic

un'altra domanda se posso GraphOGLRisorse a suggerito di creare una semplice calsse PHP. qual'è la differenze se o non inserita ?
Grazie e buona domenica

[alemoppo]

Gli anni non vengono mostrati semplicemente perché "non ci stanno".
Se provi ad esempio ad allargare tantissimo il grafico, otterresti:


Per la classe PHP, riusciresti a gestire meglio e più elegantemente il codice. Io pensavo più ad usare dei cicli (ad esempio for) così da iterare l'array invece di scrivere a mano tutte le variabili una ad una dove è possibile fare errori.

Ciao!