title: Highcharts data module and HTML table change distribution column
body: <p>I am using Highcharts (<a href="http://www.highcharts.com/" rel="nofollow noreferrer">http://www.highcharts.com/</a>) with its data module (<a href="http://code.highcharts.com/modules/data.js" rel="nofollow noreferrer">http://code.highcharts.com/modules/data.js</a>) to create a data visualization and chart using HTML table.</p>
  
  <p>My table consists of mixed columns with string - for distribution and numbers for values. The table is something as follows</p>
  
  <p><img src="https://i.stack.imgur.com/aLNuu.png" alt="enter image description here"></p>
  
  <p>Now, with the given HTML table, I want the user to be able to select the distribution column based on which the series in the charts are plotted. In the sense when the <strong>Product</strong> column is selected, the graph would appear something like</p>
  
  <p><img src="https://i.stack.imgur.com/dqAmj.png" alt="enter image description here"></p>
  
  <p>And if the <strong>Category</strong> column is selected it would be something like</p>
  
  <p><img src="https://i.stack.imgur.com/Ck5kV.png" alt="enter image description here"></p>
  
  <p>Essentially in this example, the labels in the X-Axis are changed. Although, there are cases when the graph itself would change when the distribution changed.</p>
  
  <p><strong>Progress So Far: -</strong></p>
  
  <p>I have managed to find out that there is a start column and end column which can be defined based on which the distribution column and the values can be identified. Although, this does not traverse the whole table to get the exact results.</p>
  
  <p>I used the following code (Available on <a href="http://jsfiddle.net/3Ezjj/" rel="nofollow noreferrer">http://jsfiddle.net/3Ezjj/</a>) for making the distribution column as <em>Category</em> and the next column as the value: -</p>
  
  <pre><code>$(function () {
      $('#container').highcharts({
          data: {
              table: document.getElementById('datatable'),
              startColumn: 0,
              endColumn: 1
          },
          chart: {
              type: 'column'
          },
          title: {
              text: 'Data extracted from a HTML table in the page'
          },
          yAxis: {
              allowDecimals: false,
              title: {
                  text: 'Units'
              }
          },
          tooltip: {
              formatter: function() {
                  return '&lt;b&gt;'+ this.series.name +'&lt;/b&gt;&lt;br/&gt;'+
                      this.point.y +' '+ this.point.name.toLowerCase();
              }
          }
      });
  });
  </code></pre>
  
  <p>I would really appreciate any help.</p>
  
  <p>Thanks in advance!</p>