This probably isn't the source of your problem, but you have an extra pair
of brackets in the google loader's callback:
function(){{drawVisualization({0},'{1}','{2}');}}
If you open the page and view the page source, is your data output in the
drawVisualization call?
On Tuesday, July 15, 2014 10:37:08 AM UTC-4, ma wrote:
>
> Dear all,
>
> I am little unsure why I am unable to render charts on the client-side,
> instead its showing blank page. I am calling data dynamically from the
> database through a JSON string in .net c#. I have debugged my code and the
> data is returned to the array on the server side code but its not passing
> through the javascript.
>
> I do not have vast knowledge in java script, hence If I am missing
> something in the code, please do let me know. I am little unsure why I am
> unable to render charts on the web page. Please help, if possible.
>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head runat="server">
> <title></title>
> <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">
> function drawVisualization(dataValues, chartTitle, columnNames,
> categoryCaption) {
> if (dataValues.length < 1)
> return;
>
> var data = new google.visualization.DataTable();
> data.addColumn('string', columnNames.split(',')[0]);
> data.addColumn('string', columnNames.split(',')[1]);
> data.addColumn('number', columnNames.split(',')[2]);
>
> for (var i = 0; i < dataValues.length; i++) {
>
> data.addRow([dataValues[i].Type, dataValues[i].COVER,
> dataValues[i].COUNT]);
> }
>
> var line = new google.visualization.ChartWrapper({
> 'chartType': 'ColumnChart',
> 'containerId': 'chart1',
> 'options': {
> 'width': '1200',
> 'height': '500',
> 'legend': 'none',
> },
>
> 'view': { 'columns': [0, 2] }
> });
>
> var table = new google.visualization.ChartWrapper({
> 'chartType': 'Table',
> 'containerId': 'chart2',
> 'options': { 'height': '25em', 'width': '80em' }
> });
>
> var categoryPicker = new google.visualization.ControlWrapper({
> 'controlType': 'CategoryFilter',
> 'containerId': 'Contorl1',
> 'options': {
> 'filterColumnLabel': columnNames.split(',')[1],
> 'filterColumnIndex': '1',
>
> 'ui': {
>
> 'label': 'Price',
> }
> },
>
> });
>
> new
> google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker],
>
> [line, table]).draw(data);
>
> }
>
> </script>
> </head>
> <body>
>
> <div id="PieChartExample">
> <table>
> <tr style='vertical-align: top'>
>
> <td >
> <div style="float: left;" id="chart1"></div>
>
> </td>
>
> </tr>
> <tr>
> <td >
> <div style="float: left;" id="chart2"></div>
>
> </td>
>
> </tr>
> <tr>
> <td style='width: 600px'>
>
> <div style="float: left;" id="control2"></div>
> </td>
>
> </tr>
>
> </table>
> </div>
>
>
> </body>
> </html>
>
> *server-side code:*
>
>
> protected void Page_Load(object sender, EventArgs e)
> {
> if (!IsPostBack)
> {
>
> JavaScriptSerializer jss = new JavaScriptSerializer();
> ClientScript.RegisterStartupScript(this.GetType(),
> "TestInitPageScript",
>
> string.Format("<script
> type=\"text/javascript\">google.load('visualization','1.0',{{'packages':['corechart','controls']}});google.setOnLoadCallback(function(){{drawVisualization({0},'{1}','{2}');}});</script>",
> jss.Serialize(GetData()),
> "Name Example",
> "Type,"));
>
> }
> }
>
> [WebMethod]
> public static List<Data3> GetData()
> {
> SqlConnection conn = new SqlConnection("##############");
> DataSet ds = new DataSet();
> DataTable dt = new DataTable();
> conn.Open();
> string cmdstr = "SELECT [Type], Cover, COUNT(Cover) AS 'Total'
> FROM [dbo].[database_qy] WHERE [Type] in ('bs','as') and UploadDate
> between '2014-03-01' and '2014-06-20' GROUP BY Cover, [Type] order by
> Cover";
> SqlCommand cmd = new SqlCommand(cmdstr, conn);
> SqlDataAdapter adp = new SqlDataAdapter(cmd);
> adp.Fill(ds);
> dt = ds.Tables[0];
> List<Data3> dataList = new List<Data3>();
> string cov = "";
> string typ = "";
> int val = 0;
>
> foreach (DataRow dr in dt.Rows)
> {
> try
> {
> cov = dr[0].ToString();
>
> typ = dr[1].ToString();
>
> val = Convert.ToInt32(dr[2]);
> }
> catch
> {
> }
> dataList.Add(new Data3(cov, typ, val));
> }
> return dataList;
> }
>
> 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/d/optout.
