You don't have the $('#Button1') call wrapped in the callback handler:
function drawVisualization(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Column Date');
data.addColumn('number', 'Column Value');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].Date, dataValues[i].Value]);
}
new
google.visualization.LineChart(document.getElementById('visualization')).
draw(data, { title: "" });
}
function init () {
$('#Button1').click(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'Default.aspx/GetData',
data: "{name:'" + $("#SearchText").val() + "'}",
success:
function (response) {
drawVisualization(response.d);
}
});
return false;
});
}
google.load('visualization', '1', {packages: ['corechart'], callback:
init});
Without the callback handler or a document "ready" event handler, "Button1"
doesn't exist yet on the page when the javascript is executed, so the
"click" handler never gets registered on the button. Since you want to
wait for the Visualization API to load, you should use the google.load
callback instead of document ready.
On Tuesday, November 5, 2013 11:56:01 AM UTC-5, Missy wrote:
>
>
> Dear asgallant,
>
> Thank you so much for your response. I really appreciate your help. I
> can not seem to get the following code below output visual chart on the
> client-side.
> I have updated the code a little bit from my previous post, hence I am
> posting it below. I have submitted the webpage's html source page in the
> above post as request.
>
> default.aspx
> <%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master"
> AutoEventWireup="true" CodeFile="About.aspx.cs" Inherits="About" %>
>
> <asp:Content runat="server" ID="BodyContent"
> ContentPlaceHolderID="MainContent">
>
> <script src="//
> ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
> type="text/javascript"></script>
> <script type="text/javascript" src="//www.google.com/jsapi"></script>
> <script type="text/javascript">
> google.load('visualization', '1', { packages: ['corechart'] });
> </script>
> <script type="text/javascript">
>
> $('#Button1').click(function () {
> $.ajax({
> type: 'POST',
> dataType: 'json',
> contentType: 'application/json',
> url: 'Default.aspx/GetData',
> data: "{name:'" + $("#SearchText").val() + "'}",
> success:
> function (response) {
> drawVisualization(response.d);
> }
>
> });
> return false;
>
> })
>
> function drawVisualization(dataValues) {
> var data = new google.visualization.DataTable();
> data.addColumn('string', 'Column Date');
> data.addColumn('number', 'Column Value');
>
> for (var i = 0; i < dataValues.length; i++) {
> data.addRow([dataValues[i].Date, dataValues[i].Value]);
> }
>
> new
> google.visualization.LineChart(document.getElementById('visualization')).
> draw(data, { title: "" });
> }
>
>
> </script>
>
> <asp:Label ID="Label1" runat="server" Text="Name/Ids"></asp:Label>
> <asp:TextBox ID="SearchText" runat="server"
> ClientIDMode="Static"></asp:TextBox>
> <asp:Button ID="Button1" runat="server" Text="Search"
> onclick="Button1_Click" ClientIDMode="Static" />
>
> <div id="visualization" style="width: 600px; height: 400px;"
> ClientIDMode="Static" ></div>
>
>
>
> </asp:Content>
>
> *default.cs*
> using System;
> using System.Collections;
> using System.Configuration;
> using System.Data;
> using System.Linq;
> using System.Web;
> using System.Web.Security;
> using System.Web.UI;
> using System.Data.SqlClient;
> using System.Text;
> using System.Collections.Generic;
> using System.Web.Services;
>
>
> public partial class About : System.Web.UI.Page
> {
>
> protected void Page_Load(object sender, EventArgs e)
> {
>
> }
>
> [WebMethod]
> public static List<Data> GetData(string name)
> {
> List<Data> dataList = new List<Data>();
>
> dataList.Add(new Data("CLAVS 2007-1 M2A", 77, "Oct"));
> dataList.Add(new Data("CLAVS 2007-1 M2A", 0, "Oct"));
> dataList.Add(new Data("CLAVS 2007-1 M2A", 78, "Oct"));
> dataList.Add(new Data("CLAVS 2007-1 M2A", 82, "Oct"));
> dataList.Add(new Data("CLAVS 2007-1 M2A", 425, "Oct"));
> dataList.Add(new Data("CLAVS 2007-1 M2A", 79, "Oct"));
> dataList.Add(new Data("CLAVS 2007-1 M2A", 80, "Oct"));
> dataList.Add(new Data("CLAVS 2007-1 M2A", 57, "Oct"));
> dataList.Add(new Data("CLAVS 2007-1 M2A", 77, "Oct"));
> dataList.Add(new Data("ACCDO 11A B", 2, "Sept"));
> dataList.Add(new Data("ACCDO 11A B", 2, "Sept"));
> dataList.Add(new Data("AELIS 2013-IRAR C", 96.89, "Sept"));
> dataList.Add(new Data("AELIS 2013-IRAR C", 95, "Sept"));
> dataList.Add(new Data("AELIS 2013-IRAR C", 95, "Sept"));
> dataList.Add(new Data("AELIS 2013-IRAR C", 96, "Oct"));
> dataList.Add(new Data("AELIS 2013-IRAR C", 97, "Sept"));
> dataList.Add(new Data("AELIS 2013-IRAR C", 95, "Oct"));
> dataList.Add(new Data("AELIS 2013-IRAR C", 85, "Sept"));
>
> //return dataList.FindAll(r => r.ColumnName.Contains(name));
> return dataList.FindAll(r => r.ColumnName.IndexOf(name,
> StringComparison.CurrentCultureIgnoreCase) != -1);
>
>
>
> //return dataList;
> }
>
> protected void Button1_Click(object sender, EventArgs e)
> {
>
> }
> }
>
> Thank you so much for your guidence and time into this problem.
> Many thanks
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
