Installing Ag-Grid and Ag-Charts Enterprise vanilla JS in Laravel project

Installing Ag-Grid and Ag-Charts Enterprise vanilla JS in Laravel project

To install Ag-Grid and Ag-Charts Enterprise in a Laravel project using vanilla JS, follow the steps below:

1. Install Ag-Grid and Ag-Charts Enterprise:

First, you need to download the Ag-Grid and Ag-Charts Enterprise libraries from their official website. Ag-Grid is a popular JavaScript grid component library, while Ag-Charts is a charting library that works seamlessly with Ag-Grid. Both libraries offer enterprise versions with additional features and support.

Visit the following links to download the libraries:

• Ag-Grid Enterprise: https://www.ag-grid.com/licensing/#downloads
• Ag-Charts Enterprise: https://www.ag-charts.com/licensing/

Extract the downloaded ZIP files and note down the paths to the dist folders.

2. Install the libraries in your Laravel project:

Create a new directory called libs inside the public folder of your Laravel project. Then, copy the extracted dist folders of Ag-Grid and Ag-Charts Enterprise into the libs directory.

3. Configure the view:

Create a new Blade view file, for example, ag-grid-chart.blade.php, inside the resources/views directory. In this file, include the necessary CSS and JavaScript files from the Ag-Grid and Ag-Charts Enterprise libraries.

@extends('layouts.app')

@section('content')
<div id="myGrid" style="width: 100%; height: 500px;"></div>
@endsection

@section('scripts')
<script src="{{ asset('public/libs/ag-grid-community/dist/ag-grid.min.js') }}"></script>
<script src="{{ asset('public/libs/ag-grid-community/dist/ag-grid-enterprise.min.js') }}"></script>
<script src="{{ asset('public/libs/ag-charts-community/dist/ag-charts.min.js') }}"></script>
<script src="{{ asset('public/libs/ag-charts-community/dist/ag-charts-ag-grid.min.js') }}"></script>
@endsection

4. Initialize Ag-Grid and Ag-Charts Enterprise:

In the same ag-grid-chart.blade.php file, initialize Ag-Grid and Ag-Charts Enterprise by adding the following JavaScript code:

@section('scripts')
// ...
<script>
  // Initialize Ag-Grid
  const gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'age' },
      { field: 'city' },
    ],
    data: [
      { name: 'John Doe', age: 35, city: 'New York' },
      { name: 'Jane Doe', age: 28, city: 'Los Angeles' },
      { name: 'Bob Smith', age: 45, city: 'Chicago' },
    ],
  };

  const grid = new agGrid.GridApi('#myGrid', gridOptions);

  // Initialize Ag-Charts
  const chartOptions = {
    series: [
      {
        type: 'column',
        data: [30, 40, 35],
      },
    ],
  };

  const chart = new agCharts.Chart('chartDiv', chartOptions);
@endsection

Replace the columnDefs and data arrays in the gridOptions object with your actual column definitions and data.

5. Display the Ag-Grid and Ag-Charts Enterprise view:

Finally, display the ag-grid-chart.blade.php view in your Laravel application by adding the following line to the routes/web.php file:

Route::get('/ag-grid-chart', function () {
  return view('ag-grid-chart');
});

Now, when you visit the /ag-grid-chart route in your Laravel application, you should see the Ag-Grid table and Ag-Charts chart working together.

Keep in mind that this is just a basic example. You can customize the Ag-Grid and Ag-Charts Enterprise components to fit your specific use case. For more information, refer to the official documentation of Ag-Grid and Ag-Charts Enterprise:

• Ag-Grid Enterprise: https://www.ag-grid.com/documentation/
• Ag-Charts Enterprise: https://www.ag-charts.com/documentation/

Happy coding!