Monday, 23 October, 2017 UTC
Summary
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 nowadays, 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.
Let’s take a look at what Laravel requires to work properly. 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
Let’s take a look at what Laravel requires to work properly. The earliest PHP version required for Laravel to work is 5.6.4. Laravel will also work with PHP’s latest version, PHP 7.
To render FusionCharts using Laravel, we need to include following:
Composer (Download): Download and run
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,
blogis 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/jsfolder. Include it in the
htmlsection of
index.blade.phpfile which is inside the
views/fusionchartssection 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.phpinside the
composer.jsonfile. Add the required files in
autoloadsection – in a new entry called
filesas shown below:
Note: Don’t forget to run
Part 2: Creating Controller and its View to Render the chart
composer dump-autoloadfor changes to take effect.
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', 'FusionCharts@home');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\fusionchartsfolder.
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
e.g. http://127.0.0.1:8000/fusioncharts
php artisan serveand 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.
The post How To Create Charts Using Laravel In Your Web Application appeared first on FusionBrew - The FusionCharts Blog.