Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="author" content="ilmu-detil.blogspot.com">
- <title>Bootstrap Graph Using Highcharts </title>
- <!-- Bagian css -->
- <script src="assets/js/jquery1.11.3.js"></script>
- <script src="assets/js/highcharts.js"></script>
- <script>
- /***
- untuk kategori (lihat xAsis: Category) .. akan lebih baik
- tentukan rentang tanggalnya secara 'manual'
- apabila ini sudah jalan 10 hari saja..
- maka akan membingungkan dari code
- kl mau dilepas.. at least ada standarnya
- 10 hari dari waktu eksekusi..
- bila tidak sesuai parameter
- --------------------------
- sulitnya itu di area series aka datanya
- krn kamu hrs melakukan proses
- 1. penghitungan (sum)
- 2. nentuin kelas
- 3. nentuin waktu
- query:
- SELECT count(*) c, kelas, waktu_kunjung
- FROM `tbl_pengunjung`
- where waktu_kunjung > DATE_ADD(CURDATE(), INTERVAL -9 DAY)
- group by waktu_kunjung, kelas
- ORDER BY `tbl_pengunjung`.`waktu_kunjung` ASC
- ====
- untuk awal2..
- pelajari js bawah
- ***/
- var chart1;
- $(document).ready(function() {
- chart1 = new Highcharts.Chart({
- chart: {
- renderTo: 'mygraph',
- type: 'column'
- },
- title: {
- text: 'Grafik Pengunjung '
- },
- xAxis: {
- categories: ['22','23','24']
- },
- yAxis: {
- title: {
- text: 'Jumlah Pengunjung'
- }
- },
- series:
- [
- {
- name: 'kelas 8',
- data: [0, 0, 1 ]
- }, {
- name: 'kelas 9A',
- data: [1, 1, 1 ]
- },
- ]
- });
- });
- </script>
- </head>
- <body>
- <!--- Bagian Judul-->
- <div class="container" style="margin-top:20px">
- <div class="col-md-10">
- <div class="panel panel-primary">
- <div class="panel-heading">The Graph of Browser Trends</div>
- <div class="panel-body">
- <div id ="mygraph"></div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement