如何在highchart中按月显示多个数据集？

Question

I have a database called sales which I'm trying to display in my chart like this but can't.

id	products	earnings	created_at
1	Jasmine	50	2023-01-14 18:55:34
2	How to cook	150	2023-01-14 18:55:34
3	Jasmine	100	2023-01-14 18:55:34
4	Dictionary	200	2023-01-14 18:55:34
5	How to cook	70	2023-02-20 17:23:54

It is my first time trying to do it in chart and tried other codes from tutorials and ended up with this result

I'm trying to display it like the first chart, but instead by month with multiple datasets where the month will contain the name of the products and its earning on that month. like this

Pardon my unsightly editing

This is the working code that I managed to follow and do, but don't know how to modify it to obtain the desired output. I tried but gets an error, so I put it back.

        $now = Carbon::now();
        $yr = $now->format('Y/m/d');

       //monthly
        {
            $m= $now->format('m');
            $date_start = Carbon::create(date('Y'), "1");//january start
            $data=[];
            $monthdata=[];
            $x=0;
                
            for ($month = $m;  $x <= 7; $month++)
            {
                $x=$x+1;
                $date = Carbon::create(date('Y'), $month);
                $date_end = $date->copy()->endOfMonth();
            
                $saledate = DB::table('sales')
                ->select(DB::raw('sum(earnings) as sale'))
                ->where('created_at', '>=', $date)
                ->where('created_at', '<=', $date_end)
                ->get();
    
                $sum=0;
                foreach ($saledate as $row)
                {
                    $sum=$row->sale;
                }
                array_push($data,$sum);
                array_push($monthdata,$date->format('M'));
            
            }

            $saleChart1= new UserChart;
            $saleChart1->labels($monthdata);
            $saleChart1->dataset('Sales', 'bar',$data )->options([
                'color' => '#2596be',
            ]);
        }

Inside my blade file,

        <div class="col-lg-6 mb-5">
            <div class="card card card-raised h-100  ">
                <div class="card-header text-dark bg-success px-4" style="background-color:#198754 !important">
                    <i class="fas fa-chart-area me-1 text-white"></i>
                    Monthly Sales 
                </div>
                <div class="card-body bg-white">
                        <div class="col-lg-12 " >
                            <div id="myAreaChart1" class="mt-4" style="height: 300px;">  
                            {!! $saleChart1->container() !!}                                
                            <script src=https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.2/echarts-en.min.js charset=utf-8></script>
                            {!! $saleChart1->script() !!}
                            </div>
                        </div>
                </div>
              
            </div>
        </div>

My UserChart class,

<?php

namespace App\Charts;

use ConsoleTVs\Charts\Classes\Chartjs\Chart;

class UserChart extends Chart
{
    /**
     * Initializes the chart.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }
}

        

Please help, can't find other tutorials, all I found now are pie charts and line graphs and doesn't display similar to what I'm looking for. What should I do to achieve the desired output?

Answer 1

It doesn't seem like ConsoleTVs\Charts\Classes\Chartjs\Chart has that capability. However, you might be able to get ConsoleTVs\Charts\Classes\Echarts\Chart to work closer to what you'd need.

If I were you I'd change your UserChart class to

<?php

namespace App\Charts;

use ConsoleTVs\Charts\Classes\Echart\Chart;

class UserChart extends Chart
{
    /**
     * Initializes the chart.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }
}

Then using example from https://echarts.apache.org/examples/en/editor.html?c=bar-label-rotation you should be able to mold your data into the correct format.

It seems as though most of the setup is pushed into an option array. Some of which you can see on the class itself https://github.com/ConsoleTVs/Charts/blob/main/src/Classes/Echarts/Chart.php

You should be able to set the options with $saleChart1->options([//...]);

Happy coding:-)