0
Hello, good morning!!!
I’m creating a graph that pulls data from a database and shows it on the screen,
with php, mysql, ajax, Chartjs and jQuery. When I use only one dataset,
everything works fine, however, when using 2 or 3, the labels
repeat themselves, and everything gets confused.
I need help urgently to solve this problem.
I would also like to know how I could do
Select start and end dates by calendar form.
Follow the chart print:
The codes I wrote are listed below:
html
<div class="col-md-9 col-sm-9 grid grid-row-9" style="display: flex; flex-direction: row; justify-content: center; padding-top: 0; padding-left: 23%;">
<div class="grafico-main">
<!-- <canvas id="grafico1" style="height: 50vh; width: 77vw"></canvas> -->
<canvas id="myChart" style="height: 50vh; width: 77vw"></canvas>
</div>
<div>
<table class="table table-responsive table-borderless" style="padding-top: 10vh;">
<tr>
<td style="font-size: 20px;">
<p><i class="fa fa-square blue"></i>Atendidas </p>
</td>
</tr>
<tr>
<td style="font-size: 20px;">
<p><i class="fa fa-square green"></i>Ocupadas </p>
</td>
</tr>
<tr>
<td style="font-size: 20px;">
<p><i class="fa fa-square red"></i>Perdidas </p>
</td>
</tr>
<!-- <tr>
<td style="font-size: 20px;">
<p><i class="fa fa-square red"></i>Rejeitadas </p>
</td>
</tr> -->
</table>
</div>
</div>
js:
$('document').ready(function () {
$.ajax({
type: "POST",
url: "chart.php",
dataType: "json",
success: function (data) {
/*for (var i in data) {
console.log(data[i].disposition)
}*/
var timearray = [""];
var sttssarray = [""];
var x = [];
var y = [];
var z = [];
var a = 0;
var b = 0;
var c = 0;
for (var i = 0; i < data.length; i++) {
timearray.push(data[i].callTime);
sttssarray.push(data[i].disposition);
if (sttssarray[i] == "ANSWERED") {
a++;
b = b+0;
c = c+0;
x.push(x[i] = a);
y.push(y[i] = b);
z.push(z[i] = c);
} else if (sttssarray[i] == "BUSY") {
a = a+0;
b++;
c = c+0;
x.push(x[i] = a);
y.push(y[i] = b);
z.push(z[i] = c);
} else if (sttssarray[i] == "NO ANSWER"){
a = a+0;
b = b+0;
c++;
x.push(x[i] = a);
y.push(y[i] = b);
z.push(z[i] = c);
}
}
console.log(timearray.values)
x.sort(function(l, m){
return l > m;
})
y.sort(function(o, p){
return o > p;
})
z.sort(function(g, h) {
return g > h;
})
timearray.sort(function(q, t){
return q > t;
})
timearray.pop();
//grafico(dayarray, sttsarray);
grafico (timearray, x, y, z);
grafico2 (a, b, c);
}
});
})
function grafico(callTime, x, y, z) {
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: callTime,
datasets: [{
label: '',
backgroundColor: 'rgba(54, 162, 235, 0.3)',
borderColor: 'rgba(54, 162, 235, 1)',
data: x
},
{
label: '',
backgroundColor: 'rgba(75, 192, 192, 0.3)',
borderColor: 'rgba(75, 192, 192, 1)',
data: y
},
{
label: '',
backgroundColor: 'rgba(220, 60, 60, 0.3',
borderColor: 'rgba(220, 60, 60, 0.3',
data: z
}
]
},
/*options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}*/
});
}
php
<?php
$pdo = new PDO('mysql:host=localhost;dbname=minhabase;port=3306;charset=utf8', 'usuario', 'senha');
$sql = "SELECT disposition, callDay, callTime FROM chamadas ORDER BY callDay+callTime";
$statement = $pdo->prepare($sql);
$statement->execute();
while($results = $statement->fetch(PDO::FETCH_ASSOC)) {
$result[] = $results;
}
echo json_encode($result);
?>
mysql
MariaDB [minhabase]> SELECT * FROM chamadas;
+--------+------------+----------+-------------+------+------+----------+
| callId | callDay | callTime | disposition | src | dst | duration |
+--------+------------+----------+-------------+------+------+----------+
| 7 | 2020-12-18 | 08:00:00 | ANSWERED | 5001 | 5002 | 00:00:59 |
| 8 | 2020-12-18 | 08:00:00 | NO ANSWER | 5002 | 5010 | 00:25:15 |
| 9 | 2020-12-18 | 08:00:00 | BUSY | 5009 | 5004 | 00:00:00 |
| 10 | 2020-12-18 | 09:00:00 | ANSWERED | 5002 | 5001 | 00:21:24 |
| 11 | 2020-12-18 | 09:00:00 | NO ANSWER | 5001 | 5010 | 00:01:06 |
| 12 | 2020-12-18 | 09:00:00 | BUSY | 5006 | 5004 | 00:00:00 |
| 13 | 2020-12-18 | 10:00:00 | ANSWERED | 5002 | 5008 | 00:12:24 |
| 14 | 2020-12-18 | 10:00:00 | NO ANSWER | 5010 | 5002 | 00:00:40 |
| 15 | 2020-12-18 | 10:00:00 | BUSY | 5007 | 5018 | 00:00:00 |
| 16 | 2020-12-18 | 11:00:00 | ANSWERED | 5008 | 5012 | 00:21:51 |
| 17 | 2020-12-18 | 11:00:00 | NO ANSWER | 5002 | 5001 | 00:00:16 |
| 18 | 2020-12-18 | 11:00:00 | BUSY | 5021 | 5008 | 00:00:00 |
| 19 | 2020-12-18 | 12:00:00 | ANSWERED | 5006 | 5003 | 02:32:45 |
| 20 | 2020-12-18 | 12:00:00 | NO ANSWER | 5001 | 5010 | 00:00:45 |
| 21 | 2020-12-18 | 12:00:00 | BUSY | 5014 | 5006 | 00:00:00 |
| 22 | 2020-12-18 | 13:00:00 | ANSWERED | 5004 | 5003 | 00:49:18 |
| 23 | 2020-12-18 | 13:00:00 | NO ANSWER | 5003 | 5007 | 00:00:39 |
| 24 | 2020-12-18 | 13:00:00 | BUSY | 5034 | 5021 | 00:00:00 |
| 25 | 2020-12-18 | 08:15:00 | ANSWERED | 5002 | 5018 | 00:00:59 |
| 26 | 2020-12-18 | 08:30:00 | ANSWERED | 5009 | 5010 | 00:32:54 |
| 27 | 2021-01-05 | 18:00:00 | ANSWERED | 5001 | 5005 | 00:02:18 |
+--------+------------+----------+-------------+------+------+----------+
21 rows in set (0.075 sec)
MariaDB [minhabase]>
I think I’m making some big mistake, how can I solve this?