Cara menggunakan css grafik tinggi

Question

Pada postingan kali ini kita akan membuat grafik di php html mysql dengan Highcharts, artinya kita akan menampilkan data di database dalam bentuk grafik, nah grafik dibuat dengan plugin highcharts,,,,haha. baik. mengerti, kan?. oke langsung saja ke tutorialnya. oya jika ingin membuat grafik 3 dimensi silahkan lihat postingan saya tentang Membuat Grafik dengan jquery Fusion Cahart dengan data di database

Membuat Grafik dengan Highcharts

Seperti biasa, hal pertama yang kita lakukan adalah membuat database, membuat database dengan nama penjualan. Kemudian buat tabel sederhana dan beri nama tabel penjualan
Setelah itu buat struktur tabel dan isi tabel seperti dibawah ini

kemudian isikan datanya, contohnya seperti gambar berikut ini

Langkah selanjutnya adalah membuat file koneksi ke database

config. php

<?php
 //defined('ROOT') or die('');
 
 define('db_host','localhost');
 define('db_user','root');
 define('db_pass','');
 define('db_name','penjualan');
 
 mysql_connect(db_host,db_user,db_pass);
 mysql_select_db(db_name);
?>

Selanjutnya kita buat file dengan nama file grafik. php dan isikan seperti di bawah ini

<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: 'container',
            type: 'column'
         },   
         title: {
            text: 'Grafik Penjualan Kamera '
         },
         xAxis: {
            categories: ['brand']
         },
         yAxis: {
            title: {
               text: 'Jumlah terjual'
            }
         },
              series:             
            [
            <?php 
         include('config.php');
           $sql   = "SELECT brand  FROM penjualan";
            $query = mysql_query( $sql )  or die(mysql_error());
            while( $ret = mysql_fetch_array( $query ) ){
             $brand=$ret['brand'];                     
                 $sql_jumlah   = "SELECT jumlah FROM penjualan WHERE brand='$brand'";        
                 $query_jumlah = mysql_query( $sql_jumlah ) or die(mysql_error());
                 while( $data = mysql_fetch_array( $query_jumlah ) ){
                    $jumlah = $data['jumlah'];                 
                  }             
                  ?>
                  {
                      name: '<?php echo $brand; ?>',
                      data: [<?php echo $jumlah; ?>]
                  },
                  <?php } ?>
            ]
      });
   }); 
</script>
 </head>
 <body>
  <div id='container'></div>  
 </body>
</html>

_

Langkah terakhir, download folder js dan simpan di folder aplikasi graphics anda. klik UNDUH.
Sehat. jalankan file tersebut,, dan jangan lupa simpan di folder htdocs/folder_name, lalu akses dengan "localhost/folder_name",

bagaimana. jreeng

Tidak apa-apa. Itu saja. Cari tahu cara membuat grafik dengan mengambil data dari database. semoga artikel ini dapat bermanfaat

Materi pada tutorial kali ini adalah bagaimana kita dapat menampilkan grafik dalam bentuk slideshow. Artinya jika kita memiliki tiga grafik, maka grafik tersebut akan ditampilkan secara bergantian, mirip dengan bootstrap carousel.

Pembuatan slideshow gambar yang dapat dimanipulasi sebagai cara penyajian konten berita dalam slideshow merupakan hal yang sudah sering kita dengar dan sudah banyak beredar tutorialnya.

Nah, bagaimana dengan menampilkan grafik sebagai tayangan slide?. Tentu saja kita juga bisa melakukannya. Pada tutorial ini, untuk membuat slideshow chart kita menggunakan bantuan slick library. js.

Sedangkan untuk pembuatan grafik atau chart, kita menggunakan bantuan library highcharts. js. Berikut adalah beberapa panduan untuk membuat grafik dengan bagan tinggi

Buat Grafik Batang dari database dengan perpustakaan Highchart
Membuat Grafik Pie Chart (Circular Graphics) dari database dengan library Highchart
Membuat Bagan Pai dari database dengan mem-parsing data JSON
Membuat Line Chart Graphics dari database dengan mem-parsing data JSON
Pembuatan Graphic Area Chart dari database dengan mem-parsing data JSON

Berikut output yang akan kita buat pada tutorial kali ini seperti pada gambar. 1 di bawah

Gambar. 1
Seperti yang terlihat pada gambar. 1, kita melihat ada arrowNavigation yang bisa digunakan untuk maju atau mundur dari grafik yang diinginkan. Di sisi bawah terdapat dotNavigation yang menampilkan indikator posisi grafik.

Pada tutorial kali ini kita tidak membahas cara membuat grafik, silahkan baca lebih mendalam tutorial membuat grafik pada link tutorial diatas

Membuat Slideshow di Grafik

Dalam contoh ini, kami memiliki tiga grafik. Ketiga grafik tersebut akan dikelompokkan dengan kelas div chartGroup. Anda dapat menyesuaikan nama chartGroup dengan nama yang Anda inginkan

<div class="chartGroup">
    <div id="container1" style="min-width: 250px; height: 400px; margin: 0px auto auto 15px"></div>
    <div id="container2" style="min-width: 250px; height: 400px; margin: 0px auto auto 15px"></div>
    <div id="container3" style="min-width: 250px; height: 400px; margin: 0px auto auto 15px"></div>
</div>

Untuk div id container1, container2, container3 adalah hasil render grafis yang akan ditampilkan pada kelas div chartGroup.

Kemudian setelah itu kita tambahkan script berikut untuk membuat efek slideshow pada ketiga grafik tersebut

kode css