Implement HTML5 Column charts using JavaScript

I am using the pie chart which is working fine now but i would like to use the column chart but i don't know how to convert from pie to column.  Can someone please help?  thanks

<script type="text/javascript">
    $(function () {
        LoadChart();
    });
    function LoadChart() {
        $("#dvChart").html("");
        $("#dvLegend").html("");

        //Populate data for the chart
        var fruits = new Array();

        var mango = {};
        mango.text = "Mango";
        mango.value = 20;
        mango.color = "#FEBD01";
        fruits.push(mango);

        var orange = {};
        orange.text = "Orange";
        orange.value = 40;
        orange.color = "#FF8C00";
        fruits.push(orange);

        var peach = {};
        peach.text = "Peach";
        peach.value = 55;
        peach.color = "#FFCBA6";
        fruits.push(peach);

        var el = document.createElement('canvas');
        $("#dvChart")[0].appendChild(el);

        //Fix for IE 8
        if ($.browser.msie && $.browser.version == "8.0") {
            G_vmlCanvasManager.initElement(el);
        }
        var ctx = el.getContext('2d');
        var chart = new Chart(ctx).Pie(fruits);

        for (var i = 0; i < fruits.length; i++) {
            var div = $("<div />");
            div.css("margin-bottom", "10px");
            div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + fruits[i].color + "'></span> " + fruits[i].text);
            $("#dvLegend").append(div);
        }
    }
</script>

and here is the aspx

<div class="row">
          <div class="col-sm-5">

      <table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="dvChart">
            </div>
        </td>
        <td>
            <div id="dvLegend">
            </div>
        </td>
    </tr>
</table>

              </div>

           <div class="col-sm-3">

     

              </div>


          <div class="col-sm-4">



        <div class="col-sm-4 col-sm-offset-3 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            
              
           
          </div>
          <div class="sidebar-module">
              <pre><code>LINKS</code></pre>
          <%--  <h4>Links</h4>--%>
            <ol class="list-unstyled">

                <asp:Panel ID="pnlHome" runat="server" Visible="true">
                    <li><a href="Home">Home</a></li>
                    </asp:Panel>

                <asp:Panel ID="pnlLinkage" runat="server" Visible="false">
                    <li><a href="LinkageProfile">Linkage Portal</a></li>
                    </asp:Panel>

                  <asp:Panel ID="pnlMng" runat="server" Visible="false">
                    <li><a href="Manage">User Registration Approval</a></li>
                    </asp:Panel>
              
                 <asp:Panel ID="pnlAdmin" runat="server" Visible="false">
                   <li><a href="Admin">Admin</a></li>
                    </asp:Panel>
             
                <asp:Panel ID="pnlLogin" runat="server" Visible="true">
                   <li><a href="Login">Login</a></li>
                    </asp:Panel>
              
                 <asp:Panel ID="pnlReg" runat="server" Visible="true">
                   <li><a href="Register">Registration</a></li>
                    </asp:Panel>
              
                 <asp:Panel ID="pnlDiary" runat="server" Visible="true">
                  <li><a href="EditDriver">Edit Driver</a></li>
                    </asp:Panel>
              
              

                         
            </ol>
          </div>
          
        </div><!-- /.blog-sidebar -->
              </div>
          
      </div>