Selasa, 15 Januari 2013

Buat Grafik Berbasis WEB

Assalamu'alaikum Wr.Wb.

Sekian lama gak nulis akhirnya ada bahan juga yang mau ditulis, heheheh dari pada nganggur kejebak hujan di kampus.. iseng ngoding grafik di PHP akhirnya jadi juga setelah googling2 yah lumayan tampilanya lebih interaktif dri pada yang murni ngoding pake jpgraph (php) atau yang ketika bikin berbasis desktop dengan java . Nah yang dibutuhin buat bikinya itu plugin Jquery-1.4.3-min.js ama highcharts (jquery) dua-dua dapat diunduh langsung di internet.... (ntar gogling sendiri ya)... dari pada lama lngsung k scriptnya ya :
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
    $(function(){
        //var chart;
        $(document).ready(function(){
            chart= new Highcharts.Chart({
                chart:{
                    renderTo :'grafik',
                    type :'line'
                },
                title:{
                    text: 'Data Penduduk Tahun 2010,2011,1012',
                    x:-20
                },
                subtitle:{
                    text : 'Rekap Data Sensus Penduduk',
                    x:-20
                },
                xAxis:{
                    title:{
                        text:'Wilayah'
                    } ,
                    categories:['Babarsari','Condongcatur','Sleman',
                        'Bantul','Kotagede']
                },
                yAxis:{
                    title:{
                        text:'Jumlah penduduk'
                    }
              
                },
                series :[{
                        name :'Penduduk Tahun 2010',
                        data: [60,30,46,71,90],
                        color:'red'
                    },
                    {
                        name:'Penduduk Tahun 2011',
                        data:[20,60,70,45,78],
                        color:'blue'
                    },
                    {
                        name: 'Penduduk Tahun 2012',
                        data:[50,87,53,79,90],
                        color:'green'
                    }
                ]
            });
        });
    });
</script>
<div id="grafik" style="width: 500px; height: 400px; margin: 0 auto"></div>

buat typenya sendiri tinggal di ganti-ganti aja sesuai dengan kebutuhan misalnya pie, atau bar. Nah untuk pengaturan isi grafiknya itu kita atur di seriesnya bisa kita sesuaikan dengan kebutuhan.
Outputnya klo dengan line:

semoga bermanfaat ya ... buat yang lgi pada KP ato ngapain aja yg butuh grafik berbasis web... okey see you next posting... ^_^
buat yang load datanya dari database tunggu postingan selanjutnya....  :D

silahkan kritik dan saranya ya..... :)

Tidak ada komentar:

Posting Komentar