Ubah Tabel HTML Table Kedalam Bentuk Chart (FusionChart)

 Author : hadinug, 29 April, 2014, Komentar

fusionchart table


Pada postingan kali ini kami akan berbagi sedikit pengalaman tentang bagaimana mengubah HTML table kedalam bentuk chart yang lebih menarik dan interaktif dalam menyajikan sebuah data. Disini kami menggunakan libarary chart yang sangat terkenal (Fusion Chart) dengan tambahan extensi untuk chartTable.js yang memungkinkan anda dengan mudah mengubah HTML table ke dalam bentuk chart.



Pemanggilan nya sangat sederhana, seperti memanggil plugin pada jQuery umumnya. Ada 3 bentuk chart saja yang akan kami sampaikan disini, untuk selengkapnya teman-teman bisa mengunjungi fusionchart.com. Mulai dari:


Line Chart

Sangat simple, definiskan tabel HTML dan sintak javascript jQuery pada dokumen web, anda bisa dengan mudah mengubah html table menjadi bentuk line chart dengan mudah, lihat sintak berikut:


$(document).ready(function() {
    $("#dataTable").convertToFusionCharts({
        type: "msline", // tipe chart
        width: "100%",
        height: "405",
        dataFormat: "htmltable",
        renderAt: "chartContainer",
        renderer: "javascript"
    }, {
        "chartAttributes": {
            caption: "Pengunjung Rumah Sakit",
            xAxisName: "Month",
            yAxisName: "Units",
            bgColor: "FFFFFF",
            chartLeftMargin: "5",
            chartRightMargin: "15",
            labelDisplay: "ROTATE"
        },
        //Do not hide the table once chart is rendered
        "hideTable": false
    });
});


Stack Chart

Caranya hampir sama dengan line chart, anda bisa dengan mudah mengubah html table menjadi bentuk stack chart dengan mudah, lihat sintak berikut:


$(document).ready(function() {
    $("#dataTable").convertToFusionCharts({type: "mscolumn2d",
        width: "100%",
        height: "435",
        dataFormat: "htmltable",
        renderAt: "chartContainer",
        renderer: "javascript"
    }, {
        "chartAttributes": {
            caption: "Pengunjung Rumah Sakit",
            xAxisName: "Month",
            yAxisName: "Units",
            bgColor: "FFFFFF",
            chartLeftMargin: "5",
            chartRightMargin: "15",
            labelDisplay: "ROTATE"
        },
        //Do not hide the table once chart is rendered
        "hideTable": false
    });
});


Pie Chart

Hanya untuk table dengan maksimal 2 baris, anda bisa dengan mudah mengubah html table menjadi bentuk pie chart dengan mudah, lihat sintak berikut:


$(document).ready(function() {
    $("#dataTable").convertToFusionCharts({
        type: "pie3d",
        width: "100%",
        height: "435",
        dataFormat: "htmltable",
        renderAt: "chartContainer",
        renderer: "javascript"
    }, {
        "chartAttributes": {
            caption: "Pengunjung Rumah Sakit 3 tahun Terakhir",
            xAxisName: "Month",
            yAxisName: "Units",
            bgColor: "FFFFFF",
            chartLeftMargin: "5",
            chartRightMargin: "15",
            labelDisplay: "ROTATE"
        },
        //Do not hide the table once chart is rendered
        "hideTable": false
    });
});

download

 
Bagikan halaman ke sosial media
 
Tags :   fusionchart    chart       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda