Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
cara filter data di chart.js berdasarkan hari saat ini
saya pakai bahasa php native & database mysqli.saya menampilkan data di chart.js nah saya ingin bisa filter data berdasarkan hari,bagaimana caranya terimakasih
<canvas class="d-block w-100" id="qety" ></canvas>
<?php
$qty1 = mysqli_query($koneksi, "select * from test_mesina3");
$qty2 = mysqli_query($koneksi, "select * from test_mesina3");
$qty3 = mysqli_num_rows($query);
<script>
var ctx = document.getElementById('qety').getContext('2d');
var qety = new Chart(ctx, {
//chart akan ditampilkan sebagai bar chart
type: 'line',
data: {
//membuat label chart
labels: [<?php while ($b = mysqli_fetch_array($qty1)) { echo '"' . ($b['waktu']) . '",';}?>],
datasets: [{
label: "qty",
borderColor: "#80b6f4",
pointBorderColor: "#80b6f4",
pointBackgroundColortime_diff: "#80b6f4",
pointHoverBackgroundColor: "#80b6f4",
pointHoverBorderColor: "#80b6f4",
pointBorderWidth: 10,
pointHoverRadius: 10,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: false,
borderWidth: 4,
//isi chart
data: [<?php while ($p = mysqli_fetch_array($qty2)) { echo '"' . ($p['qty']). '",';}?>],
}]
},
options: {
legend: {
position: "bottom"
},
scales: {
yAxes: [{
ticks: {
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
display: false
}}],
xAxes: [{
gridLines: {
zeroLineColor: "transparent"},
ticks: {
padding: 20,
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold"
}
}]
}
}
});
</script>
Tanggapan
Tinggal buat query yang memfilter data berdasarkan hari
Baca aturan main di forum ini ya, sertakan kode atau gambar jika perlu
sudah ku update
buat query yang memfilter data berdasarkan hari itu gimana ya
2 Jawaban:
<div>aku masih kurang paham dengan pertanyaannya,,, kalo misal cuma membatasi aja,, bisa di buat gini</div><pre>$qty1 = mysqli_query($koneksi, "select * from test_mesina3 WHERE waktu=$tgl_kondisi");</pre><div>$tgl_kondisi itu sendiri, bisa di inputkan menggunakan POST, GET, atau cara lainnya,,, misal mau pake <a href="https://sekolahkoding.com/forum/tag/javascript">javascript</a> input,,,<br>tapi ini sebatas yang aku pahami dari pertanyaannya,,, mungkin kalao masi kurang sesuai, bisa di jelaskan lebih lanjut pertanyaannya,,,, semoga membantu ^^<br><br>edited :</div><pre>$qty1 = mysqli_query($koneksi, "select * from test_mesina3 WHERE DATENAME(dw, waktu) = '$hari'");</pre><div>DATENAME(dw, .......... ) akan menghasilkan value monday, sunday, dsb</div>
<div>Mungkin bisa dicoba seperti ini :</div><pre><select name="hari" id="filter-hari">
<option value="Minggu">Minggu</option>
<option value="Senin">Senin</option>
<option value="Selasa">Selasa</option>
<option value="Rabu">Rabu</option>
<option value="Kamis">Kamis</option>
<option value="Jumat"&gt;Jumat</option>
<option value="Sabtu">Sabtu</option>
</select>
<canvas class="d-block w-100" id="qety" ></canvas>
<?php //Dapatan parameter GET hari, set default harinya Senin ketika tidak ada parameter GET $hari = isset($_GET['hari']) && $_GET['hari'] !== '' ? $_GET['hari'] : 'Senin';
$qty1 = mysqli_query($koneksi, "select * from test_mesina3 WHERE hari = '$hari'"); $qty2 = mysqli_query($koneksi, "select * from test_mesina3 WHERE hari = '$hari'"); $qty3 = mysqli_num_rows($query);
<script> const filterHari = document.querySelector('#filter-hari'); filterHari.addEventListener('change', function(){ const halamanSaatIni = window.location.href;
window.location.href = halamanSaatIni + '?hari=' + this.value;
});
var ctx = document.getElementById('qety').getContext('2d');
var qety = new Chart(ctx, { //chart akan ditampilkan sebagai bar chart type: 'line', data: { //membuat label chart
labels: [&lt;?php while ($b = mysqli_fetch_array($qty1)) { echo '"' . ($b['waktu']) . '",';}?&gt;],
datasets: [{
label: "qty",
borderColor: "#80b6f4",
pointBorderColor: "#80b6f4",
pointBackgroundColortime_diff: "#80b6f4",
pointHoverBackgroundColor: "#80b6f4",
pointHoverBorderColor: "#80b6f4",
pointBorderWidth: 10,
pointHoverRadius: 10,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: false,
borderWidth: 4,
//isi chart
data: [&lt;?php while ($p = mysqli_fetch_array($qty2)) { echo '"' . ($p['qty']). '",';}?&gt;],
}]
},
options: {
legend: {
position: "bottom"
},
scales: {
yAxes: [{
ticks: {
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
display: false
}}],
xAxes: [{
gridLines: {
zeroLineColor: "transparent"},
ticks: {
padding: 20,
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold"
}
}]
}
}
}); </script></pre><div><br>Semoga berhasil.</div>
Tanggapan
parameter hari nya dari mana ya,kalo di database ku kasih timestamp,atau harus ku ganti jadi hari ?
format dari row waktu apa ? ? kalau misalnya date,, bisa pake DATENAME(dw, waktu) = "$hari"; tapi harap di ganti terlebih dahulu valuenya menjadi hari inggris
pake timestamp