Laravel is a PHP framework used to develop web applications. As a framework, Laravel is composed of a series of ready-to-use tools, libraries, and assets. It is based on the MVC paradigm, which allows the developer to extract applications into a business layer, the model, a rendering layer, the view, an application layer, and the controller.
Like most frameworks these days, Laravel depends heavily on Composer to handle its dependencies. Since Laravel is concocted from various libraries, it keeps them neat and tidy. It’s partially based on Symfony, which is why part of the file structure and syntax is similar.
The earliest PHP version required for Laravel to work is 5.6.4. Laravel will also work with PHP’s latest version- PHP 7.
Part 1: Including Dependencies
To render FusionCharts using Laravel, we need to include following:
Composer (Download): Download and run Composer-Setup.exe
.
Laravel 5: Like most frameworks nowadays, there are a couple of ways to install Laravel. In this example, we’ll do the simplest installation using Composer.
composer create-project --prefer-dist laravel/laravel5 blog
Note: Here, blog
is the name of our application folder.
FusionCharts Suite XT (Download): Download FusionCharts Suite XT zip file and store all the extracted script files inside the public/js
folder. Include it in the html
section of index.blade.php
file which is inside the views/fusioncharts
section using the following format:
<script type="text/javascript" src="{{ asset('js/fusioncharts.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/fusioncharts.charts.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/fusioncharts.theme.fint.js') }}"></script>
FusionCharts PHP Wrapper (Download): Extract the fusioncharts PHP wrapper and save the fusioncharts.php
inside the composer.json
file. Add the required files in autoload
section – in a new entry called files
as shown below:
Note: Don’t forget to run composer dump-autoload
for changes to take effect.
Part 2: Creating Controller and its View to Render the chart
Step 1: Implementing the Controller
Create a FusionCharts controller using the command php artisan make:controller FusionCharts
.
Step 2: Routing to Controllers
Define a route for the FusionCharts page, which will be managed by the FusionCharts Controller, since it will only be a static page with no functionality. Now let’s open routes, web.php, inside that add the route as shown below:
Route::get('/fusioncharts', '[email protected]');
Step 3: Defining Methods
In the previous snippet, home is the name of the method which is defined within the FusionCharts controller as shown below:
Here, index is the view page which resides within the view\fusioncharts
folder.
Step 4: Creating the View
The view page contains two sections- the html and the php section. In the very 1st step of part-1, we have added the js dependencies into the html section. Here, we will add the php code inside the body as shown below:
<?php
$barChart = new FusionCharts("bar2d", "myFirstChart" , 600, 400, "chart-container", "json",
' {
"chart": {
"caption": "What kind of apps are you building?",
"numberSuffix": "%",
"paletteColors": "#876EA1",
"useplotgradientcolor": "0",
"plotBorderAlpha": "0",
"bgColor": "#FFFFFFF",
"canvasBgColor": "#FFFFFF",
"showValues":"1",
"showCanvasBorder": "0",
"showBorder": "0",
"divLineColor": "#DCDCDC",
"alternateHGridColor": "#DCDCDC",
"labelDisplay": "auto",
"baseFont": "Assistant",
"baseFontColor": "#153957",
"outCnvBaseFont": "Assistant",
"outCnvBaseFontColor": "#8A8A8A",
"baseFontSize": "13",
"outCnvBaseFontSize": "13",
"yAxisMinValue":"40",
"labelFontColor": "#8A8A8A",
" captionFontColor": "#153957",
"captionFontBold": "1",
"captionFontSize": "20",
"subCaptionFontColor": "#153957",
"subCaptionfontSize": "17",
"subCaptionFontBold": "0",
"captionPadding": "20",
"valueFontBold": "0",
"showAxisLines": "1",
"yAxisLineColor": "#DCDCDC",
"xAxisLineColor": "#DCDCDC",
"xAxisLineAlpha": "15",
"yAxisLineAlpha": "15",
"toolTipPadding": "7",
"toolTipBorderColor": "#DCDCDC",
"toolTipBorderThickness": "0",
"toolTipBorderRadius": "2",
"showShadow": "0",
"toolTipBgColor": "#153957",
"theme": "fint"
},
"data": [{
"label": "Consumer general",
"value": "60.7"
}, {
"label": "Enterprise internal app",
"value": "41.7"
}, {
"label": "Progressive Web Apps",
"value": "25.1"
}, {
"label": "Consumer social network",
"value": "24"
}, {
"label": "Desktop web apps",
"value": "18.5"
}, {
"label": "Desktop apps (electron, etc)",
"value": "12.3"
}, {
"label": "Consumer chat",
"value": "12.2"
}, {
"label": "Other",
"value": "4.5"
}]
}');
$barChart->render();
?>
Thereafter, add a div container where the chart will render.
<div id="chart-1">Fusion Charts will render here</div>
Step 5: Executing the Code:
Finally, run the server by the command php artisan serve
and then route to the path which we have already set-up in our route directory for the view of the chart –
e.g. http://127.0.0.1:8000/fusioncharts
Your output should look like the image shown below:
If you see any errors in your code, click here to download the complete source code of the sample project we have created for this tutorial.
Ongamele
September 17, 2018, 7:47 amHi,
How do you use database data to create graphs?