Create sample barchart and linechart on PDF

app/Http/Controllers/Frontend/PdfDownloadController.php

@@ -5,28 +5,72 @@ namespace App\Http\Controllers\Frontend;
 use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;
 use App\Models\DummyData as DummyDataModel;
-use PDF, Carbon, App;
+use App\Models\ElementsDensity as ElementsDensityModel;
+use App\Models\PetPopularity as PetPopularityModel;
+use PDF, Carbon, App, DB, Str;
 
 class PdfDownloadController extends Controller
 {
-    public function __construct(DummyDataModel $dummyDataModel){
-    	$this->dummyDataModel = $dummyDataModel;
+    public function __construct(DummyDataModel $dummyDataModel, ElementsDensityModel $elementsDensityModel, PetPopularityModel $petPopularityModel){
+        $this->dummyDataModel = $dummyDataModel;
+        $this->elementsDensityModel = $elementsDensityModel;
+        $this->petPopularityModel = $petPopularityModel;
     }
 
+    //load the datas on index
     public function index(){
-    	return view('frontend.pdf_download');
+        $this->data['elements'] = $this->get_elements_data();
+        $this->data['pet_popularity'] = $this->get_pet_popularity();
+
+    	return view('frontend.pdf_download',$this->data);
     }
 
-    public function download(){
+    public function download(Request $request){
+        $this->data['bar_chart'] = $request->bar_chart;
+        $this->data['line_chart'] = $request->line_chart;
     	$this->data['dummy_data'] = $this->dummyDataModel->first();
     	$pdf = App::make('dompdf.wrapper');
 
     	//set the html view to load
     	$pdf->loadView('domPdf.sample',$this->data);
 
-    	//set the pdf file name
-    	//use $pdf->download to download the pdf or use $pdf->stream to display the pdf on your browser
+    	// set the pdf file name
+    	// use $pdf->download to download the pdf or use $pdf->stream to display the pdf on your browser
     	return $pdf->download('sample-pdf-'.date('Ymd').'.pdf');
     	// return $pdf->stream('sample-pdf-'.date('Ymd').'.pdf');
+        return redirect()->back();
+    }
+
+    private function get_elements_data(){
+        //the code below depends on how you will represent your data based on your data structure
+        $elements = $this->elementsDensityModel->all();
+        $elements_data = [];
+
+        $info = ['Element', 'Density',  [ 'role' => 'style' ]];
+        array_push($elements_data,$info);
+
+        $color_setting = [
+            'copper' => '#ffb1c1',
+            'silver' => '#9ad0f5',
+            'gold' => '#ffe6aa',
+            'platinum' => '#a5dfdf',
+        ];
+
+        foreach ($elements as $key => $value) {
+            array_push($elements_data,[ Str::title($value->elements), (int)$value->density, $color_setting[$value->elements]]);
+        }
+
+        return json_encode($elements_data);
+    }
+
+    private function get_pet_popularity(){
+        //the code below depends on how you will represent your data based on your data structure
+        $dogs = $this->petPopularityModel->where('pet_name','Dogs')->pluck('popularity')->toArray();
+        $cats = $this->petPopularityModel->where('pet_name','Cats')->pluck('popularity')->toArray();
+        $popularity_data = [];
+        foreach(range(0,(count($dogs)-1 > count($cats)-1? count($dogs)-1 : count($cats)-1 )) as $value){
+            array_push($popularity_data,[$value,(int)$dogs[$value],(int)$cats[$value]]);
+        }
+        return json_encode($popularity_data);
     }
 }

app/Models/ElementsDensity.php

+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class ElementsDensity extends Model
+{
+   
+    protected $table = "elements_density";
+
+    protected $fillable = [
+        'elements', 'density',
+    ];
+}

app/Models/PetPopularity.php

+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PetPopularity extends Model
+{
+   
+    protected $table = "pet_popularity";
+
+    protected $fillable = [
+        'pet_name', 'popularity',
+    ];
+}

database/migrations/2019_09_10_051716_create_elements_density_table.php

+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateElementsDensityTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('elements_density', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->string('elements');
+            $table->string('density');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('elements_density');
+    }
+}

database/migrations/2019_09_10_060206_create_pet_popularity_table.php

+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreatePetPopularityTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('pet_popularity', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->string('pet_name');
+            $table->string('popularity');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('pet_popularity');
+    }
+}

