How to display multiple datasets by month in highchart? - php

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 :-)