Grafico dinamico mysql chartjs

Matteoarm99 · 24 Mar 2020

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.

Tommy03 · 24 Mar 2020

Posta il tuo codice

Matteoarm99 · 24 Mar 2020

Tommy03 ha scritto:
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]

Tommy03 · 25 Mar 2020

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 · 25 Mar 2020

@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 · 25 Mar 2020

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ì

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.

Cerca

Cerca

Grafico dinamico mysql chartjs

Matteoarm99

Nuovo Utente

Tommy03

Utente Attivo

Matteoarm99

Nuovo Utente

Tommy03

Utente Attivo

Max 1

Super Moderatore

Matteoarm99

Nuovo Utente

Allegati

Discussioni simili