Grafico dinamico mysql chartjs

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.
 

Matteoarm99

Nuovo Utente
20 Mar 2020
6
0
1
Posta il tuo codice
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

Utente Attivo
6 Giu 2018
486
49
28
17
Bassano del Grappa (VI)
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.278
330
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
 

Matteoarm99

Nuovo Utente
20 Mar 2020
6
0
1
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ì
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