title: Laravel: How to load an HTML page with Morris chart as PDF using thujohn/pdf-l4 plugin?
body: <p>I am using Larvel 4.2 and thujohn/pdf-l4 plugin.</p>
  
  <p>I have a problem in converting an HTML page to PDF. When I convert an HTML page, Everything on the page are displayed except the Morris chart on it.</p>
  
  <p>My Route</p>
  
  <pre><code>Route::post('performanceDetail/preview',[
      'as' =&gt; 'print.preview',
      'uses' =&gt; 'PerformanceController@postPerformanceDetails']);
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>public function postPerformanceDetails()
  {
      $data = [
          'event' =&gt; Input::get('events'),
          'start_date' =&gt; Input::get('start_date'),
          'to_date' =&gt; Input::get('to_date'),
      ];
          $start_date = date('Y-m-d H:i:s',strtotime($data['start_date'].'00:00:00'));
          $to_date = date('Y-m-d H:i:s',strtotime($data['to_date'].'23:59:59'));
          $stats = Performance::where('event_type','=',$data['event'])
          -&gt;where('campaign_id',Session::get('campaignid'))
          -&gt;where('created_at', '&gt;=',$start_date)
          -&gt;where('created_at','&lt;=',$to_date)
          -&gt;groupBy('perf_date')
          -&gt;orderBy('perf_date', 'DESC')
          -&gt;remember(60)
          -&gt;get([
          DB::raw('Date(created_at) as perf_date'),
          DB::raw('COUNT(id) as perf_count')
          ])
          -&gt;toJSON();
          //return $stats;
          $campaign = Campaign::find(Session::get('campaignid'));
          $list = CategoryList::find($campaign-&gt;categorylist_id);
          $totalPerformance = TotalPerformance::find(Session::get('totalPerformance'));
          //$this-&gt;layout-&gt;title = "Performance details";
          return PDF::load(View::make('performance.show')
          -&gt;with('stats',$stats)
          -&gt;with('campaign',$campaign)
          -&gt;with('list',$list)
          -&gt;with('start_date',$data['start_date'])
          -&gt;with('to_date',$data['to_date'])
          -&gt;with('totalPerformance',$totalPerformance))-&gt;show();
  }
  </code></pre>
  
  <p>View</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{{-- Form to view performance details --}}
  &lt;html lang="en"&gt;
      &lt;head&gt;
    &lt;p align="center"&gt;
     &lt;b&gt; &lt;font size="5" &gt;Performance report&lt;/font&gt;&lt;/b&gt;
    &lt;/p&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;p align="center"&gt; 
     &lt;font size="4" &gt;{{{$campaign-&gt;template-&gt;title}}}&lt;/font&gt;&lt;/b&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;b&gt;List:&amp;nbsp;&lt;/b&gt;&lt;font&gt;{{$list-&gt;name}} &lt;/font&gt;
    &lt;/p&gt;
    &lt;br&gt;
    &lt;p&gt;
     &lt;b&gt;Total performance&lt;/b&gt;
    &lt;/p&gt;
    &lt;p&gt;
     &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th width="100"&gt;Campaign&lt;/th&gt;
              &lt;th width="50" &gt;Sent&lt;/th&gt;
              &lt;th width="50" &gt;Clicks&lt;/th&gt;
              &lt;th width="50" &gt;Loads&lt;/th&gt;
              &lt;th width="50" &gt;Opens&lt;/th&gt;
              &lt;th width="50" &gt;Views&lt;/th&gt;
          &lt;/tr&gt;
         &lt;/thead&gt;
         &lt;tbody&gt;
          &lt;tr&gt;
           &lt;td align="center" width="200"&gt;{{{$campaign-&gt;template-&gt;title}}}&lt;/td&gt;
           &lt;td align="center" width="50"&gt;{{$totalPerformance-&gt;totalSent }}&lt;/td&gt;
           &lt;td width="50" align="center"&gt;{{$totalPerformance-&gt;clicks }}&lt;/td&gt;
           &lt;td width="50" align="center"&gt;{{$totalPerformance-&gt;loads }}&lt;/td&gt;
           &lt;td width="50" align="center"&gt;{{$totalPerformance-&gt;opens }}&lt;/td&gt;
           &lt;td width="50" align="center"&gt;{{$totalPerformance-&gt;views }}&lt;/td&gt;
          &lt;/tr&gt;
         &lt;/tbody&gt;
     &lt;/table&gt;
    &lt;/p&gt;
    &lt;br&gt;
    &lt;p&gt;
     &lt;b&gt;Date&lt;/b&gt;
    &lt;/p&gt;
    &lt;p&gt;
     From: &amp;nbsp;{{$start_date}} &amp;nbsp;&amp;nbsp; To: &amp;nbsp; {{$to_date}}
    &lt;/p&gt;
    {{-- hosted assets for Morris charts --}}
    &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"&gt;
    {{ HTML::script('../bower_components/jquery/dist/jquery.min.js') }}
    {{ HTML::script('../bower_components/raphael/raphael-min.js') }}
    {{ HTML::script('../bower_components/morrisjs/morris.min.js') }}
    &lt;input type="hidden" name="dataChart" id="dataChart" value="{{{$stats}}}"&gt;
    &lt;div id="mchart"&gt;
     
    &lt;/div&gt;
    &lt;script type="text/javascript"&gt;
    $(document).ready(function()
    {
     var events = $('#dataChart').val();
        console.log(events);
  
     var chart = Morris.Bar({
        barGap:1,
        barSizeRatio:.10,
        // ID of the element in which to draw the chart.
        element: 'mchart',
        // Set initial data (ideally you would provide an array of default data)
        data: [0,0],
        xkey: 'perf_date',
        ykeys: ['perf_count'],
        labels: ['Count'],
        //barColors: ['#0B62A4','#f75b68','#4DA74D','#646464'],
        hideHover: 'auto'
        });
     chart.setData(JSON.parse(events));
        
     
    });
    &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried to display this view without conversion, it was successful. But, when executed the above code the Morris Chart is not displayed on PDF.</p>
  
  <p>How can I solve this Please guide.</p>