Advertisement
gundambison

perbaikan 75 - highcharts

Aug 24th, 2018
114
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="author" content="ilmu-detil.blogspot.com">
  7.     <title>Bootstrap Graph Using Highcharts </title>
  8.     <!-- Bagian css -->
  9.     <script src="assets/js/jquery1.11.3.js"></script>
  10.     <script src="assets/js/highcharts.js"></script>
  11.     <script>
  12. /***
  13. untuk kategori (lihat xAsis: Category) .. akan lebih baik
  14. tentukan rentang tanggalnya secara 'manual'
  15. apabila ini sudah jalan 10 hari saja..
  16. maka akan membingungkan dari code
  17. kl mau dilepas.. at least ada standarnya
  18. 10 hari dari waktu eksekusi..
  19. bila tidak sesuai parameter
  20. --------------------------
  21. sulitnya itu di area series aka datanya
  22. krn kamu hrs melakukan proses
  23. 1. penghitungan (sum)
  24. 2. nentuin kelas
  25. 3. nentuin waktu
  26. query:
  27. SELECT count(*) c, kelas, waktu_kunjung
  28. FROM `tbl_pengunjung`
  29. where  waktu_kunjung > DATE_ADD(CURDATE(), INTERVAL -9 DAY)
  30. group by waktu_kunjung, kelas
  31. ORDER BY `tbl_pengunjung`.`waktu_kunjung` ASC
  32. ====
  33. untuk awal2..
  34. pelajari js bawah
  35. ***/
  36.         var chart1;
  37.         $(document).ready(function() {
  38.               chart1 = new Highcharts.Chart({
  39.                  chart: {
  40.                     renderTo: 'mygraph',
  41.                     type: 'column'
  42.                  },  
  43.                  title: {
  44.                     text: 'Grafik Pengunjung '
  45.                  },
  46.                  xAxis: {
  47.                     categories: ['22','23','24']
  48.                  },
  49.                  yAxis: {
  50.                     title: {
  51.                        text: 'Jumlah Pengunjung'
  52.                     }
  53.                  },
  54.  
  55.                       series:            
  56.                     [
  57.  
  58. {
  59.         name: 'kelas 8',
  60.         data: [0, 0, 1 ]
  61.     }, {
  62.         name: 'kelas 9A',
  63.         data: [1, 1, 1 ]
  64.     },
  65.  
  66.  
  67.                         ]
  68.               });
  69.            }); 
  70.     </script>
  71. </head>
  72. <body>
  73.  
  74. <!--- Bagian Judul-->  
  75. <div class="container" style="margin-top:20px">
  76.     <div class="col-md-10">
  77.         <div class="panel panel-primary">
  78.             <div class="panel-heading">The Graph of Browser Trends</div>
  79.                 <div class="panel-body">
  80.                     <div id ="mygraph"></div>
  81.                 </div>
  82.         </div>
  83.     </div>
  84. </div>
  85. </body>
  86. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement