title: highcharts dynamic use of plugin grouped_categories
body: <p>I try to use dynamically the HighCharts plugin : <strong><a href="https://github.com/blacklabel/grouped_categories" rel="nofollow">grouped_categories</a></strong></p>
  
  <p>The good Json format for this plugin is :</p>
  
  <pre><code>xAxis: {
  categories: [{
      name: "Fruit",
      categories: ["Apple", "Banana", "Orange"]
  }, {
      name: "Vegetable",
      categories: ["Carrot", "Potato", "Tomato"]
  }, {
      name: "Fish",
      categories: ["Cod", "Salmon", "Tuna"]
  }]
  </code></pre>
  
  <p>}</p>
  
  <p>I use <a href="http://blueflame-software.com/blog/how-to-create-dynamic-x-axis-data-using-json/" rel="nofollow">this technic</a> for make my xAxis dynamically :</p>
  
  <ul>
  <li>In my chart I write : <code>xAxis: {categories: []}</code> and after I call the
  part of the Json <code>options.xAxis.categories = json[0]['data'];</code></li>
  </ul>
  
  <p>So I tried many technics, but never the good ...</p>
  
  <p>Have you got an idea for resolve this problem ?</p>
  
  <p>Thank you very much.</p>
  
  <p>Geo-x</p>
  
  <hr>
  
  <h2>EDIT 1</h2>
  
  <p>This is my code after the generation of my JSON with AJAX </p>
  
  <pre><code>// -- Graphical options --
          var options = {
              chart: {
                  renderTo: 'graphique',
                  type : type_graph},
              xAxis: {categories: []},
              title: {text: ''},
              tooltip: {
                  animation : true,
                  borderRadius : 15
                      },
              plotOptions: {
                  line: {
                      allowPointSelect: true,
                      cursor: 'pointer',
                      groupPadding: 0.1,
                      states: {
                          hover: {
                              brightness: -0.3}}
                          },
                  column: {
                      allowPointSelect: true,
                      cursor: 'pointer'
                          }
              }
              ,series: []
          }
  
          $.post(
              "statistiques_data.php",
              parametres_connexion,
              function(json) {
  
                  // X AXIS --------------------------------------
  
                      options.xAxis.categories = json[0]['data'];
  
                  // DATA --------------------------------------
  
                      options.series[0] = json[1];
  
                  // LEGEND --------------------------------------
  
                      options.legend = {enabled : false,backgroundColor : '#FCFFC5'};
  
                  // LABELS --------------------------------------
  
                      switch (type_graph) {
  
                          ///////////////////////////////
                          case 'line' :
                          ///////////////////////////////
  
                              var dataSum = 0;
                              for (var i=0;i &lt; json[1]['data'].length;i++) {
                                  dataSum += json[1]['data'][i]
                              };
                              options.plotOptions.bar.dataLabels = {enabled:true,formatter:function() {var pcnt = (this.y / dataSum) * 100; return  Highcharts.numberFormat(pcnt,2) + ' %';}};
  
                              options.xAxis.labels = {step: 1,style: {fontSize: '9px',fontFamily: 'Arial Bold, Arial, Verdana'}};
  
                          break;
  
                          ///////////////////////////////
                          case 'column' :
                          ///////////////////////////////
  
                              var dataSum = 0;
                              for (var i=0;i &lt; json[1]['data'].length;i++) {
                                  dataSum += json[1]['data'][i]
                              };
                              options.plotOptions.column.dataLabels = {enabled:true,formatter:function() {var pcnt = (this.y / dataSum) * 100; return  Highcharts.numberFormat(pcnt,2) + ' %';}};
  
                              options.xAxis.labels = {
                              autoRotation: [-10,-20,-30,-40,-50,-60,-70,-80,-90],
  
                              step: 1,
                              style: {fontSize: '80%',fontFamily: 'Arial Bold, Arial, Verdana'}};
  
                          break;
                      }
  
                  // GRAPHIC
  
                  chart = new Highcharts.Chart(options);}, 
              "json");
  </code></pre>
  
  <hr>
  
  <h2>EDIT 2</h2>
  
  <p>I generate my JSON with a PHP code :</p>
  
  <pre><code>[{name: "col1", categories: [{ name: "CITY1", categories: ["Not information", "Multiple", "type1"] }, { name: "CITY2", categories: ["Not information", "Type2"] }, { name: "CITY3", categories: ["Not information", "Type1","Type2"] }]} { name: "col2", categories: [1,6,1,3,1,2,1,9]}
  </code></pre>
  
  <p>But now if I try this for generate my graphic I don't have results :</p>
  
  <p>For my name col1</p>
  
  <pre><code>options.xAxis.categories = json[0];
  </code></pre>
  
  <p>And for my name col2</p>
  
  <pre><code>options.series[0] = json[1];
  </code></pre>
  
  <p>It's an error with the navigation of my json but I don't see where is the error</p>