Membuat Hightchart menggunakan Bootstrapt




kangpepe.com | kita kembali membahas tentang bootstrapt yang saat ini (2017) masih fenomenal dalam plain administrator design pada dunia web programing, saat ini kita akan membuat sebuah hasil survey menggunakan  highchart pada bootstrap.

kenapa saya memilih hightchart ? hightchart sangat mudah digunakan dibandingkan chart lainya pada bootstrap, ini saya mengunakan Admin LTE  sebagai saran pemuatanya. Baiklah kita langsung saja menggunakan tutorial ni untuk belajar, jika anda suda memiliki database nanti tinggal dicocokan kembali dengan source chartnya.

Untuk Javascript dalam Admin LTE sudah terdapat highcharts.js dan jquery.min.js untuk membuat chart ini, untuk itu saya akan membuat struktur dimana akan kita baeri nama trafik.php pada app yang saya buat, nah cukup anda copykan saja coding dibawah ini dan silahkan sesuaikan dengan data yang akan anda buat nantinya, ini hanya bentuk dari app saya.



Langkah HightChart Trafik.php

Kasus ini saya buat untuk survei trafik blog pada CMS  Codepedia yang merupakan CMS yang dibangun untuk para development basic. Silahkan copy coding berikut :



<html>
 <head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
 var chart1; // globally available
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'ChartCodepedia',
            type: 'column'
         },   
         title: {
            text: 'Trafik Posting CMS Codepedia'
         },
         xAxis: {
            categories: ['title_seo']
         },
         yAxis: {
            title: {
               text: 'Pengunjung / Hari'
            }
         },
              series:             
            [
            <?php 
   //Panggil Database
   include('controller/database.server.php');
            $sql   = "SELECT title_seo  FROM cp_blogs";$query = mysql_query( $sql )  or die(mysql_error());while( $ret = mysql_fetch_array( $query ) ){
            $seo=$ret['seo'];$sql_view   = "SELECT view FROM cp_blogs WHERE seo='$seo'";$query_view = mysql_query( $sql_view ) or die(mysql_error());
            while( $data = mysql_fetch_array( $query_view ) ){
            $view = $data['view'];                 
                  }             
                  ?>
                  {name: '<?php echo $seo; ?>',data: [<?php echo $view; ?>] },
                  <?php } ?>
            ]
      });
   }); 
</script>
 </head>
 <body>
 <!-- Panggil data HightChart pada HTML -->
  <div id='ChartCodepedia'></div>  
 </body>
</html>



Thanks : Sekarang chart sudah dapat digunakan, semoga bermanfaat sebagai ilmu yang dapat berkah, dapatkan artikel menarik lainya yang akan saya bagikan disini. Terimkasih .....!!
 

Recommend Article × +

OWNER AND CO OF PT. TRANS TECHNO Freelance Web Design and Yii2 Development in ICT STKIP PGRI WEST SUMATRA. While Studying MAGISTER UPI-YPTK Padang,CEO CMS Codepedia, Lives in Padang - Indonesia | WhatsApp : 0853-7516-4491

Related Posts

Update Sesudahnya
« Prev Post
Update Sebelumnya
Next Post »