title: php: laravel slow view render time when rendering javascript for highcharts
body: <p>I have a strange problem in a website that I'm building. On the page that has the problem I am using a few highcharts. Everything works fine, but the rendering time is much too long (about 5 seconds).</p>
  
  <p>When I inspect it in chrome, I see something like this: </p>
  
  <p><a href="https://i.stack.imgur.com/Mseau.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Mseau.png" alt="enter image description here"></a></p>
  
  <p>The 8 scripts for the highcharts are in the red box. It's clear that the problem is in there.</p>
  
  <p>To render the scripts for the highcharts (javascript) , I created a controller and views. I use them in the template in this way:</p>
  
  <pre><code>{{ Html::script(url ('/highchart/gauge', [$humidityInside-&gt;sd_value , 'humidityInside', 'Luchtvochtigheid binnen','%',0,100,'#55BF3B','#DDDF0D','#DF5353'])) }}
  </code></pre>
  
  <p>and in the highchart controller I just send the variable to the view:</p>
  
  <pre><code> public function gauge($value,$divname,$chartTitle,$suffix,$minValue,$maxValue,$colorMin,$colorMed,$colorMax)
          {
              return view('highchart.gauge')-&gt;with(compact('value' , 'divname','chartTitle','suffix','minValue','maxValue','colorMin','colorMed','colorMax'));
          }
  </code></pre>
  
  <p>The view then just renders the javascript, putting in the variables at the right place:</p>
  
  <pre><code>$(function () {
  
      var gaugeOptions = {
  
          chart: {
              type: 'solidgauge'
          },
  
          title: null,
  
          pane: {
              center: ['50%', '85%'],
              size: '140%',
              startAngle: -90,
              endAngle: 90,
              background: {
                  backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.background2) || '#EEE',
                  innerRadius: '60%',
                  outerRadius: '100%',
                  shape: 'arc'
              }
          },
  
          tooltip: {
              enabled: false
          },
  
          // the value axis
          yAxis: {
              stops: [
                  [0.1, '{{ $colorMin }}'], // green
                  [0.8, '{{ $colorMed }}'], // yellow
                  [0.9, '{{ $colorMax }}'] // red
              ],
              lineWidth: 0,
              minorTickInterval: null,
              tickPixelInterval: 400,
              tickWidth: 0,
              title: {
                  y: -70
              },
              labels: {
                  y: 16
              }
          },
  
          plotOptions: {
              solidgauge: {
                  dataLabels: {
                      y: 5,
                      borderWidth: 0,
                      useHTML: true
                  }
              }
          }
      };
  
  
      $('#{{$divname}}').highcharts(Highcharts.merge(gaugeOptions, {
          yAxis: {
              min: {{ $minValue }},
              max: {{ $maxValue }},
              title: {
                  text: '{{ $chartTitle }} '
              }
          },
  
          credits: {
              enabled: false
          },
  
          series: [{
              name: '{{ $chartTitle }}',
              data: [{{ $value}} ],
              dataLabels: {
                  format: '&lt;div style=\"text-align:center\"&gt;&lt;span style=\"font-size:25px;color:' +
                      ((Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || 'black') + '\"&gt;{y}&lt;/span&gt;&lt;br/&gt;' +
                         '&lt;span style=\"font-size:12px;color:silver\"&gt;{{$suffix}}&lt;/span&gt;&lt;/div&gt;'
              },
              tooltip: {
                  valueSuffix: ' {{$suffix}}'
              }
          }]
  
      }));
  
  });
  </code></pre>
  
  <p>As you can see in the image, the first script works quite ok, but the render time of every following script is going up for one or another reason. If I just render the script for one of the charts, it's working fine.</p>
  
  <p>Any idea what's slowing me down?</p>