title: Symfony2 : allow Access-Control-Allow-Origin with google charts
body: <p>In my Symfony application, I am using google charts.</p>
  
  <p>I get an error :</p>
  
  <pre><code>XMLHttpRequest cannot load https://www.google.com/uds/api/visualization/1.0/dca88b1ff7033fac80178eb526cb263e/ui+en.css. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://foodmeup.dev' is therefore not allowed access.
  </code></pre>
  
  <p>I've tried to get around this by setting a listener which adds headers to the response (see the cors listener here : <a href="https://stackoverflow.com/questions/8472333/symfony2-how-can-i-set-custom-headers">Symfony2 - how can I set custom Headers?</a>) and it's not working, I get the same error.</p>
  
  <pre><code>&lt;?php
  namespace AppBundle\EventListener;
  
  use Symfony\Component\HttpKernel\Event\FilterResponseEvent;
  
  class CorsListener
  {
  public function onKernelResponse(FilterResponseEvent $event)
  {
      $response = $event-&gt;getResponse();
      $responseHeaders = $response-&gt;headers;
  
      $responseHeaders-&gt;set('Access-Control-Allow-Headers', 'origin, content-type, accept');
      $responseHeaders-&gt;set('Access-Control-Allow-Origin', '*');
      $responseHeaders-&gt;set('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, PATCH, OPTIONS');
  
      $event-&gt;setResponse($response);
  }
  }
  </code></pre>
  
  <p>In my view I use a simple google chart :</p>
  
  <pre><code>&lt;div class="piechart margin-auto" style="height: 220px;" data-completeness="{{ completeness }}"&gt;&lt;/div&gt;
  
  &lt;script&gt;var googleCharts = [];&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          function drawProfilePieCharts()
          {
              var completeness = $(this).data('completeness');
  
              var data = google.visualization.arrayToDataTable([
                  ['Nom',    'Valeur'],
                  ["Profil rempli à ", completeness],
                  ['Manque', 100 - completeness]
              ]);
  
              var options = {
                  backgroundColor: { fill:'transparent'},
                  pieSliceBorderColor : 'transparent',
                  pieHole: 0.8,
                  legend: {position: 'top'},
                  width: 220,
                  height: 220,
                  tooltip: {trigger: 'none'},
                  pieStartAngle: -90,
                  pieSliceTextStyle :{fontsize : 16, color: 'transparent'},
                  slices: {
                      0: { color: '#09b4ff'},
                      1: { color: '#444'}
                  },
                  chartArea : {width: '90%', height: '90%'}
              };
  
              var chart = new google.visualization.PieChart(this);
              chart.draw(data, options);
          }
  
          googleCharts.push("$('.piechart').each(drawProfilePieCharts)");
  
      $(window).resize(function(){
          drawAllCharts();
      });
  
  
      google.load('visualization', '1', {packages:['corechart', 'bar', 'line']});
      var drawAllCharts = function() {
          for (var i = 0; i &lt; googleCharts.length; i++) {
              eval(googleCharts[i]);
          }
      };
  
      google.setOnLoadCallback(function(){drawAllCharts()});
  
      &lt;/script&gt;
  </code></pre>