SPONSORS

124 views · 5 days ago

![Making Charts and Graphs using Laravel](https://images.ctfassets.net/vzl5fkwyme3u/5BTS4j0szSISc42GiMM64C/4261e509221448298776024a6f6629cd/AdobeStock_203669380.jpeg?w=1000)

## Installing composer

Composer is a package management tool for PHP. Laravel requires composer for installation. We can download composer from [https://getcomposer.org/download/](https://getcomposer.org/download/)

After installation that you can test whether composer installed or not by command

composer

## Installing Laravel

The current stable version of laravel is laravel 5.6. We can install laravel package with three ways.

In command prompt or terminal by running `composer global require "laravel/installer"` and then `Laravel new `

**or**

We can create the project with Composer by running `composer create-project --prefer-dist laravel/laravel `

**or**

Directly clone from github

`git clone https://github.com/laravel/laravel/tree/master` and after that composer update

### Laravel local development server

Run the below command in command prompt or terminal

`PHP artisan serve`

Above command will start to local development servehttp://localhost:8000 or if you want to change default port:

```php

php artisan serve --port

```

## Generating charts and graphs

We are using consoletvs package for generating charts. So for installation we can first move inside to our project using command prompt or terminal. We are following the below steps to install

### Step 1:

First we need to install ConsoleTVs/Charts composer package inside our laravel project.

```php

composer require consoletvs/charts```

### Step 2:

After successfully installation of above package, open app/config.php and add service provider.

In `config/app.php`

```php

'providers' => [

....

ConsoleTVs\Charts\ChartsServiceProvider::class,

],```

After the service provider we need to add alias

```php

'aliases' => [

....

'Charts' => ConsoleTVs\Charts\Facades\Charts::class,

]```

### Step 3

We need to configure of database for application. We can configure in either `.env` file or `config/database.php` file.

### Step 4

We can migrate our default tables that is user. We can find the table in `database/migration` folder.

### Step 5

We can generate dummy records for demo in users table. For creating dummy records, we need to run the below command in command prompt or terminal

```php artisan tinker>>> factory(App\User::class, 20)->create();```

the above command will create a set of 20 records.

If we need to add more records we need to run the above command or we can increase the count as much as we want. For example

```php artisan tinker>>> factory(App\User::class, 2000)->create();```

### Step 6

**Creating controller**

For creating controller we need to run below command in terminal or command prompt

```php

php artisan make controller:<controller_name>```

### Step 7

**Adding the routes**

We can add the routes for navigating our application. You can find routes file inside routes folder. Before 5.4 we can find routes.php file itself, now its web.php. If you are using laravel 5.2 routes.php will inside app/http folder.

So inside `web.php`:

```php

Route::get('create-chart/{type}','[email protected]');```

Here type will be the parameter we are passing and it will focus to `makeChart()` function inside chartcontroller

### Step 8

Import charts to controller, for that in the namespace section add:

```php

Use charts;```

### Step 9

We can put the below code into chartController

```php

public function makeChart($type)

{

switch ($type) {

case 'bar':

$users = User::where(DB::raw("(DATE_FORMAT(created_at,'%Y'))"),date('Y'))

->get();

$chart = Charts::database($users, 'bar', 'highcharts')

->title("Monthly new Register Users")

->elementLabel("Total Users")

->dimensions(1000, 500)

->responsive(true)

->groupByMonth(date('Y'), true);

break;

case 'pie':

$chart = Charts::create('pie', 'highcharts')

->title('HDTuto.com Laravel Pie Chart')

->labels(['Codeigniter', 'Laravel', 'PHP'])

->values([5,10,20])

->dimensions(1000,500)

->responsive(true);

break;

case 'donut':

$chart = Charts::create('donut', 'highcharts')

->title('HDTuto.com Laravel Donut Chart')

->labels(['First', 'Second', 'Third'])

->values([5,10,20])

->dimensions(1000,500)

->responsive(true);

break;

case 'line':

$chart = Charts::create('line', 'highcharts')

->title('HDTuto.com Laravel Line Chart')

->elementLabel('HDTuto.com Laravel Line Chart Lable')

->labels(['First', 'Second', 'Third'])

->values([5,10,20])

->dimensions(1000,500)

->responsive(true);

break;

case 'area':

$chart = Charts::create('area', 'highcharts')

->title('HDTuto.com Laravel Area Chart')

->elementLabel('HDTuto.com Laravel Line Chart label')

->labels(['First', 'Second', 'Third'])

->values([5,10,20])

->dimensions(1000,500)

->responsive(true);

break;

case 'geo':

$chart = Charts::create('geo', 'highcharts')

->title('HDTuto.com Laravel GEO Chart')

->elementLabel('HDTuto.com Laravel GEO Chart label')

->labels(['ES', 'FR', 'RU'])

->colors(['#3D3D3D', '#985689'])

->values([5,10,20])

->dimensions(1000,500)

->responsive(true);

break;

default:

/ / code...

break;

}

return view('chart', compact('chart'));

}```

### Step 10

Create a blade file. Blade is the view file used inside the laravel. You can add new blade file with any name with an extension of .blade.php

Here we are creating chart.blade.php

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My Charts</title>

{!! Charts::styles() !!}

</head>

<body>

<div class="app">

<center>

{!! $chart->html() !!}

</center>

</div>

{!! Charts::scripts() !!}

{!! $chart->script() !!}

</body>

</html>

```

### Step 11

We can run our laravel application in local development server by `php artisan serve` command:

```

http://localhost:8000/create-chart/bar

http://localhost:8000/create-chart/pie

http://localhost:8000/create-chart/donut

http://localhost:8000/create-chart/line

http://localhost:8000/create-chart/area

http://localhost:8000/create-chart/geo

```

In the above example we was creating line chart, geo chart, bar chart, pie chart, donut chart, line chart and area chart. We can also create gauge chart, progressbar chart, areaspline chart, scatter chart, percentage chart etc using consoletvs charts composer package.

There are a lot of jQuery libraries also available like amcharts, chartjs, highcharts, google, material, chartist, fusioncharts, morris, plottablejs etc. However, using this plugin we can easily create charts without having to use jQuery, another advantage to building it in with Laravel.

SPONSORS