Keranjang Coding : product


?>

Membuat Grafik Bertingkat dengan Menggunakan AmCharts





Pada Kesempatan kali ini, kita akan belajar cara membuat grafik stacked atau grafik bertingkat menggunakan amchart. Pada Part 1 kita telah berhasil membuat grafik standard menggunakan amchart, dan pada Part 2 kita juga telah berhasil menambahkan sebuah fitur filtering menggunakan selectbox. Jika sobat sekalian belum ketinggalan silahkan pelajari Part 1 dan Part 2Karena kita akan melanjutkan kode-kode yang telah kita buat di part-part sebelumnya.

Mari Kita Mulai ! ^^

Agar kita lebih bersemangat, alangkah lebih baik kita lihat hasil chart yang akan kita buat nantinya pada gambar di bawah ini. Cekidoot !!

Oke, kita langsung mulai !!

Pertama kali hal yang harus kita lakukan adalah menambahkan elemen div untuk menampilkan chart yang akan kita buat, silahkan sobat buka file index.php di folder viewsnya. Pada bagian ini silahkan ubah codenya seperti berikut.

<section class="content">
    <div class="row">
        <div class="col-xs-6">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title"><i class="fa fa-line-chart"></i> Grafik </h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="form-group">
                        <label for="">Filter Nama</label>
                        <select class="filter_nama" style="width: 150px;">
                            <option value=""></option>
                            <?php foreach ($nama as $nm) : ?>
                                <option value="<?= $nm->created_by; ?>"><?= $nm->created_by; ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="init-loading grafik" style="height:600px;width:100%;"></div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title"><i class="fa fa-line-chart"></i> Grafik Stacked</h3>
                </div>
                <div class="box-body">
                    <div class="init-loading grafik_stacked" style="height:640px;width:100%;"></div>
                </div>
            </div>
        </div>
    </div>
</section>

pada code diatas kita menambahkan kode ini

<div class="col-xs-6">
    <div class="box">
        <div class="box-header">
            <h3 class="box-title"><i class="fa fa-line-chart"></i> Grafik Stacked</h3>
        </div>
        <div class="box-body">
            <div class="init-loading grafik_stacked" style="height:640px;width:100%;"></div>
        </div>
    </div>
</div>

elemen untuk menampilkan chart kita.

selanjutnya kita perlu menambahkan sebuah function baru untuk request data ke database menggunakan ajax, disini kita buat nama functionnya grafik_stacked(). Untuk kode nya bisa ditambahkan sebagai berikut.

function grafik_stacked() {
    $.ajax({
        type: "post",
        url: "<?php echo base_url() ?>grafik/data_grafik_stack",
        data: filtering,
        dataType: "json",
        success: function(data) {
            var app = []
            $.each(data, function(i, el) {
                $.each(el, function(i, ol) {
                    app.push(ol);
                })
            })
            barChartStacked(app, "grafik_stacked");
        }
    })
}

untuk penjelasannya di function ini kita mengirimkan request ke controllers Grafik.php pada function data_grafik_stack, pada request tersebut kita membawa data filtering untuk filter datanya, type data nya post, dataType yang kita hasilnya berupa data JSON. untuk penjelasan $.each akan dijelaskan setelah kita selesai membuat function data_grafik_stack di controllersnya.

Oke. sekarang kita buka file Grafik.php. kita perlu menambahkan sebuah function untuk mengirim perintah ke databasenya. saat request ajax tadi kita sudah buat nama functionnya data_grafik_stack. Silahkan tambahkan kodenya seperti berikut.

public function data_grafik_stack()
{
    $get_kategori = $this->Grafik_model->get_kategori();
    $data = [];
    foreach ($get_kategori as $kategori) {
        $grafik = $this->Grafik_model->data_grafik_stack($kategori->kategori);
        array_push($data, $grafik);
    }
    echo $data = json_encode($data);
}

Penjelasannya, variabel get_kategori akan menampung hasil request yang dikirimkan kemodel Grafik_model, kita perlu membuat ini karena pada chart nanti kita akan jadikan kategori tersebut sebagai label pada sumbu x chart. variabel data untuk menampung array, selanjutnya kita lakukan looping get_kategori, setiap looping kita melakukan request ke Grafik_model dengan function data_grafik_stack untuk get data dari database, dah resultnya akan di push ke variable data. selanjutnya kita kirimkan result dari data ke index.

