Visualizzazione risultati 1 fino 17 di 17
Like Tree3Likes
  • 1 Post By alemoppo
  • 1 Post By darbula
  • 1 Post By alemoppo

Discussione: Grafico reattivo con ajax

  1. #1
    Guest

    Predefinito Grafico reattivo con ajax

    Salve a tutti sto cercando di realizzare un grafico a ciambella reattivo, per realizzare il grafico ho utilizzato la libreria Chart.js http://www.chartjs.org/docs/latest/
    ecco il codice del grafico

    Codice:
    var ctx = document.getElementById("myChart");
    var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Red", "Blue"],
            datasets: [{
                label: '# of Votes',
                data: [22, 19],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
             cutoutPercentage:[50]},
    });
    Per renderlo reattivo volevo utilizzare Ajax, quindi tramite ajax prendere i dati da una pagina php connesa al database e poi inserirli nel'array data del grafico che contiene i dati da rapresentare, ma essendo un principiante non so bene come poter fare se qualcuno può fornirmi un esempio o darmi "una dritta" gliene sarei grato grazie.
    e buona serata

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,061

    Predefinito

    Esempietto:

    Codice HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title> test chart ajax </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
    <script src="ajaxAlemoppo.min.js"></script>
    <style type="text/css">
    canvas
    {
    	width:800px !important;
    	height:800px !important;
    }
    </style>
    </head>
    <body>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
    var myChart;
    window.onload = function() {
    	var ctx = document.getElementById("myChart").getContext('2d');
    	 myChart = new Chart(ctx, {
    		type: 'bar',
    		data: {
    			labels: ["Red", "Blue"],
    			datasets: [{
    				label: '# of Votes',
    				data: [4, 6],
    				backgroundColor: [
    					'rgba(255, 99, 132, 0.2)',
    					'rgba(54, 162, 235, 0.2)',
    				],
    				borderColor: [
    					'rgba(255,99,132,1)',
    					'rgba(54, 162, 235, 1)'
    				],
    				borderWidth: 1
    			}]
    		},
    
    		options: {
    			scales: {
    				yAxes: [{
    					ticks: {
    						beginAtZero:true,
    						max:10
    					}
    				}]
    			}
    		}
    	});
    	
    	setInterval(update, 2000);
    	
    }
    function update()
    {
    	ajaxAlemoppo("ajaxcall.php", "POST", "rand="+Math.random(), true, function(response) { 
    		dati = JSON.parse(response);
    		myChart.data.datasets[0].data[0] = dati[0];
    		myChart.data.datasets[0].data[1] = dati[1];
    		myChart.update();
    	});
    }
    
    </script>
    </body>
    </html>
    ajaxcall.php
    Codice PHP:
    <?php
    echo json_encode(array(rand(3,10),rand(3,10)));
    ?>
    Puoi vederlo qui.

    Comunque è spiegato qui.

    Ciao!
    Ultima modifica di alemoppo : 17-11-2017 alle ore 00.30.02 Motivo: +css

  3. #3
    Guest

    Predefinito

    La ringrazio per l'aiuto, l' unico problema è che non vorrei caricare il grafico di dati casuali ma prenderli direttamente dal database, ho provato a modificare il suo lavoro per adattarlo ai miei bisogni ma non riesco secondome ho sbagliato a modificare anche la richiesta ajax dato che ho tolto il random, di seguito le lascio il file php collegato alla richiesta ajax e al database e lo script ajax, Grazie.

    ajaxcall.php
    Codice PHP:
    <?php
    //eseguo la connessione
    $mysqli = new mysqli('localhost', 'sitodiprova1927', 'la mia password', 'my_sitodiprova1927');
    if (
    $mysqli->connect_error) {
    die(
    'Errore di connessione (' . $mysqli->connect_errno . ') '
    . $mysqli->connect_error);
    }

    //creo le variabili
    $positivo
    $negativo

    //ci inserisco la somma dei dati dei rispettivi campi, che contengono numeri interi
    $query = "INSERT INTO ( '$positivo','$negativo') VALUES conto ( SUM(positivo), SUM(negativo))";

    //inserisco le variabili nel database
    echo json_encode(array($positivo,$negativo));

    ?>
    codice js con html
    Codice:
    <script>
    var myDoughnutChart;
    window.onload = function() {
    var ctx = document.getElementById("myChart");
    myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["positivo", "negativo"],
            datasets: [{
                label: '# of Votes',
                data: [1, 1],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
             cutoutPercentage:[50]},
    });
    	
    	setInterval(update, 2000);
    	
    }
    
    function update()
    {
    	ajaxAlemoppo("ajaxcall.php", "POST", true, function(response) { 
    		dati = JSON.parse(response);
    		myChart.data.datasets[0].data[0] = dati[0];
    		myChart.data.datasets[0].data[1] = dati[1];
    		myChart.update();
    	});
    }
    </script>

    Grazie dell'aiuto e buona serata
    Ultima modifica di sitodiprova1927 : 18-11-2017 alle ore 23.12.27

  4. #4
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,061

    Predefinito

    Invece della INSERT, che inserisce i dati nel database, occorre leggerli tramite una SELECT (in questo caso particolare, SELECT e SUM (doc. ufficiale).
    Poi, oltre a inizializzare la variabile $query, occorre eseguire la query tramite il metodo query(). Nel primo esempio si capisce molto bene.

    È bene farlo da soli perché, oltre a imparare, si riesce anche a personalizzare meglio il tutto.

    In ogni caso, siamo qui per aiutare in caso in cui si incontrano problemi.

    Ciao!

  5. #5
    darbula non è connesso AlterGuru 2500
    Data registrazione
    24-04-2011
    Messaggi
    2,894

    Predefinito

    Aggiungo che per dichiarerà variabili senza valori si fa così..
    Codice PHP:
    $positivo;
    $negativo;
    però il parser di altervista non lo validera quindi
    Codice PHP:
    $positivo ="qui sono testo ma dovrei essere il risultato di una query select";
    $negativo = "qui sono testo ma dovrei essere il risultato di una query select";
    bravo sitodiprova stai facendo progressi ^^

  6. #6
    Guest

    Predefinito

    Salve a tutti e grazie dell'aiuto, purtroppo ancora non funziona ma credo di esserci vicini prima di inserire gli script dei file php e html volevo chiedere ad alemoppo se lo script di seguito è un CDN o se devo scaricare un file.
    Codice HTML:
    <script src="ajaxAlemoppo.min.js"></script>
    Detto questo di seguito vi posto il file php aggiornato con i vostri consigli
    Codice PHP:
    <?php
    //eseguo la connessione
    $mysqli = new mysqli('localhost', 'sitodiprova1927', 'la ma password', 'my_sitodiprova1927');
    if (
    $mysqli->connect_error) {
    die(
    'Errore di connessione (' . $mysqli->connect_errno . ') '
    . $mysqli->connect_error);
    }
    $positivo="SELECT SUM(positivo) AS TotalPositivo FROM conto";
    $negativo="SELECT SUM(negativo) AS TotalNegativo FROM conto";
    // Esecuzione della query positivo e controllo degli eventuali errori
    if (!$mysqli->query($positivo)) {
    die(
    $mysqli->error);
    }
    // Esecuzione della query negativo e controllo degli eventuali errori
    if (!$mysqli->query($negativo)) {
    die(
    $mysqli->error);
    }

    echo
    json_encode(array($positivo,$negativo));

    ?>
    e il file html con js

    Codice HTML:
    <!DOCTYPE html>
    <html lang="it">
    <head>
    <title>webapp</title>
    <meta charset="utf-8">
    <link rel="icon" href="icona.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
    <script src="ajaxAlemoppo.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <style>
    .atti{
    
    margin-top:100px;}
    .tabbella{
    
    margin-top:100px;}
    </style>
    </head>
    <body>
    <div>
    <div class="chart-container" style="position: relative; height:20vh; width:40vw">
    <canvas id="myChart"></canvas>
    </div>
    <script>
    var myDoughnutChart;
    window.onload = function() {
    var ctx = document.getElementById("myChart");
    myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Red", "Blue"],
            datasets: [{
                label: '# of Votes',
                data: [1, 1],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
             cutoutPercentage:[50]},
    });
    	
    	setInterval(update, 2000);
    	
    }
    function update()
    {
    	ajaxAlemoppo("ajaxcall.php", "POST", true, function(response) { 
    		dati = JSON.parse(response);
    		myChart.data.datasets[0].data[0] = dati[0];
    		myChart.data.datasets[0].data[1] = dati[1];
    		myChart.update();
    	});
    }
    </script>
    </div>
    </body>
    </html>
    Grazie a tutti e buona giornata

  7. #7
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,061

    Predefinito

    Puoi fare un'unica query di questo tipo:

    Codice PHP:
    $query="SELECT SUM(positivo) AS TotalPositivo, SUM(negativo) AS TotalNegativo FROM conto";
    Poi esegui la query, ma ti serve prendere ciò che ritorna, ovvero un oggetto mysqli_result:
    Codice PHP:
    if (!$result = $mysqli->query($query)) {
    die(
    $mysqli->error);
    }
    Poi, devi estrarre i valori invocando ad esempio la fetch_assoc() dell'oggetto mysqli_result:

    Codice PHP:
    if($dati = $result->fetch_assoc())
    {
    $positivo = $dati['TotalPositivo'];
    $negativo = $dati['TotalNegativo'];
    }
    else
    {
    die(
    'Nessun dato trovato!');
    }
    A questo punto avrai le due variabili, $positivo e $negativo con i valori. O almeno dovrebbe: sono anni che non scrivo più PHP e non ho provato il codice.

    Citazione Originalmente inviato da sitodiprova1927
    volevo chiedere ad alemoppo se lo script di seguito è un CDN o se devo scaricare un file.
    Quella era una libreriettina che avevo fatto per usare ajax in modo semplice. Se vuoi puoi usarla, la trovi qui da scaricare: https://github.com/alemoppo/ajaxAlemoppo (oppure puoi scaricarla dall'esempio che ti ho linkato)

    Ma in generale puoi usare ajax come vuoi: o con un tuo script o tramite jquery o qualsiasi altra cosa...

    Ciao!
    Ultima modifica di alemoppo : 19-11-2017 alle ore 16.57.16
    sitodiprova1927 likes this.

  8. #8
    darbula non è connesso AlterGuru 2500
    Data registrazione
    24-04-2011
    Messaggi
    2,894

    Predefinito

    $positivo e $negativo non è il risultato della query ma la query che effettui.. Nota com'è racchiuso il risultato di una query if($result ecc.. http://php.net/manual/en/mysqli.query.php ... Io ti consiglio di provare prima il database e dopo che ci sei riuscito lo implementi per altri script..
    Cmq. Credo che la query che effettui da il totale di tutti gli utenti e fa il saldo complessivo stessa cosa per il saldo negativo
    Ultima modifica di darbula : 19-11-2017 alle ore 17.01.28

  9. #9
    Guest

    Predefinito

    Buonasera il file php ora va, infatti visitando il file php http://sitodiprova1927.altervista.or...a/ajaxcall.php restituisce l'array con le somme del positivo e del negativo, quindi penso che il problema persista nella parte javascript con Ajax, infatti io avevo modificato lo script di alemoppo
    Codice:
    function update()
    {
    	ajaxAlemoppo("ajaxcall.php", "POST", "rand="+Math.random(), true, function(response) { 
    		dati = JSON.parse(response);
    		myChart.data.datasets[0].data[0] = dati[0];
    		myChart.data.datasets[0].data[1] = dati[1];
    		myChart.update();
    	});
    }
    in
    Codice:
    function update()
    {
    	ajaxAlemoppo("ajaxcall.php", "POST", true, function(response) { 
    		dati = JSON.parse(response);
    		myChart.data.datasets[0].data[0] = dati[0];
    		myChart.data.datasets[0].data[1] = dati[1];
    		myChart.update();
    	});
    }
    come si può vedere manca la parte dopo il Post.
    Codice:
    "rand="+Math.random()
    Grazie a Alemoppo e Darbula, per l'aiuto.

  10. #10
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,061

    Predefinito

    Come mai ci sono i doppi apici nell'array php?

    Comunque, la parte del rand andrebbe lasciata in quanto inviando ogni volta un parametro diverso si evita di avere risposte non aggiornate. In ogni caso, quella funzione ha 5 parametri e non 4.

    Ciao!

  11. #11
    Guest

    Predefinito

    Guarda perché ci sono i doppi apici nel'array non ne ho idea nel database sono salvati come INT(11), a questo link ho messo un immagine dei campi http://sitodiprova1927.altervista.org/prova/Cattura.PNG.
    Comunque ho provato a fare innerHTML con i valori degli array dentro a dei tag <p> e funziona, quindi anche se la richiesta ajax funziona e il file php inserisce la somma dei campi nel'array non funziona.


    Codice HTML:
    <!DOCTYPE html>
    <html lang="it">
    <head>
    <title>webapp</title>
    <meta charset="utf-8">
    <link rel="icon" href="icona.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
    <script src="ajaxAlemoppo.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
    .atti{
    
    margin-top:100px;}
    .tabbella{
    
    margin-top:100px;}
    </style>
    </head>
    <body>
    <div>
    <div class="chart-container" style="position: relative; height:20vh; width:40vw">
    <canvas id="myChart"></canvas>
    </div>
    <script>
    var myDoughnutChart;
    window.onload = function() {
    var ctx = document.getElementById("myChart");
    myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Red", "Blue"],
            datasets: [{
                label: '# of Votes',
                data: [1, 1],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
             cutoutPercentage:[50]},
    });
    	
    	setInterval(update, 2000);
    	
    }
    function update()
    {
    	ajaxAlemoppo("ajaxcall.php", "POST", "rand="+Math.random(), true, function(response) { 
    		dati = JSON.parse(response);
    		myChart.data.datasets[0].data[0] = dati[0];
    		myChart.data.datasets[0].data[1] = dati[1];
    		myChart.update();
    	});
    }
    </script>
    </div>
    </body>
    </html>
    Codice PHP:
    <?php
    //eseguo la connessione
    $mysqli = new mysqli('localhost', 'sitodiprova1927', 'mesfvapp21', 'my_sitodiprova1927');
    if (
    $mysqli->connect_error) {
    die(
    'Errore di connessione (' . $mysqli->connect_errno . ') '
    . $mysqli->connect_error);
    }

    $query="SELECT SUM(positivo) AS TotalPositivo, SUM(negativo) AS TotalNegativo FROM conto";

    if (!
    $result = $mysqli->query($query)) {
    die(
    $mysqli->error);
    }

    if(
    $dati = $result->fetch_assoc())
    {
    $positivo = $dati['TotalPositivo'];
    $negativo = $dati['TotalNegativo'];
    }
    else
    {
    die(
    'Nessun dato trovato!');
    }

    echo
    json_encode(array($positivo,$negativo));

    ?>
    Ciao e grazie a tutti.

  12. #12
    darbula non è connesso AlterGuru 2500
    Data registrazione
    24-04-2011
    Messaggi
    2,894

    Predefinito

    @alemoppo un file json può essere codificato in utf-8 e se non si passa delle matrici partendo da zero la funzione applica stringhe..
    Note:
    When encoding an array, if the keys are not a continuous numeric sequence starting from 0, all keys are encoded as strings, and specified explicitly for each key-value pair.
    http://php.net/manual/en/function.json-encode.php
    Si dovrebbe utilizzare il modificatore per i numeri..

  13. #13
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,061

    Predefinito

    darbula:
    Codice PHP:
    array($positivo,$negativo)
    parte da 0. Inoltre lì parla delle chiavi ("all keys are encoded as strings"), non dei valori.

    Penso che la trasformazione in stringa avvenga comunque durante la lettura del database, ora non ricordo bene queste sottiliezze perché sono anni che non uso più PHP. Comunque parsando poi in json lato js non credo dia troppo fastidio, bisognerebbe vedere da console.

    In ogni caso, sitodiprova1927 dovresti guardare (usando gli strumenti sviluppatore presenti in ogni browser) il contenuto dell'array parse. Se è corretto (con dati[0] il numero positivo e dati[1] quello negativo), guarda comunque se appare qualche errore nella console, o vedi le richieste se vanno a buon fine.

    Se non riesci, linka la pagina, ma è un'ottimo modo per imparare gli strumenti per sviluppatori.

    Ciao!
    Ultima modifica di alemoppo : 20-11-2017 alle ore 03.53.34

  14. #14
    darbula non è connesso AlterGuru 2500
    Data registrazione
    24-04-2011
    Messaggi
    2,894

    Predefinito

    @alemoppo ho parzialmente ragione e mi spiego meglio ... Se lo screenshot di sitodiprova mostra che sono int allora vuole dire che il problema è il recupero dal database ma con il modificatore numerico cambia il valore in un intero...
    @sitodiprova puoi provare questo al posto di di quel risultato?
    Codice PHP:
    if(!($dati = $result->fetch_row()))
    {
    die(
    'Nessun dato trovato!');
    }
    echo
    json_encode($dati,JSON_NUMERIC_CHECK);
    non lo testato con il database ma se il valore è stringa questo è il giusto metodo per convertirlo..
    PS.. Questo metodo richiede php 5.3.3
    sitodiprova1927 likes this.

  15. #15
    Guest

    Predefinito

    Salve a tutti ho fatto un po di test, lo script di @darbula toglie gli apici dagli elementi nel'array inserendo nella posizione 0 il valore positivo e nella posizione 1 quello negativo.

    Ho provato anche a seguire i consigli di @alemoppo controllando con gli strumenti per sviluppatori e posso dire che in base a quello che posso capirci io dalla console mi sembra andare bene.

    Comunque qui in basso vi posto prima l'url del file php e della pagina html e poi gli script (pultroppo non si aggiorna ancora il grafico con i dati del database ma penso che si era capito)


    http://sitodiprova1927.altervista.or...a/ajaxcall.php

    http://sitodiprova1927.altervista.org/prova/pga.html

    Codice PHP:
    <?php
    //eseguo la connessione
    $mysqli = new mysqli('localhost', 'sitodiprova1927', 'la mia password', 'my_sitodiprova1927');
    if (
    $mysqli->connect_error) {
    die(
    'Errore di connessione (' . $mysqli->connect_errno . ') '
    . $mysqli->connect_error);
    }

    $query="SELECT SUM(positivo) AS TotalPositivo, SUM(negativo) AS TotalNegativo FROM conto";

    if (!
    $result = $mysqli->query($query)) {
    die(
    $mysqli->error);
    }

    if(!(
    $dati = $result->fetch_row()))
    {
    die(
    'Nessun dato trovato!');
    }
    echo
    json_encode($dati,JSON_NUMERIC_CHECK);

    ?>
    Codice HTML:
    <!DOCTYPE html>
    <html lang="it">
    <head>
    <title>webapp</title>
    <meta charset="utf-8">
    <link rel="icon" href="icona.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
    <script src="ajaxAlemoppo.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
    .atti{
    
    margin-top:100px;}
    .tabbella{
    
    margin-top:100px;}
    </style>
    </head>
    <body>
    <div>
    <div class="chart-container" style="position: relative; height:20vh; width:40vw">
    <canvas id="myChart"></canvas>
    </div>
    <script>
    var myDoughnutChart;
    window.onload = function() {
    var ctx = document.getElementById("myChart");
    myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Red", "Blue"],
            datasets: [{
                label: '# of Votes',
                data: [1, 1],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
             cutoutPercentage:[50]},
    });
    	
    	setInterval(update, 2000);
    	
    }
    function update()
    {
    	ajaxAlemoppo("ajaxcall.php", "POST", "rand="+Math.random(), true, function(response) { 
    		dati = JSON.parse(response);
    		myChart.data.datasets[0].data[0] = dati[0];
    		myChart.data.datasets[0].data[1] = dati[1];
    		myChart.update();
    	});
    }
    </script>
    </div>
    </body>
    </html>
    Grazie e buona giornata

  16. #16
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,061

    Predefinito

    Nella funzione update, invece di myChart, usa myDoughnutChart.

    Ciao!
    sitodiprova1927 likes this.

  17. #17
    Guest

    Predefinito

    Grande funziona era rimasto solo myDoughnutChart invece di myChart Grazie del'aiuto e complimenti.

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •