Wakibota Documents |

1. ambil file pada server dengan folder : /media/data1/www/File Pemasangan hightchart

2.pastekan file pada project kamu di public

3. lalau tambahkan code ini di style.blade.php

<script src="{{ asset('highcharts/code/highcharts.js') }}"></script>
<script src="{{ asset('highcharts/code/modules/data.js') }}"></script>
<script src="{{ asset('highcharts/code/modules/drilldown.js') }}"></script>
<script src="{{ asset('highcharts/code/modules/exporting.js') }}"></script>
<script src="{{ asset('highcharts/code/modules/export-data.js') }}"></script>
<script src="{{ asset('highcharts/code/modules/accessibility.js') }}"></script>

style css

 /* hight chart js */
    .highcharts-data-table table {
        font-family: Verdana, sans-serif;
        border-collapse: collapse;
        border: 1px solid #EBEBEB;
        margin: 10px auto;
        text-align: center;
        width: 50%;
        max-width: 100px;
    }

    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }

    .highcharts-data-table th {
        font-weight: 600;
        padding: 0.5em;
    }

    .highcharts-data-table td,
    .highcharts-data-table th,
    .highcharts-data-table caption {
        padding: 0.5em;
    }

    .highcharts-data-table thead tr,
    .highcharts-data-table tr:nth-child(even) {
        background: #f8f8f8;
    }

    .highcharts-data-table tr:hover {
        background: #f1f7ff;
    }

4. masuk ke blade sebagai contoh ini data bumil

{{-- homecare data bumil --}}
        <div class="mb-3">
            <div class="w-100">
                <div class="card">
                    <div class="card-header text-white" style="background: #0C8C57">
                        Grafik data Ibu Hamil
                    </div>
                    {{-- Tambahkan Jika ke ids kecamatan --}}
                    <div class="card-body">
                        <div wire:ignore>
                            <div class="w-100" id="hcdatabumilChart"></div>
                        </div>
                    </div>
                    <div class="card-footer">

                    </div>
                </div>
            </div>
        </div>
        {{-- homecare data bumil --}}

script :

dengan drill down :

{{-- Data Ibu Hamil --}}
<script type="text/javascript">
    var chartGetKecamatanHcdatabumil = @json($chartGetKecamatanHcdatabumil);
    var chartGetDesaHcdatabumil = @json($chartGetDesaHcdatabumil);

    Highcharts.chart('hcdatabumilChart', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Data Ibu Hamil Per Kecamatan'
        },
        subtitle: {
            text: 'Click columns untuk melihat detail per desa'
        },
        accessibility: {
            announceNewData: {
                enabled: true
            }
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: 'Total Ibu Hamil'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:1f}'
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.0f}</b><br/>'
        },
        series: [{
            name: "Kecamatan",
            colorByPoint: true,
            data: chartGetKecamatanHcdatabumil.map(function(row) {
                return {
                    name: row.kecamatan,
                    y: row.total_bumil,
                    drilldown: row.idkecamatan,
                };
            })
        }],
        drilldown: {
            series: chartGetKecamatanHcdatabumil.map(function(row) {
                return {
                    name: row.kecamatan,
                    id: row.idkecamatan,
                    data: chartGetDesaHcdatabumil.filter(function(desa) {
                        // Apply your filter condition here
                        return desa.idkecamatan === row.idkecamatan;
                    }).map(function(desa) {
                        return [
                            desa.desa,
                            desa.total_bumil_desa
                        ];
                    })
                };
            })
        }
    });
</script>
{{-- Data Ibu Hamil --}}

component :

 $getKecamatanHcdatabumil = Hcdatabumil::with(['desa'])
            ->join('desa', 'hcdatabumil.desa_iddesa', '=', 'desa.iddesa')
            ->join('kecamatan', 'desa.kecamatan_idkecamatan', '=', 'kecamatan.idkecamatan')
            ->select('kecamatan.idkecamatan', 'kecamatan.kecamatan', DB::raw('count(*) as total_bumil'))
            ->orderBy('total_bumil', 'desc')
            ->groupBy('kecamatan.idkecamatan', 'kecamatan.kecamatan')
            ->get();

render :

 // Chart JS Bumil
            'chartGetKecamatanHcdatabumil' => $getKecamatanHcdatabumil,