Siiip, Tahap selanjutnya kita akan menambahkan function get_kategori(), dan data_grafik_stack di model. Mari kita buka Grafik_model.php, dan tambahkan code berikut :

public function get_kategori()
{
    $this->db->select('distinct(kategori)');
    return $this->db->get('tbl_contoh')->result();
}
public function data_grafik_stack($kategori)
{
    $this->db->select("'$kategori' as kategori, (SELECT count('*') from tbl_contoh where created_by = 'Heru' and kategori ='$kategori') as data_heru, (SELECT count('*') from tbl_contoh where created_by = 'Maulana' and kategori ='$kategori') as data_maulana, (SELECT count('*') from tbl_contoh where kategori ='$kategori') as total");
    $this->db->from('tbl_contoh');
    $this->db->limit(1);
    return $this->db->get()->result();
}

Selanjutnya kita kembali buka file index.php di views, coba perhatikan kode dibawah ini.

var app = []
$.each(data, function(i, el) {
    $.each(el, function(i, ol) {
        app.push(ol);
    })
})
barChartStacked(app, "grafik_stacked");

kode diatas berfungsi untuk memecah result array didalam array menjadi string. setelah menjadi string kita perlu push sehingga data yang kita butuhkan menjadi single array. hal ini perlu dilakukan karena jika tidak, maka data yang kita butuhkan tidak dapat ditampilkan oleh chart. dikarenakan datanya array di dalam array.

oke selanjutnya kita perlu membuat function barChartStacked(), tambahkan kode berikut ini 

function barChartStacked(data, chartdiv) {
    var chart = am4core.create(chartdiv, am4charts.XYChart);
    chart.exporting.menu = new am4core.ExportMenu();
    chart.exporting.menu.align = "right";
    chart.exporting.menu.verticalAlign = "top";
    chart.data = data;
    chart.paddingRight = 0;
    chart.paddingLeft = 0;
    chart.paddingTop = 0;
    chart.paddingBottom = 0;
    // Create axes
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "kategori";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 20;
    categoryAxis.renderer.inside = false;
    categoryAxis.start = 0;
    categoryAxis.renderer.grid.template.disabled = true;

    var label = categoryAxis.renderer.labels.template;
    label.wrap = true;
    label.maxWidth = 160;
    label.tooltipText = "{category}";

    categoryAxis.events.on("sizechanged", function(ev) {
        var axis = ev.target;
        var cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);
        if (cellWidth < axis.renderer.labels.template.maxWidth) {
            axis.renderer.labels.template.rotation = -75;
            axis.renderer.labels.template.horizontalCenter = "right";
            axis.renderer.labels.template.verticalCenter = "middle";
        } else {
            axis.renderer.labels.template.rotation = 0;
            axis.renderer.labels.template.horizontalCenter = "middle";
            axis.renderer.labels.template.verticalCenter = "top";
        }
    });

    var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis1.extraMax = 0.3;
    valueAxis1.min = 0;

    var series1 = chart.series.push(new am4charts.ColumnSeries());
    series1.dataFields.valueY = "data_heru";
    series1.dataFields.categoryX = "kategori";
    series1.yAxis = valueAxis1;
    series1.name = "Heru";
    series1.fill = "green";
    series1.stroke = "green";
    series1.stacked = true;
    series1.columns.template.tooltipText = "{valueY.value}";

    var series1 = chart.series.push(new am4charts.ColumnSeries());
    series1.dataFields.valueY = "data_maulana";
    series1.dataFields.categoryX = "kategori";
    series1.yAxis = valueAxis1;
    series1.name = "Maulana";
    series1.fill = "red";
    series1.stroke = "red";
    series1.stacked = true;
    series1.columns.template.tooltipText = "{valueY.value}";

    chart.scrollbarX = new am4charts.XYChartScrollbar();
    chart.scrollbarX.series.push(series1);
    chart.scrollbarX.parent = chart.bottomAxesContainer;

    var series1 = chart.series.push(new am4charts.LineSeries());
    series1.dataFields.valueY = "total";
    series1.dataFields.categoryX = "kategori";
    series1.yAxis = valueAxis1;
    series1.name = "TOTAL DATA";
    series1.fill = "#125192";
    series1.stroke = "#125192";
    series1.strokeWidth = 0;
    series1.yAxis = valueAxis1;
    series1.tooltipText = "{valueY.value}";
    series1.minBulletDistance = 35;

    var bullet4 = series1.bullets.push(new am4charts.CircleBullet());
    bullet4.circle.radius = 3;
    bullet4.circle.strokeWidth = 2;
    bullet4.circle.fill = am4core.color("black");
    // Add label
    var labelBullet = series1.bullets.push(new am4charts.LabelBullet());
    labelBullet.label.html = `
        <div style='background:#125192;color:white;padding:0px 20px;text-align:center;'>{total}</div>
        <div style='background:red;color:white;padding:0px 20px;text-align:center;'>{data_maulana}</div>
        <div style='background:green;color:white;padding:0px 20px;text-align:center;'>{data_heru}</div>
        `;
    labelBullet.label.dy = -40;

    chart.cursor = new am4charts.XYCursor();
    chart.legend = new am4charts.Legend();
    chart.legend.position = "top";
}

