Charts Components

Overview

This guide will help you to implement a Live Chart component in Laravel using Livewire. This component generates a live updating chart that displays random user counts at specific timestamps. Key features include real-time updates and dynamic data generation.

Installation

Follow the steps below to implement the component:

• Copy the file ChartWithLiveUpdates.php to your app/Livewire directory.
• Copy the blade view chart-with-live-updates.blade.php to your resources/views/livewire directory.

Integration

To integrate this component into your existing Laravel project, add the component to your desired blade file using the below line:

<livewire:chart-with-live-updates />

Usage

This component automatically generates and updates the chart data. On each update, a new timestamp is added to the time range, and a random user count is assigned. This is handled by the updateChart() method in the ChartWithLiveUpdates component.

Configuration

You can customize the time range and interval by modifying the following line in the mount() method:

$carbonPeriod = CarbonPeriod::create('now', '2 seconds', 5);

You can change '2 seconds' and '5' to your desired interval and range respectively.

The chart update interval in the blade view can also be adjusted by modifying the wire:poll.2s attribute in the div tag.

Overview

This component provides a line chart visualization using Chart.js and date range picker to filter data. The component fetches the count of new users created within a selected date range from the database and displays it in a line chart format. The date range can be customized using a date-picker, allowing users to visualize data for specific time periods.

Installation

Follow the steps below to implement the component:

• Copy the LivewireChartJsLineComponent.php file to your app/Livewire directory.
• Copy the livewire-chart-js-line-component.blade.php view file to your resources/views/livewire directory.

After copying the files, you should be able to use the component in your Laravel project.

Integration

You can add the component to an existing Laravel Blade view using the following Livewire syntax:

@livewire('livewire-chart-js-line-component')

Usage

The component fetches new user data based on the selected date range and presents this data in a line chart format. The date range can be modified using the date-picker at the top of the chart. The component automatically updates the chart whenever a new date range is selected.

Customization

You are free to customize the component according to your project needs. You can modify the getUserCount() method in the Livewire component to fetch different data or change the query logic. Similarly, the Chart.js configuration in the Blade view can be modified to change the look and feel of the chart.