database/seeds/ElementsDensityDataSeeder.php

+<?php
+
+use Illuminate\Database\Seeder;
+use App\Models\ElementsDensity as ElementsDensityModel;
+
+class ElementsDensityDataSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+    	ElementsDensityModel::truncate();
+    	$elements = [
+    		'copper',
+    		'silver',
+    		'gold',
+    		'platinum'
+    	];
+
+        foreach ($elements as $value) {
+        	$new_elements = new ElementsDensityModel;
+        	$new_elements->elements = $value;
+        	$new_elements->density = rand(10,50);
+        	$new_elements->save();
+        }
+    }
+}

database/seeds/PetPopularitySeeder.php

+<?php
+
+use Illuminate\Database\Seeder;
+use App\Models\PetPopularity as PetPopularityModel;
+
+class PetPopularitySeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+    	PetPopularityModel::truncate();
+    	$pets = [
+    		'Dogs',
+    		'Cats',
+    	];
+
+    	foreach (range(1,50) as $value) {
+    		foreach ($pets as $pet) {
+    			$new_data = new PetPopularityModel;
+    			$new_data->pet_name = $pet;
+    			$new_data->popularity = rand($value,100);
+    			$new_data->save();
+    		}
+    	}
+    }
+}

public/css/pages/domPdf/sample.css

+/*sample css*/
+.heading{
+	text-align: center;
+	color: gray;
+	font-weight: 200px;
+}
+.author{
+	color: #cecece;
+	font-weight: 200px;
+	font-size: 20px;
+}
+.body{
+	text-align: justify;
+	text-justify: inter-word;
+}
+.barchart{
+	width: 80%!important;
+}
+.linechart{
+	width: 80%!important;
+}
+.chart{
+	text-align: center;
+}
+h3{
+	font-weight: 200;
+}
\ No newline at end of file

public/css/pages/frontend/pdf_download.css

+html, body {
+    background-color: #fff;
+    color: #636b6f;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 200;
+    height: 100vh;
+    margin: 0;
+}
+
+.full-height {
+    height: 100vh;
+}
+
+.flex-center {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.position-ref {
+    position: relative;
+}
+
+.top-right {
+    position: absolute;
+    right: 10px;
+    top: 18px;
+}
+
+.content {
+    text-align: center;
+}
+
+.title {
+    font-size: 84px;
+}
+
+.links > a {
+    color: #636b6f;
+    padding: 0 25px;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: .1rem;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+.m-b-md {
+    margin-bottom: 30px;
+}
+#bar_chart_div{
+    visibility: hidden;
+    height: 0px;
+}
+#line_chart_div{
+    visibility: hidden;
+    height: 0px;
+}
\ No newline at end of file

resources/views/domPdf/sample.blade.php

@@ -18,15 +18,36 @@
 			text-align: justify;
   			text-justify: inter-word;
 		}
+		.barchart{
+			width: 80%!important;
+		}
+		.linechart{
+			width: 80%!important;
+		}
+		.chart{
+			text-align: center;
+		}
+		h3{
+			font-weight: 200;
+		}
 	</style>
 </head>
 <body>
-	<div class="heading">
+	<div class="chart">
+		<h3>Horizontal Barchart</h3>
+		<img src="{{$bar_chart}}" class="barchart">
+	</div>
+	<hr>
+	<div class="chart">
+		<h3>Line Chart</h3>
+		<img src="{{$line_chart}}" class="linechart">
+	</div>
+	<!-- <div class="heading">
 		<h1>" {{$dummy_data->title}} "</h1>
 		<span class="author">- {{$dummy_data->author}} | {{date('F d, Y h:i A',strtotime($dummy_data->created_at))}}</span>
 	</div>
 	<div class="body">
 		<p>{{$dummy_data->content}}</p>
-	</div>
+	</div> -->
 </body>
 </html>
\ No newline at end of file

resources/views/frontend/pdf_download.blade.php

@@ -9,59 +9,76 @@
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
 
+        <!-- Scripts -->
+        <script src="{{asset('js/jquery.min.js')}}"></script>
+        <script type="text/javascript" src="{{asset('js/loader.js')}}"></script>
+
         <!-- Styles -->
