This question is an exact duplicate of:
I don't know why my chartjs result like this. The result in chart 1 should've been men, women, other. and the result in chart 2 should've been "FAPERTA, FKH, FPIK, FAPET, FAHUTAN, FATETA, FMIPA, FEM, FEMA, other." but why the result like this picture? I want to make"other" chart appear just one time, but "other" appear more than one time. The data result also incorrect. Could you please help me to solve this code? thankyou so much
PHP
<?php
//setting header to json
header('Content-Type: application/json');
//database
define('DB_HOST', '127.0.0.1');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'dbintegrasi');
//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if(!$mysqli){
die("Connection failed: " . $mysqli->error);
}
//query to get data from the table
$query = sprintf("SELECT JenisKelaminID, COUNT(JenisKelaminID) as jumlah FROM tahunmasukmagister GROUP BY JenisKelaminID");
$query2 = sprintf("SELECT Fakultas, COUNT(Fakultas) as jumlah_orang FROM s2view GROUP BY Fakultas");
//execute query
$result = $mysqli->query($query);
$result2 = $mysqli->query($query2);
//loop through the returned data
$data = array();
foreach ($result as $row){
$data[] = $row;
}
foreach ($result2 as $row){
$data[] = $row;
}
//freee memory associated with result
$result->close();
$result2->close();
//close connection
$mysqli->close();
//new print the data
print json_encode($data);
JAVASCRIPT CODE
$(document).ready(function(){
$.ajax({
url: "http://localhost/chartjs/data.php",
method: "GET",
success: function(data) {
console.log(data);
var Gender = [];
var jumlah = [];
var Fakultas = [];
var jumlah_orang = [];
for(var i in data)
{
//Gender.push("Gender " + data[i].JenisKelaminID);
if(data[i].JenisKelaminID == 1)
{
Gender.push("Men");
}
if(data[i].JenisKelaminID == 2)
{
Gender.push("Women");
}
else
{
Gender.push("Other");
}
jumlah.push(data[i].jumlah);
if(data[i].Fakultas == "A")
{
Fakultas.push("FAPERTA");
}
if(data[i].Fakultas == "B")
{
Fakultas.push("FKH");
}
if(data[i].Fakultas == "C")
{
Fakultas.push("FPIK");
}
if(data[i].Fakultas == "D")
{
Fakultas.push("FAPET");
}
if(data[i].Fakultas == "E")
{
Fakultas.push("FAHUTAN");
}
if(data[i].Fakultas == "F")
{
Fakultas.push("FATETA");
}
if(data[i].Fakultas == "G")
{
Fakultas.push("FMIPA");
}
if(data[i].Fakultas == "H")
{
Fakultas.push("FEM");
}
if(data[i].Fakultas == "I")
{
Fakultas.push("FEMA");
}
else
{
Fakultas.push("Other");
}
jumlah_orang.push(data[i].jumlah_orang);
}
var chartdata = {
labels: Gender,
datasets: [
{
label : 'Total',
backgroundColor: [
'rgba(79, 181, 59, 1)', //green for men
'rgba(239, 87, 196, 1)', //pink for women
'rgba(166, 160, 164, 1)', //grey for other
],
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: jumlah
}
]
};
var chartdata2 = {
labels: Fakultas,
datasets: [
{
label : 'Total',
backgroundColor: [
'rgba(79, 181, 59, 1)',
'rgba(239, 87, 196, 1)',
'rgba(166, 160, 164, 1)',
'rgba(16, 60, 64, 1)',
'rgba(66, 16, 164, 1)',
'rgba(77, 18, 74, 1)',
'rgba(6, 60, 64, 1)',
'rgba(86, 10, 64, 1)',
],
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: jumlah_orang
}
]
};
var ctx = $("#mycanvas");
var ctx2 = $("#mycanvas2");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
var barGraph2 = new Chart(ctx2, {
type: 'bar',
data: chartdata2
});
},
error: function(data) {
console.log(data);
}
});
});
Aucun commentaire:
Enregistrer un commentaire