Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 290px; width: 100%;">
  </div>
    <asp:TextBox ID="TBAñoMayor" runat="server" Width= "1px" Height= "1px"
    BorderColor="White" BorderStyle="None"></asp:TextBox>
   <asp:TextBox ID="TBMayorf" runat="server" Width= "1px" Height= "1px"
    BorderColor="White" BorderStyle="None"></asp:TextBox>
    <asp:TextBox ID="TBMayorn" runat="server" Width= "1px" Height= "1px"
    BorderColor="White" BorderStyle="None"></asp:TextBox>
  <asp:TextBox ID="TBSEyactualf" runat="server" Width= "1px" Height= "1px"
    BorderColor="White" BorderStyle="None"></asp:TextBox>
    <asp:TextBox ID="TBSEyactualn" runat="server" Width= "1px" Height= "1px"
    BorderColor="White" BorderStyle="None"></asp:TextBox>
     <asp:TextBox ID="TBSEyanteriorf" runat="server" Width= "1px" Height= "1px"
    BorderColor="White" BorderStyle="None"></asp:TextBox>
    <asp:TextBox ID="TBSEyanteriorn" runat="server" Width= "1px" Height= "1px"
    BorderColor="White" BorderStyle="None"></asp:TextBox>
     <asp:TextBox ID="TBNomCon" runat="server" Width= "1px" Height= "1px"
    BorderColor="White" BorderStyle="None"></asp:TextBox>
     <asp:TextBox ID="TBNumCon" runat="server" Width= "1px" Height= "1px"
    BorderColor="White" BorderStyle="None"></asp:TextBox>

CSS

.style1
    {
      width: 278px;
      height: 231px;
    }
    .style3
    {
      width: 362px;
      height: 231px;
    }
    .style4
    {
      width: 270px;
      height: 231px;
    }
    .style5
    {
      height: 38px;
    }
    .style6
    {
      width: 362px;
      height: 38px;
    }
    .style7
    {
      width: 270px;
      height: 38px;
    }
.description{
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
}
a:link, a:visited, a:active{color: #4F81BC;}

JavaScript

type="text/javascript";
src="canvasjs.min.js";

      CanvasJS.addCultureInfo("es",
                {
                  decimalSeparator: ".",
                  digitGroupSeparator: ",",
                  days: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"], shortMonths: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"]

                });

      // dateFormat.masks.MESDIA = 'MM/dd!';
      vañomayor = document.getElementById("TBAñoMayor").value;
      
      var y = 0;
      var data = [];
      var dataSeries = { name: "Año Actual " + "2013", type: "line", showInLegend: true };
      var dataPoints = [];
      var dataSeriesA = { name: "Año Anterior " + "2012", type: "line", showInLegend: true };
      var dataPointsA = [];
      var dataSeriesM = { name: "Año Mayor " + "2009" , type: "line", showInLegend: true };
      var dataPointsM = [];

      vnomcon = document.getElementById("TBNomCon").value;
      vnumcon = document.getElementById("TBNumCon").value;      ////Año Actual//////////////////////////////////////////////////////
      vpoly = "20130101F20130102F20130103F20130104F20130105F" ;
      var vpyactualf = [];
      vpyactualf = vpoly.split("F");
      vpoly = document.getElementById("TBSEyactualn").value;
      vpoly = "176586.38N1044945.92N160295.99N422044.89N647601.52N";
      var vpyactualn = [];
      vpyactualn = vpoly.split("N");
      var limit = vpyactualf.length;

      for (var i = 0; i <= limit - 2; i++) {
        y = parseFloat(vpyactualn[i]);
        // y = ypaso.toFixed(0);
        xpaso = vpyactualf[i];
        xpaso1 = xpaso.substring(0, 4);
        xpaso2 = xpaso.substring(4, 6);
        xpaso3 = xpaso.substring(6, 8);
        xpasoc = xpaso1.concat(xpaso2, xpaso3);
        dateTimex = new Date(xpaso1, xpaso2 - 1, xpaso3);

        dataPoints.push({
          x: dateTimex,
          y: y
        });
      }

      dataSeries.dataPoints = dataPoints;
     ...