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.