Mari kita pecah kodenya, perhatikan kode berikut.

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "kategori";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.inside = false;
categoryAxis.start = 0;

kode diatas berfungsi untuk config sumbu x  pada chart, dengan mengambil datafields kategori sebagai labelnya. Sekarang coba perhatikan kode dibawah ini.

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.valueY = "data_heru";
series1.dataFields.categoryX = "kategori";
series1.yAxis = valueAxis1;
series1.name = "Heru";
series1.fill = "green";
series1.stroke = "green";
series1.stacked = true;
series1.columns.template.tooltipText = "{valueY.value}";

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.valueY = "data_maulana";
series1.dataFields.categoryX = "kategori";
series1.yAxis = valueAxis1;
series1.name = "Maulana";
series1.fill = "red";
series1.stroke = "red";
series1.stacked = true;
series1.columns.template.tooltipText = "{valueY.value}";

var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "total";
series1.dataFields.categoryX = "kategori";
series1.yAxis = valueAxis1;
series1.name = "TOTAL DATA";
series1.fill = "#125192";
series1.stroke = "#125192";
series1.strokeWidth = 0;
series1.yAxis = valueAxis1;
series1.tooltipText = "{valueY.value}";
series1.minBulletDistance = 35;

kode diatas berfungsi untuk create chartSeries, data Y yang di gunakan diambil dari field data_heru, data_maulana, dan total digrup berdasarkan X diambil dari fields kategori. bisa dilihat pada code berikut.

series1.dataFields.valueY = "data_heru";
series1.dataFields.valueY = "data_maulana";
series1.dataFields.valueY = "total";

dan X kategori dapat dilihat di kode berikut. 

series1.dataFields.categoryX = "kategori";

Dan perhatikan kode berikut ini :

var labelBullet = series1.bullets.push(new am4charts.LabelBullet());
labelBullet.label.html = `
    <div style='background:#125192;color:white;padding:0px 20px;text-align:center;'>{total}</div>
    <div style='background:red;color:white;padding:0px 20px;text-align:center;'>{data_maulana}</div>
    <div style='background:green;color:white;padding:0px 20px;text-align:center;'>{data_heru}</div>
    `;
labelBullet.label.dy = -40;

kode diatas berfungsi membuat label custom diatas chartnya.

Oke sobat, hasil dari tutorial ini bisa kita lihat di bawah ini

Sekian dulu untuk tutorial kali ini, terimakasih untuk sobat-sobat koding sekalian yang telah mengikuti tutorial ini. Salam Koding ^^

Silahkan download Sourcode nya disini

Jika ada pertanyaan Silahkan tulis dikolom komentar ya ^^

 

Tags : Codeigniter Javascript Amchart PHP

Sekilas Tentang Penulis


Heru Late Nugraha,ST
Software Engineer | Fullstack Developer | Founder of Matadeveloper.com



Prev Post
Menambahkan Fitur Filter data di Grafik
Next Post
Tutorial Cara Menginstall Codeigniter 4