How to draw Stacked Column Bar Graph using HighCharts

Well the above picture if a stacked column bar graph generated using HighCharts. HighCharts can be used for generating various graphs. And this one is an example among those. I am came to know about highcharts when I was working in a project where I had to show the sales made and the cost incurred. And my solution was highcharts. So I thought sharing it with you.
To generate the chart the following code can be used:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="summary_graph" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
                    <script>
                    $(function () {
                      $('#summary_graph').highcharts({
                          chart: {
                              type: 'column'
                          },
                          title: {
                              text: ''
                          },
                          xAxis: {
                              categories: ['2011','2012']
                          },
                          yAxis: {
                              min: 0,
                              title: {
                                  text: 'Total transaction'
                              },
                              stackLabels: {
                                  enabled: true,
                                  style: {
                                      fontWeight: 'bold',
                                      color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                                  }
                              }
                          },
                          legend: {
                              align: 'right',
                              x: -100,
                              verticalAlign: 'top',
                              y: 20,
                              floating: true,
                              backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                              borderColor: '#CCC',
                              borderWidth: 1,
                              shadow: false
                          },
                          tooltip: {
                              formatter: function() {
                                  return '<b>'+ this.x +'</b><br/>'+
                                      this.series.name +': '+ this.y +'<br/>'+
                                      'Transaction: '+ this.point.stackTotal;
                              }
                          },
                          plotOptions: {
                              column: {
                                  stacking: 'normal',
                                  dataLabels: {
                                      enabled: true,
                                      color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                                  }
                              }
                          },
                          series: [{
                              name: 'Sales',
                              color:'#7A59B3',
                              data: [50,60]
                          }, {
                              name: 'Cost',
                              color:'#FF0064',
                              data: [40,20]
                          }, ]
                      });
                  });
               
                    </script>

Everything should be clear here. If not then first thing is to include the JavaScript dependencies i.e you need to include the three JavaScript libraries: jquery , highcharts.js and exporting.js. Then the next step is to create a container where the graph is to be displayed. In the above example its a div with id="summary_graph".
Now the part to populate the graph with statistics. Categories is used for the number of columns for the graph. Series are for the stacks in a column of the graph. In above example, I have used two stacks Sales and Cost. You can vary that. And yes every every entry in the Series should be populated with data which should have entries equal to the number of the columns. So why no copy the above code and try it right away?  If you are more interested in visualizing data and statistics then better check out http://highcharts.com/ .