Grafico reattivo con ajax

16-11-2017, 21.56.01

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

**alemoppo** · 16-11-2017, 23.59.55

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!

18-11-2017, 23.04.32

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

**alemoppo** · 18-11-2017, 23.12.45

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!

**darbula** · 18-11-2017, 23.26.02

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 ^^

19-11-2017, 16.12.45

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

**alemoppo** · 19-11-2017, 16.53.32

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.

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!

**darbula** · 19-11-2017, 16.57.52

$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

19-11-2017, 19.17.24

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.

**alemoppo** · 19-11-2017, 23.53.46

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!

20-11-2017, 03.14.01

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.

**darbula** · 20-11-2017, 03.24.56

@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..

**alemoppo** · 20-11-2017, 03.49.08

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!

**darbula** · 20-11-2017, 04.39.09

@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

20-11-2017, 15.50.05

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

**alemoppo** · 20-11-2017, 16.17.26

Nella funzione update, invece di myChart, usa myDoughnutChart.

Ciao!

20-11-2017, 19.37.44

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

Discussione: Grafico reattivo con ajax

LinkBack

Strumenti discussione

Display

Grafico reattivo con ajax

Regole di scrittura