192 lines
8.5 KiB
PHP
192 lines
8.5 KiB
PHP
@extends('admin.layout.main')
|
|
@section('content')
|
|
<main id="main" class="main">
|
|
|
|
<div class="pagetitle">
|
|
<h1>Bak ...</h1>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{route ('dashboard')}}">Halaman Utama</a></li>
|
|
<li class="breadcrumb-item">Bak ...</li>
|
|
</ol>
|
|
</nav>
|
|
</div><!-- End Page Title -->
|
|
|
|
<p>Chart.JS Examples. You can check the <a href="https://www.chartjs.org/docs/latest/samples/"
|
|
target="_blank">official website</a> for more examples.</p>
|
|
|
|
<section class="section">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Line Chart</h5>
|
|
|
|
<!-- Line Chart -->
|
|
<canvas id="lineChart" style="max-height: 400px;"></canvas>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
new Chart(document.querySelector('#lineChart'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['1am', '2am', '3am', '4am', '5am', '6am', '7am', '8am',
|
|
'9am', '10am', '11am', '12am', '1pm', '2pm', '3pm',
|
|
'4pm', '5pm', '6pm', '8pm', '9pm', '10pm', '12pm'
|
|
],
|
|
datasets: [{
|
|
label: 'Line Chart',
|
|
data: [65, 59, 80, 81, 56, 55, 40],
|
|
fill: false,
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
tension: 0.1
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
<!-- End Line CHart -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart yang Anda buat -->
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Custom Doughnut Chart</h5>
|
|
|
|
<!-- Custom Doughnut Chart -->
|
|
<canvas id="myChart" style="max-height: 400px;"></canvas>
|
|
<script type="text/javascript"
|
|
src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
|
|
<script>
|
|
// setup
|
|
const data = {
|
|
labels: ['score', 'gray area', 'another area'],
|
|
datasets: [{
|
|
label: 'Weekly Sales',
|
|
data: [100, 700],
|
|
borderColor: [
|
|
'rgba(255, 26, 104, 0.2)',
|
|
'rgba(0, 0, 0, 0.2)'
|
|
],
|
|
backgroundColor: [
|
|
'rgba(255, 26, 104, 0.2)',
|
|
|
|
'rgba(0, 0, 0, 0.2)'
|
|
],
|
|
borderWidth: 1,
|
|
cutout: '90%',
|
|
circumference: 180,
|
|
rotation: 270
|
|
}]
|
|
};
|
|
|
|
//teks
|
|
const gaugeChartText = {
|
|
id: 'gaugeChartText',
|
|
afterDatasetsDraw(chart, args, pluginOptions) {
|
|
const {
|
|
ctx,
|
|
data,
|
|
chartArea: {
|
|
top,
|
|
bottom,
|
|
left,
|
|
right,
|
|
width,
|
|
height
|
|
},
|
|
scales: {
|
|
r
|
|
}
|
|
} = chart;
|
|
ctx.save();
|
|
const xCoor = chart.getDatasetMeta(0).data[0].x;
|
|
const yCoor = chart.getDatasetMeta(0).data[0].y;
|
|
const score = data.datasets[0].data[0];
|
|
let rating;
|
|
if (score < 400) {
|
|
rating = 'sangat jauh';
|
|
}
|
|
if (score >= 401 && score <= 600) {
|
|
rating = 'sedang';
|
|
}
|
|
if (score >= 700 && score <= 750) {
|
|
rating = 'hampir penuh';
|
|
}
|
|
if (score >= 751) {
|
|
rating = 'penuh';
|
|
}
|
|
|
|
|
|
// ctx.fillRect(xCoor, yCoor, 400, 2);
|
|
|
|
function textLabel(text, x, y, fontSize, textBaseline, textAlign) {
|
|
ctx.font = `${fontSize}px sans-serif`;
|
|
ctx.fillStyle = '#666';
|
|
ctx.textBaseline = textBaseline;
|
|
ctx.textAlign = textAlign;
|
|
ctx.fillText(text, x, y);
|
|
}
|
|
|
|
textLabel('0cm', left, yCoor + 20, 20, 'top', 'left');
|
|
textLabel('800cm', right, yCoor + 20, 20, 'top', 'right');
|
|
textLabel(score, xCoor, yCoor - 50, 60, 'buttom', 'center');
|
|
textLabel(rating, xCoor, yCoor - 100, 30, 'top', 'center');
|
|
|
|
|
|
}
|
|
}
|
|
// config
|
|
const config = {
|
|
type: 'doughnut',
|
|
data,
|
|
options: {
|
|
aspectRatio: 1.5,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
}
|
|
}
|
|
},
|
|
plugins: [gaugeChartText]
|
|
};
|
|
|
|
// render init block
|
|
const myChart = new Chart(
|
|
document.getElementById('myChart'),
|
|
config
|
|
);
|
|
|
|
// Instantly assign Chart.js version
|
|
const chartVersion = document.getElementById('chartVersion');
|
|
chartVersion.innerText = Chart.version;
|
|
|
|
</script>
|
|
<!-- End Custom Doughnut Chart -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Chart yang Anda buat -->
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</main><!-- End #main -->
|
|
@endsection
|