title: Highcharts, MYSQL and Drilldown
body: <p>I really need to be able to perform a drill down for columns of data. Note there will be 4 columns of data per month. </p>
  
  <p>I have also seen examples of the drill down column on the Highcharts website site. I do understand how it works if the data is hard coded. But this data needs to be pulled from a database. </p>
  
  <p>I can get a basic chart from the following my_data.php file. </p>
  
  <pre><code>[{"name":"ONE","data":[1077668]},{"name":"TWO","data":[39657923]}, {"name":"THREE","data":[99428783]},{"name":"FOUR","data":[4431354]}]
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          var chart;
          $(document).ready(function() {
              $.getJSON("my_data.php", function(json) {
  
                  chart = new Highcharts.Chart({
                      chart: {
                          renderTo: 'container',
                          type: 'column',
                          marginRight: 130,
                          marginBottom: 25
                      },
                      title: {
                          text: 'testing',
                          x: -20 //center
                      },
                      subtitle: {
                          text: '',
                          x: -20
                      },
                      xAxis: {
                          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                      },
                      yAxis: {
                          title: {
                              text: 'Amount'
                          },
                          plotLines: [{
                              value: 0,
                              width: 1,
                              color: '#808080'
                          }]
                      },
                      tooltip: {
                          formatter: function() {
                              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: json
                  });
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am really confused on where in this type of chart i would put the drilldown call? I do know it should be something like the follow. I also think there will be multiple if/else statement for the different drilldowns. </p>
  
  <pre><code>click: function() {
      var drilldown = this.drilldown;
      if (drilldown) { // drill down
          var chart = this.series.chart;
          $.getJSON(...., function(data){
              chart.setTitle({
                  text: data.name
              });
              setChart(data.name, data.categories, data.data, data.color, data.level);
          });
      } else { // restore
          setChart(name, categories, data, null, level);    
      }
  }
  </code></pre>
  
  <p>If I am using the wrong chart data please let me know. I can use something like this but I am having issues with producing the chart with intial data from the database. because I would have the same issue on where to set the drillname (like level 0, level 1 and so on)</p>
  
  <pre><code>var colors = Highcharts.getOptions().colors,
  categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
  name = 'Browser brands',
  data = [{
      y: 55.11,
      color: colors[0],
      drilldown: {
          name: 'MSIE versions',
          categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
          data: [10.85, 7.35, 33.06, 2.81],
          color: colors[0]
      }
  }, {
      y: 21.63,
      color: colors[1],
      drilldown: {
          name: 'Firefox versions',
          categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
          data: [0.20, 0.83, 1.58, 13.12, 5.43],
          color: colors[1]
      }
  }, {
  </code></pre>