AreaChart doesn't display X and Y axis

[stephen-morlex]

I want to display chart of the student according to the students status and group by updated_at column month. Below is my current code thanks. $students_area = Student::where('status_id', 6)->get(); $areaChartModel = $students_area ->reduce( function ($areaChartModel, $data) use ($students_area) { $index = $students_area->search($data); return $areaChartModel->addPoint($index, $data->updated_at, ['id' => $data->id]); }, LivewireCharts::areaChartModel() ->setTitle('Students Graduated by Month') ->setAnimated($this->firstRun) ->setColor('#3B82F6') ->withOnPointClickEvent('onAreaPointClick') ->setDataLabelsEnabled($this->showDataLabels) ->sparklined() ->setXAxisVisible($this->visible) ->setYAxisVisible($this->visible) ->withGrid() );

[AlexHupe]

Can you please reformat the code:

https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks

[stephen-morlex]

Component code

 $students_area = Student::where('status_id', 6)->get();
        $areaChartModel = $students_area
            ->reduce(
                function ($areaChartModel, $data) use ($students_area) {
                    $index = $students_area->search($data);
                    return $areaChartModel->addPoint($index, $data->updated_at->addMonth(), ['id' => $data->id]);
                },
                LivewireCharts::areaChartModel()
                    ->setTitle('Students Graduated by Month')
                    ->setAnimated($this->firstRun)
                    ->setColor('#3B82F6')
                    ->withOnPointClickEvent('onAreaPointClick')
                    ->setDataLabelsEnabled($this->showDataLabels)
                    ->sparklined()
                    ->setXAxisVisible($this->visible)
                    ->setYAxisVisible($this->visible)
                    ->withGrid()
            );

Blade code

 <div class="h-80">
            <livewire:livewire-area-chart key="{{ $areaChartModel->reactiveKey() }}"
                :area-chart-model="$areaChartModel" />
        </div>

[stephen-morlex]

Component code

 $students_area = Student::where('status_id', 6)->get();
        $areaChartModel = $students_area
            ->reduce(
                function ($areaChartModel, $data) use ($students_area) {
                    $index = $students_area->search($data);
                    return $areaChartModel->addPoint($index, $data->updated_at->addMonth(), ['id' => $data->id]);
                },
                LivewireCharts::areaChartModel()
                    ->setTitle('Students Graduated by Month')
                    ->setAnimated($this->firstRun)
                    ->setColor('#3B82F6')
                    ->withOnPointClickEvent('onAreaPointClick')
                    ->setDataLabelsEnabled($this->showDataLabels)
                    ->sparklined()
                    ->setXAxisVisible($this->visible)
                    ->setYAxisVisible($this->visible)
                    ->withGrid()
            );

Blade code

 <div class="h-80">
            <livewire:livewire-area-chart key="{{ $areaChartModel->reactiveKey() }}"
                :area-chart-model="$areaChartModel" />
        </div>

[AlexHupe]

I think it would be clearer if you add the addPoint-methods in a foreach-loop.

[stephen-morlex]

I'm stuck here i tried many possible ways, but i can't seem to get the query right and display the data on the chart.

[stephen-morlex]

Finally i got it right @AlexHupe

 $students_area = Student::where('status_id', 6)->latest()->get()
            ->groupBy(function ($val) {
                return Carbon::parse($val->updated_at)->format('M Y');
            });
        $lineChartModel = $students_area
            ->reduce(
                function ($lineChartModel, $data) use ($students_area) {
                    $index = $students_area->search($data);
                    $value = $data->count('id');
                    return $lineChartModel->addPoint($index, $value, $index);
                },
                LivewireCharts::lineChartModel()
                    ->setTitle('Total Number of Students Graduated by Month of the Year')
                    ->setSmoothCurve()
                    ->setYAxisVisible(true)
                    ->withGrid()
                    ->withDataLabels()
                    ->setDataLabelsEnabled(true)
                    ->setStrokeWidth(5)
                    ->setColors(['#fa678f'])
            );