Redirect to another page on Google Line Chart Click using jQuery in ASP.Net

Hi sofia,

Check this example. Now please take its reference and correct your code.

HTML

Default

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        MakeAjaxCall("192.168.15.167", $("#chart1")[0])
    }

    function MakeAjaxCall(ipAddress, dvElement) {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetChartData",
            data: '{ipAddress:"' + ipAddress + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (r) {
                var data = new google.visualization.DataTable();
                data.addColumn('date', 'pingtime');
                data.addColumn('number', 'average');
                for (var i = 0; i < r.d.length; i++) {
                    data.addRow([new Date(parseInt(r.d[i][0].substr(6))), parseInt(r.d[i][1])]);
                }

                var maxValue = Math.max.apply(Math, r.d.map(function (x) { return x[1]; }));
                var tick = [];
                for (var i = 0; i <= (maxValue / 25) + 1; i++) {
                    tick.push(i * 25);
                }

                var chart = new google.visualization.LineChart(dvElement);
                var options = {
                    title: 'ipaddress : ' + ipAddress,
                    width: 700,
                    height: 400,
                    bar: { groupWidth: "95%" },
                    legend: { position: "none" },
                    isStacked: true,
                    vAxis: {
                        viewWindow: {
                            min: 0,
                            max: maxValue
                        },
                        ticks: tick
                    },
                };

                google.visualization.events.addListener(chart, 'select', function () {
                    window.location.href = 'Detail.aspx';
                });
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.responsetext);
            },
            error: function (r) {
                alert(r.responsetext);
            }
        });
    }
</script>
<div class="chart" id="chart1" style="width: 900px; height: 400px;"></div>

Detail

<asp:DropDownList runat="server" ID="ddlTypes" AutoPostBack="true" OnSelectedIndexChanged="OnSelectedIndexChanged">
    <asp:ListItem Text="Select" />
    <asp:ListItem Text="1 Month" Value="1" />
    <asp:ListItem Text="2 Months" Value="2" />
    <asp:ListItem Text="Till 6 Months" Value="3" />
</asp:DropDownList>

Code

Default

protected string Type { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Type = !string.IsNullOrEmpty(HttpContext.Current.Request.QueryString["Type"]) ? HttpContext.Current.Request.QueryString["Type"] : "0";
    }
}

[WebMethod]
public static List<object> GetChartData(string ipAddress)
{
    string query = string.Format("SELECT [pingtime],[average] FROM [dbo].[graph] WHERE ipaddress='{0}' AND CONVERT(DATE,pingtime,103) BETWEEN CONVERT(DATE,DATEADD(DAY, -7, GETDATE()),103) AND CONVERT(DATE,GETDATE(),103) ORDER BY CONVERT(DATETIME,pingtime,103) ASC", ipAddress); ;
    switch (Type)
    {
        case "1":
            query = string.Format("SELECT [pingtime],[average] FROM [dbo].[graph] WHERE ipaddress='{0}' AND CONVERT(DATE,pingtime,103) BETWEEN CONVERT(DATE,DATEADD(MONTH, -1, GETDATE()),103) AND CONVERT(DATE,GETDATE(),103) ORDER BY CONVERT(DATETIME,pingtime,103) ASC", ipAddress);
            break;
        case "2":
            query = string.Format("SELECT [pingtime],[average] FROM [dbo].[graph] WHERE ipaddress='{0}' AND CONVERT(DATE,pingtime,103) BETWEEN CONVERT(DATE,DATEADD(MONTH, -2, GETDATE()),103) AND CONVERT(DATE,GETDATE(),103) ORDER BY CONVERT(DATETIME,pingtime,103) ASC", ipAddress);
            break;
        case "3":
            query = string.Format("SELECT [pingtime],[average] FROM [dbo].[graph] WHERE ipaddress='{0}' AND CONVERT(DATE,pingtime,103) BETWEEN CONVERT(DATE,DATEADD(MONTH, -6, GETDATE()),103) AND CONVERT(DATE,GETDATE(),103) ORDER BY CONVERT(DATETIME,pingtime,103) ASC", ipAddress);
            break;
        default:
            break;
    }
    string constr = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
    List<object> chartData = new List<object>();
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    chartData.Add(new object[] { Convert.ToDateTime(sdr["pingtime"]), sdr["average"] });
                }
            }
            con.Close();

            return chartData;
        }
    }
}

Detail

protected void Page_Load(object sender, EventArgs e)
{
    Response.Redirect("Default.aspx?Type=" + ddlTypes.SelectedValue)
}

Screenshot