-        <style>
-            html, body {
-                background-color: #fff;
-                color: #636b6f;
-                font-family: 'Nunito', sans-serif;
-                font-weight: 200;
-                height: 100vh;
-                margin: 0;
-            }
+        <link rel="stylesheet" href="{{asset('css/bootstrap.min.css')}}" />
+        <link rel="stylesheet" href="{{asset('css/pages/frontend/pdf_download.css')}}" />
 
-            .full-height {
-                height: 100vh;
-            }
+        <script type="text/javascript">
+            google.charts.load("current", {packages:['corechart']});
+            google.charts.setOnLoadCallback(barChart);
 
-            .flex-center {
-                align-items: center;
-                display: flex;
-                justify-content: center;
-            }
+            var bar_chart;
+            var line_chart;
 
-            .position-ref {
-                position: relative;
-            }
+            function barChart() {
 
-            .top-right {
-                position: absolute;
-                right: 10px;
-                top: 18px;
-            }
+                var data = google.visualization.arrayToDataTable({!!$elements!!});
 
-            .content {
-                text-align: center;
-            }
+                var options = {
+                    title: "",
+                    bar: {groupWidth: '100px'},
+                    legend: 'none',
+                };
+                var bar_chart_div = document.getElementById('bar_chart_div');
+                var chart = new google.visualization.BarChart(bar_chart_div);
+                // Wait for the chart to finish drawing before calling the getImageURI() method.
+                google.visualization.events.addListener(chart, 'ready', function () {
+                    bar_chart = chart.getImageURI();
+                    $(".chart_div").append('<input type="hidden" name="bar_chart"  value="' + bar_chart + '">');
+                    // console.log(bar_chart);
+                });
 
-            .title {
-                font-size: 84px;
+                chart.draw(data, options);
             }
 
-            .links > a {
-                color: #636b6f;
-                padding: 0 25px;
-                font-size: 13px;
-                font-weight: 600;
-                letter-spacing: .1rem;
-                text-decoration: none;
-                text-transform: uppercase;
-            }
+            google.charts.load('current', {packages: ['corechart', 'line']});
+            google.charts.setOnLoadCallback(lineChart);
+
+            function lineChart() {
+                  var data = new google.visualization.DataTable();
+                  data.addColumn('number', 'X');
+                  data.addColumn('number', 'Dogs');
+                  data.addColumn('number', 'Cats');
+
+                  data.addRows({!!$pet_popularity!!});
+
+                var options = {
+                    hAxis: {
+                        title: 'Time'
+                    },
+                    vAxis: {
+                        title: 'Popularity'
+                    },
+                    colors: ['#ff6384', '#36a2eb'],
+                    curveType: 'function',
+                    legend: { position: 'bottom' }
+                };
 
-            .m-b-md {
-                margin-bottom: 30px;
+                var line_chart_div = document.getElementById('line_chart_div');
+                var chart = new google.visualization.LineChart(line_chart_div);
+
+                google.visualization.events.addListener(chart, 'ready', function () {
+                    line_chart = chart.getImageURI();
+                    $(".chart_div").append('<input type="hidden" name="line_chart"  value="' + line_chart + '">');
+                });
+
+                chart.draw(data, options);
             }
-        </style>
+        </script>
     </head>
     <body>
         <div class="flex-center position-ref full-height">
@@ -83,10 +100,16 @@
                 <div class="title m-b-md">
                     PDF Download
                 </div>
-
                 <div class="links">
-                    <a href="{{route('pdf_download.download')}}" target="_blank">Click me to download sample pdf</a>
+                    <button type="submit" form="myForm">Click me to download sample pdf</button>
                 </div>
+                <form id='myForm' action="{{route('pdf_download.download')}}" method="POST">
+                    <div class="chart_div">
+                        <input type="hidden" name="_token"  value="{{csrf_token()}}">
+                    </div>
+                    <div id="bar_chart_div"></div>
+                    <div id="line_chart_div"></div>
+                </form>
             </div>
         </div>
     </body>

routes/web.php

@@ -17,5 +17,6 @@ Route::get('/', function () {
 
 Route::group(['prefix' => 'pdf-download', 'as' => 'pdf_download.', 'namespace' => 'Frontend'], function() {
 	Route::get('/', 'PdfDownloadController@index')->name('index');
-	Route::get('sample-pdf', 'PdfDownloadController@download')->name('download');
+	Route::any('sample-pdf', 'PdfDownloadController@download')->name('download');
+	Route::get('google-graph', 'PdfDownloadController@google_graph')->name('google_graph');;
 });