title: Highcharts Column-chart with php and Ajax
body: <p>I have a problem with highcharts, beacause I can't load my php data on my highcharts graph that, it will be starting when I click a form (with id=year).
  I've done an ajax call and the response is this: </p>
  
  <p><code>"{"zone":["NORD-OVEST","NORD-EST","CENTRO","SUD","ISOLE","TOTALE ITALIA"],"elementare":[71,69,59,44,44,59],"medie":[8,5,6,4,3,5],"diploma":[3,3,3,2,2,3],"laurea":[1,0,1,0,1,1]}".</code></p>
  
  <p>I have the problem when i have to load this data to highcharts graph, because the ajax call is right but the graph doesn't work..it remains Black with the legend in the top-right.</p>
  
  <p>Here you are my code js:</p>
  
  <pre><code>function bottone1() {
      $('#bottone1').click(function(){//bottone1 is my id button form
          var year=$('#year').val();
          if((year!='seleziona')){
              $.ajax({
                  url: './php/grafico1.php',
                  data: {'year': year},
                  datatype: 'json',
                  success: function(data) {
                      grafo1(data);
                  },
                  error: function(data) {
                      alert('non funge');
                  }
              });
          };
      });
  };
  
  function grafo1(){
  var options = {
      chart: {
          renderTo: 'grafico',
          type: 'column',
          marginRight: 130,
          marginBottom: 25
      },
      title: {
          text: 'Titolo Di Studio',
          x: -20 //center
      },
      subtitle: {
          text: '',
          x: -20
      },
      xAxis: {
          categories: [{}]
      },
      yAxis: {
          title: {
              text: 'Percentuale'
          },
          plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
              }]
      },
      tooltip: {
          formatter: function() {
              return '&lt;b&gt;' + this.series.name + '&lt;/b&gt;&lt;br/&gt;' +
                      this.x + ': ' + this.y;
          }
      },
      legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          x: -10,
          y: 100,
          borderWidth: 0
      },
      series: [{}, {}, {}, {}]
  }
  $.ajax({
      dataType: "json",
      url: "./php/grafico1.php",
      type: 'get',
      data: "",
      success: function(data) {
          options.xAxis.categories = data.zona;
          options.series[0].name = 'Licenza Elementare';
          options.series[0].data = data.elementare;
          options.series[1].name = 'Licenza Media';
          options.series[1].data = data.medie;
          options.series[2].name = 'Diploma';
          options.series[2].data = data.diploma;
          options.series[3].name = 'Laurea';
          options.series[3].data = data.laurea;
          chart = new Highcharts.Chart(options);
      }
  });
  };
  </code></pre>
  
  <p>Here here my graph response:</p>
  
  <p><code>{"zone":[],"elementare":[],"medie":[],"diploma":[],"laurea":[]}</code></p>
  
  <p>I can't get the data why ?</p>