Create multi bar/ muli series highchart in laravel

user_16229422 0
Viewed 111

I want to make a chart with multi series/ multi data with highcharts in laravel, but I always fails, this is my expectations enter image description here Tokyo, London, etc. there are replaced with the name of my product category

this is my controller:

<?php

namespace App\Http\Controllers;

use App\Models\Category;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use PHPUnit\TextUI\XmlConfiguration\Group;

class DashboardController extends Controller
{
    public function index()
    {
        $category = Category::select('name')->pluck("name");

        $total = Category::select(DB::raw("SUM(total) as total"))->GroupBy(DB::raw('MONTH(created_at)'))->pluck('total');

        $bulan = Category::select(DB::raw("MONTHNAME(created_at) as bulan"))->GroupBy(DB::raw('bulan'))->pluck('bulan');


        return view('admin.dashboard', compact('category', 'total', 'bulan'));

    }
}

and this is html and javacript code

@section('content')
<h1 class="gray">Dashboard</h1>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        A basic column chart compares rainfall values between four cities.
        Tokyo has the overall highest amount of rainfall, followed by New York.
        The chart is making use of the axis crosshair feature, to highlight
        months as they are hovered over.
    </p>
</figure>

@section('javascript')
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>

    <script type="text/javascript">

        let category = <?php echo json_encode($category) ?>;
        let total = <?php echo json_encode($total) ?>;
        let month = <?php echo json_encode($month) ?>;

        console.log(category, total, month);

        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                // categories: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                caegories : month,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: category,
                data: total
            }]
        });

    </script>
@endsection

@endsection

and this is the result I get enter image description here

laravel highcharts php javascript
1 Answers

instead pluck it one by one just use one variable and setup query in it and parse it in the javascript : so first one is set some query:

           <?php
        
        namespace App\Http\Controllers;
        
        use App\Models\Category;
        use Illuminate\Http\Request;
        use Illuminate\Support\Facades\DB;
        use PHPUnit\TextUI\XmlConfiguration\Group;
        
        class DashboardController extends Controller
        {
            public function index()
            {
                $category = Category::select(
              DB::raw("MONTHNAME(created_at) as bulan"),
              DB::raw("SUM(total) as total1"),
              DB::raw("SUM(total) as total2"),
              DB::raw("SUM(total) as total3"),
        )->groupBy('bulan')->get();
    
    
            return view('admin.dashboard', compact('category'));
    
        }
    }

for the javascript do this :

Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'Monthly Average Rainfall'
},
subtitle: {
    text: 'Source: WorldClimate.com'
},
xAxis: {
    categories: [
        @php
foreach($category as $categories){
         echo "'$categories->bulan',";
        }
       @endphp
    ],
    crosshair: true
},
yAxis: {
    min: 0,
    title: {
        text: 'Rainfall (mm)'
    }
},
tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
},
plotOptions: {
    column: {
        pointPadding: 0.2,
        borderWidth: 0
    }
},
series: [{
    name: 'Total1',
    data: [ @php
foreach($category as $categories){
         echo "'$categories->total1',";
        }
       @endphp]

}, {
    name: 'Total2',
    data: [ @php
foreach($category as $categories){
         echo "'$categories->total2',";
        }
       @endphp]

},  {
    name: 'total3',
    data: [ @php
foreach($category as $categories){
         echo "'$categories->total3',";
        }
       @endphp]



 }]
   });

the point is just parse the query with foreach in each properties like this:

 [ @php
foreach($category as $categories){
         echo "'$categories->total1',";
        }
       @endphp]

Hope it helps i'm from indonesia also wkwk

user_153042860
Related