Save user defined input text to use as JS variable with asp.net.

I am wanting to know why my text input is not setting as a JS variable. it seems to clear out every time the button is pressed and it does not reassign the variable to a new value whereas my textbox keeps the input just fine. i may be beating my head against the wall with this or im not seeing something obvious. I am not so new to web programming however this basic fundamental task of getting and setting a value from a textbox in asp has been driving me nuts. I am looking for some insight on where i might be going wrong about setting the user defined input as a variable. This is part of an open source project I started and am working on to help me gain a bigger insight into programming for the web.

Here is my JS:

var script = document.createElement('script');
script.src = '/jquery-2.1.1.js';
script.type = 'text/javascript';

google.load('visualization', '1.0', { 'packages': ['corechart'] });
google.setOnLoadCallback(function () {
    var newdata = new google.visualization.DataTable();
    var graphtype;
    var titleChk;
    var widthChk;
    var heightChk;
    var sqldatachart1;

    newdata.addColumn('string', 'date');
    //TODO: make graph data editable ie top sales
    newdata.addColumn('number', 'top sales');
    if (boxarray !== null) {
        var titleChk = document.getElementById("xtitle").value;
        var widthChk = document.getElementById("xwidth").value;
        var heightChk = document.getElementById("xheight").value;
        console.log(titleChk, widthChk, heightChk);
        console.log($('#ContentPlaceHolder1_graphselector').val());
        newdata.addRows(boxarray);
        /*==========================================\
          TODO: make options user defined variables
          TODO: bind user defined vairable from forms
        \==========================================*/

        var options = {
            'title': titleChk || "",
            'width': widthChk || 400,
            'height': heightChk || 400
        };

        $('#ContentPlaceHolder1_graphselector').change(function () {
            graphtype = $(this).val();
            if (graphtype == "ColumnChart") { sqldatachart1 = new google.visualization.ColumnChart(document.getElementById('grid')); }
            if (graphtype == "BarChart") { sqldatachart1 = new google.visualization.BarChart(document.getElementById('grid')); }
            if (graphtype == "LineChart") { sqldatachart1 = new google.visualization.LineChart(document.getElementById('grid')); }
            if (graphtype == "AreaChart") { sqldatachart1 = new google.visualization.AreaChart(document.getElementById('grid')); }
            if (graphtype == "PieChart") { sqldatachart1 = new google.visualization.PieChart(document.getElementById('grid')); }
             console.log($('#ContentPlaceHolder1_graphselector').val());
            //TODO: make ChartType a working variable 
            sqldatachart1.draw(newdata, options);
        });
    }
});

Here is my ASP:

<%@ Page Title="" Language="C#" MasterPageFile="~/rmg.Master" AutoEventWireup="true" CodeBehind="metrix.aspx.cs" Inherits="metric_generator.WebForm1" %>

<%@ Import Namespace="System.Data" %>
<%--Metrix RMG: (R)apid (M)etrics (G)enerator Version 1.0
        Written and Coded by Adam Szablya
        Project Started on:11/15/2014

        Licencing Information:
        Metrix RMG Version 1.0 is freely useable and re-distributable
        under the GNU General Public Licence version 3.
--%>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="js/GUIctl.js"></script>
    <script type="text/jquery" src="js/jquery-2.1.1.js"></script>
    <script type="text/javascript">
        /*======================================================\
         Javascript graph generator:
         Itterare over the rows in the table using code behind
         formatting should be done exclusivly in SQL.
        \======================================================*/

        var boxarray = [
                    <%
        if (this.ds != null)
        {
            foreach (DataRow row in this.ds.Tables[0].Rows)
            {
                Response.Write("[\"");
                Response.Write(((DateTime)row.ItemArray[1]).ToString("yyyy-MM-dd"));
                Response.Write("\",");
                Response.Write(row.ItemArray[0]);
                Response.Write("],\r\n");
            }
        }
        %>
        ];
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!--------------------------- 
    HTML / GUI starts here  
----------------------------->

    <!--Div that will hold the charts-->
    <div id="grid" style="width: auto; height: auto"></div>
    <br />
    <asp:DropDownList ID="graphselector" runat="server" CssClass="dropdown"
        Style="font-size: 11px" AutoPostBack="False">
        <asp:ListItem Selected="True" Value="ColumnChart">Column Chart</asp:ListItem>
        <asp:ListItem Value="BarChart">Bar Chart</asp:ListItem>
        <asp:ListItem Value="LineChart">Line Chart</asp:ListItem>
        <asp:ListItem Value="AreaChart">Area Chart</asp:ListItem>
        <asp:ListItem Value="PieChart">Pie Chart</asp:ListItem>
    </asp:DropDownList>
    <!--data selection tick boxes and button -->
    <div id="selectionID" class="selection">
        <textarea rows="10" cols="90" id="sqlbox" runat="server">"Raw SQL query here"</textarea>
        <br />
        Title:<input type="text" name="title" id="xtitle" />
        Width:<input type="text" name="width" id="xwidth" />
        Height:<input type="text" name="height" id="xheight" />
        <asp:Button ID="DataSelectButton" runat="server" Text="update query" OnClick="btn1_Click" class="button"></asp:Button>
    </div>
</asp:Content>