Grafico dinamico mysql chartjs

M

Matteoarm99

Nuovo Utente
20 Mar 2020
6
0
1
Ciao, sto seguendo questo link https://phppot.com/php/creating-dynamic-data-graph-using-php-and-chart-js/ per la creazione di grafici dinamici con chartjs. A creare un grafico ci sono riuscito, collegando i dati con json. Però se provo a mettere due o più grafici nella stessa pagina, ovviamente cambiando i file data.php e il chart.js mi mostra solo l'ultimo grafico in ordine di scrittura, e calcola infatti solamente l'ultimo array e non tre array differenti dai tre diversi data.php
Come posso fare per inserire più di un grafico nella stessa pagina?
Se mi sono spiegato male chiedetemi pure altre info.
Grazie anticipatamente a tutti.
 
M

Matteoarm99

Nuovo Utente
20 Mar 2020
6
0
1
Tommy03 ha scritto:
Posta il tuo codice
Clicca per allargare...
Questo è l'html:
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Creating Dynamic Data Graph using PHP and Chart.js</title>
<style type="text/css">
BODY {
    width: 550PX;
}

#chart-container {
    width: 100%;
    height: auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>


</head>
<body>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>

    <script>
        $(document).ready(function () {
            showGraph();
        });


        function showGraph()
        {
            {
                $.post("data.php",
                function (data)
                {
                    console.log(data);
                     var name = [];
                    var marks = [];

                    for (var i in data) {
                        name.push(data[I].prodotto);
                        marks.push(data[I].prezzo);
                    }

                    var chartdata = {
                        labels: name,
                        datasets: [
                            {
                                label: 'Student Marks',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                        ]
                    };

                    var graphTarget = $("#graphCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                });
            }
        }
        </script>

    <div id="chart-container">
        <canvas id="grafico2"></canvas>
    </div>

    <script>
        $(document).ready(function () {
            showGraph();
        });


        function showGraph()
        {
            {
                $.post("data-1.php",
                function (data1)
                {
                    console.log(data1);
                     var name = [];
                    var marks = [];

                    for (var i in data1) {
                        name.push(data1[I].prodotto);
                        marks.push(data1[I].prezzo);
                    }

                    var chartdata = {
                        labels: name,
                        datasets: [
                            {
                                label: 'Student Marks',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                        ]
                    };

                    var graphTarget = $("#grafico2");

                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                });
            }
        }
        </script>

</body>
</html>[/I][/I][/I][/I]

Questi sono i due php:
PHP: 
[I][I][I][I]<?php
header('Content-Type: application/json');

$conn = mysqli_connect("localhost","root","matteo","gestionale");

$sqlQuery = "SELECT idFinite,prodotto,prezzo FROM finiteproduct ORDER BY prodotto";

$result = mysqli_query($conn,$sqlQuery);

$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

mysqli_close($conn);

echo json_encode($data);
?>[/I][/I][/I][/I]
PHP: 
[I][I][I][I]<?php
header('Content-Type: application/json');

$conn = mysqli_connect("localhost","root","matteo","gestionale");

$sqlQuery1 = "SELECT idSemi,prodotto,prezzo FROM semiproduct ORDER BY prodotto";

$result1 = mysqli_query($conn,$sqlQuery1);

$data1 = array();
foreach ($result1 as $row1) {
    $data1[] = $row1;
}

mysqli_close($conn);

echo json_encode($data1);
?>[/I][/I][/I][/I]
 
Ultima modifica:
Tommy03

Tommy03

Utente Attivo
6 Giu 2018
616
58
28
20
Vicenza
Io intanto proverei a cambiare così:
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Creating Dynamic Data Graph using PHP and Chart.js</title>
<style type="text/css">
BODY {
width: 550PX;
}

.chart-container {
width: 100%;
height: auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>


</head>
<body>
<div class="chart-container">
<canvas id="graphCanvas"></canvas>
</div>
<div class="chart-container">
<canvas id="grafico2"></canvas>
</div>
<script>
$(document).ready(function () {
showGraph();
showGraph1();
});


function showGraph()
{
{
$.post("data.php",
function (data)
{
console.log(data);
var name = [];
var marks = [];

for (var i in data) {
name.push(data.prodotto);
marks.push(data.prezzo);
}

var chartdata = {
labels: name,
datasets: [
{
label: 'Student Marks',
backgroundColor: '#49e2ff',
borderColor: '#46d5f1',
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
data: marks
}
]
};

var graphTarget = $("#graphCanvas");

var barGraph = new Chart(graphTarget, {
type: 'bar',
data: chartdata
});
});
}
}

function showGraph1()
{
{
$.post("data-1.php",
function (data1)
{
console.log(data1);
var name = [];
var marks = [];

for (var i in data1) {
name.push(data1.prodotto);
marks.push(data1.prezzo);
}

var chartdata = {
labels: name,
datasets: [
{
label: 'Student Marks',
backgroundColor: '#49e2ff',
borderColor: '#46d5f1',
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
data: marks
}
]
};

var graphTarget = $("#grafico2");

var barGraph = new Chart(graphTarget, {
type: 'bar',
data: chartdata
});
});
}
}
</script>

</body>
</html>
Forse non risolve il problema ma penso sia più corretto così
 
Max 1

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
@Matteoarm99
Correggi tutti i tuoi post mettendo il codice nei sui appositi tag!!! Altrimenti ti chiudo le discussioni non posso correrti dietro correggendo tutto quello che posti!

Leggi il regolamento del forum
 
M

Matteoarm99

Nuovo Utente
20 Mar 2020
6
0
1
Tommy03 ha scritto:
Io intanto proverei a cambiare così:
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Creating Dynamic Data Graph using PHP and Chart.js</title>
<style type="text/css">
BODY {
width: 550PX;
}

.chart-container {
width: 100%;
height: auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>


</head>
<body>
<div class="chart-container">
<canvas id="graphCanvas"></canvas>
</div>
<div class="chart-container">
<canvas id="grafico2"></canvas>
</div>
<script>
$(document).ready(function () {
showGraph();
showGraph1();
});


function showGraph()
{
{
$.post("data.php",
function (data)
{
console.log(data);
var name = [];
var marks = [];

for (var i in data) {
name.push(data.prodotto);
marks.push(data.prezzo);
}

var chartdata = {
labels: name,
datasets: [
{
label: 'Student Marks',
backgroundColor: '#49e2ff',
borderColor: '#46d5f1',
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
data: marks
}
]
};

var graphTarget = $("#graphCanvas");

var barGraph = new Chart(graphTarget, {
type: 'bar',
data: chartdata
});
});
}
}

function showGraph1()
{
{
$.post("data-1.php",
function (data1)
{
console.log(data1);
var name = [];
var marks = [];

for (var i in data1) {
name.push(data1.prodotto);
marks.push(data1.prezzo);
}

var chartdata = {
labels: name,
datasets: [
{
label: 'Student Marks',
backgroundColor: '#49e2ff',
borderColor: '#46d5f1',
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
data: marks
}
]
};

var graphTarget = $("#grafico2");

var barGraph = new Chart(graphTarget, {
type: 'bar',
data: chartdata
});
});
}
}
</script>

</body>
</html>
Forse non risolve il problema ma penso sia più corretto così
Clicca per allargare...
Ho provato ed ora mi compaiono i due grafici ed i due array sono corretti. Però come puoi vedere nell'immagine in allegato i grafici sono vuoti.
 

Allegati

  • grafici.png
    grafici.png
    78,8 KB · Visite: 499
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
S [PHP] [HTML] Come creare un grafico dinamico PHP 4
J [Cerco] [Collaborazione gratuita] Grafico per piccoli lavori di grafica Offerte e Richieste di Lavoro e/o Collaborazione 0
B Aumento dimensioni grafico Access Database 0
I [cerchiamo][retribuito] Grafico/a per stickers Offerte e Richieste di Lavoro e/o Collaborazione 0
J Videomaker & Grafico/a - Stage curriculare Offerte e Richieste di Lavoro e/o Collaborazione 0
max1974 Grafico Ajax Javascript 4
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
O Cerco grafico per sito wordpress Offerte e Richieste di Lavoro e/o Collaborazione 3
F Cerco grafico per inoltro lavori Offerte e Richieste di Lavoro e/o Collaborazione 3
max1974 [Javascript] Grafico ajax non funziona Javascript 0
A [Cerco] Staff grafico e programmatore per GdR PbC Offerte e Richieste di Lavoro e/o Collaborazione 1
edittaruocco [Photoshop] Immagine in editor grafico Photoshop 0
A [Retribuito][Offro] Restyling grafico portale PHP/HTML Offerte e Richieste di Lavoro e/o Collaborazione 0
V [Collaborazione] Cerco grafico 3D Offerte e Richieste di Lavoro e/o Collaborazione 0
T [HTML] [Prestashop] Problemino grafico su versione Responsive del sito CMS (Content Management System) 9
C [cerco] Webmaster- grafico per tema WP Offerte e Richieste di Lavoro e/o Collaborazione 3
L Offro retribuzione per lo sviluppo di un template grafico Offerte e Richieste di Lavoro e/o Collaborazione 7
M [SI CERCA] Grafico per rinnovare applicazione My Shopping List Offerte e Richieste di Lavoro e/o Collaborazione 0
D [Cerco retribuito] Grafico per UI/UX app e logo Offerte e Richieste di Lavoro e/o Collaborazione 3
P cerco grafico web per rifacimento sito in veste mobile Offerte e Richieste di Lavoro e/o Collaborazione 4
P Cerco grafico per creazione siti web mobile e tradizionali Webdesign e Grafica 1
S Form e tabella, problema grafico HTML e CSS 2
A [Gratuito] [Cerco] Grafico per progetto Offerte e Richieste di Lavoro e/o Collaborazione 0
L Ultrabook pee grafico Hardware 10
P riproduzione schema grafico MS Access 0
D Cercasi grafico web designer per web app Offerte e Richieste di Lavoro e/o Collaborazione 3
M Aggiornare grafico con i dati inseriti in tabella PHP 0
Sargon grafico-php-mysql PHP 6
M Creazione grafico ad istogrammi con dati estratti da database mysql PHP 5
M Grafico con php PHP 0
L Realizzare script con grafico e tabelle che si aggiornano automaticamente jQuery 1
V [Retribuito] Ricerca grafico/sviluppatore per realizzazione sito web aziendale Offerte e Richieste di Lavoro e/o Collaborazione 0
M Creare un grafico continuamente aggiornato con i dati provenienti da un database PHP 12
A Grafico XY con php PHP 3
M Grafico con php e librerie immagine PHP 2
S [GRATUITO] Per framework, e progetto open Source cercasi programmatore PHP e GRAFICO WEB Designer Offerte e Richieste di Lavoro e/o Collaborazione 1
P grafico php PHP 0
neo996sps Inserire grafico google analytics in pagina PHP Google Analytics 0
S Cercasi grafico per creazione giochi Offerte e Richieste di Lavoro e/o Collaborazione 0
S Cercasi grafico per realizzazione banner grafici compenso Offerte e Richieste di Lavoro e/o Collaborazione 6
S Grafico in Chart.js colonne di colore diverso PHP 0
E ricerca grafico per lavoretti urgenti Offerte e Richieste di Lavoro e/o Collaborazione 0
S Grafico in PhpGraphLib PHP 0
I Cerco collaborazione grafico Offerte e Richieste di Lavoro e/o Collaborazione 0
F [inizialmente gratuito]CERCASI GRAFICO Offerte e Richieste di Lavoro e/o Collaborazione 0
F [Offro Collaborazione Retribuita] Cercasi grafico e programmatore Offerte e Richieste di Lavoro e/o Collaborazione 0
D salvare grafico sul server PHP 1
V Viper Management ricerca WEBMASTER e GRAFICO sede Milano Offerte e Richieste di Lavoro e/o Collaborazione 0
I Cercasi 1 grafico 1 programmatore php Offerte e Richieste di Lavoro e/o Collaborazione 2
C Cercasi programmatore e grafico per Gdr play by chat Offerte e Richieste di Lavoro e/o Collaborazione 0

Discussioni simili

Alto Basso