Here we ‘ll look at visualization of data using
highcharts .
Generally data visualization presents the data in graphical or
pictorial format so it helps the readers to easily understand the data.
Highcharts.com provides with a lot of different types of charts –
line, area, bar, column, pie and many more. Here we ‘ll implement line
chart with required data fetched from database.
In this example we show yearly sales of 10 different companies, the database table can be found
here .
The model file will look like,
< ? php
namespace App ;
use Illuminate \ Database \ Eloquent \ Model ;
class CompanyDetails extends Model {
protected $ table = 'companydetails' ;
public $ timestamps = false ;
}
First we get all the data from database and then convert the
highcharts javascript code to php and pass the data to the view so the
visualization of data can be seen.
We get data of each company seperately,
$ y2006Details = CompanyDetails :: where ( 'year' , '2006' ) -> get ( ) ;
$ y2007Details = CompanyDetails :: where ( 'year' , '2007' ) -> get ( ) ;
$ y2008Details = CompanyDetails :: where ( 'year' , '2008' ) -> get ( ) ;
$ y2009Details = CompanyDetails :: where ( 'year' , '2009' ) -> get ( ) ;
$ y2010Details = CompanyDetails :: where ( 'year' , '2010' ) -> get ( ) ;
$ y2011Details = CompanyDetails :: where ( 'year' , '2011' ) -> get ( ) ;
$ y2012Details = CompanyDetails :: where ( 'year' , '2012' ) -> get ( ) ;
$ y2013Details = CompanyDetails :: where ( 'year' , '2013' ) -> get ( ) ;
$ y2014Details = CompanyDetails :: where ( 'year' , '2014' ) -> get ( ) ;
$ y2015Details = CompanyDetails :: where ( 'year' , '2015' ) -> get ( ) ;
We get all the company names,
$ companyNames = CompanyDetails :: select ( 'company' ) -> groupBy ( 'company' ) -> get ( ) ;
Now we push all the company names to an array so as to pass this array to highcharts
foreach ( $ companyNames as $ company )
array_push ( $ comapanyNamesArray , $ company -> company ) ;
Now we push each of the company sales details into array,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
foreach ( $ y2006Details as $ det )
array_push ( $ y2006 , ( int ) $ det -> sales ) ;
foreach ( $ y2007Details as $ det )
array_push ( $ y2007 , ( int ) $ det -> sales ) ;
foreach ( $ y2008Details as $ det )
array_push ( $ y2008 , ( int ) $ det -> sales ) ;
foreach ( $ y2009Details as $ det )
array_push ( $ y2009 , ( int ) $ det -> sales ) ;
foreach ( $ y2010Details as $ det )
array_push ( $ y2010 , ( int ) $ det -> sales ) ;
foreach ( $ y2011Details as $ det )
array_push ( $ y2011 , ( int ) $ det -> sales ) ;
foreach ( $ y2012Details as $ det )
array_push ( $ y2012 , ( int ) $ det -> sales ) ;
foreach ( $ y2013Details as $ det )
array_push ( $ y2013 , ( int ) $ det -> sales ) ;
foreach ( $ y2014Details as $ det )
array_push ( $ y2014 , ( int ) $ det -> sales ) ;
foreach ( $ y2015Details as $ det )
array_push ( $ y2015 , ( int ) $ det -> sales ) ;
Now we push each of this array into an array so as to pass this data to highcharts,
array_push ( $ dataArray , $ y2006 , $ y2007 , $ y2008 ,
$ y2009 , $ y2010 , $ y2011 , $ y2012 , $ y2013 ,
$ y2014 , $ y2015 ) ;
Passing name and data for series array in highcharts.
for ( $ i = 0 ; $ i < count ( $ dataArray ) ; $ i ++ )
$ chartArray [ "series" ] [ ] = array (
"name" = > $ comapanyNamesArray [ $ i ] ,
"data" = > $ dataArray [ $ i ]
) ;
Now we pass some data like chart title, x-axis name, y-axis name to highcharts.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$ chartArray [ "chart" ] = array (
"type" = > "line"
) ;
$ chartArray [ "title" ] = array (
"text" = > "Yearly sales"
) ;
$ chartArray [ "credits" ] = array (
"enabled" = > false
) ;
$ chartArray [ "xAxis" ] = array (
"categories" = > array ( )
) ;
$ chartArray [ "tooltip" ] = array (
"valueSuffix" = > "$"
) ;
$ chartArray [ "xAxis" ] = array (
"categories" = > $ categoryArray
) ;
$ chartArray [ "yAxis" ] = array (
"title" = > array (
"text" = > "Sales ( $ )"
)
) ;
We pass this chartArray to welcome view.
return view ( 'welcome' ) -> withChartarray ( $ chartArray ) ;
In the view, we simply pass this array to highcharts.
<script type = "text/javascript" >
$ ( function ( ) {
$ ( '#container' ) . highcharts ( < ? php echo json_encode ( $ chartarray ) ? > )
} ) ;
</script>
The output of our visualization
Data visualization using highcharts
![About [span]me[/span]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vnao8Kka6_-BexFDumkyh59tekpM5L6lrrxLtQydhPJUx2jJKoDBiE33oqHV5wgPVvnz7iTnofOS_rzJ6b5FYfB77RK13sbilK1qiPtj1i5YxzOGoG1CK9Q0jEpgoNBQO3ZCWSr4idMzPQ5E8N6LS4e1_cMkrY=s0-d)
