javascript - Google Pie Chart not showing in broser -
javascript - Google Pie Chart not showing in broser -
i'm trying populate info table list object , display result in pie chart. reason cannot identify pie chart not showing in browser (blank page). below code. can seek run code , identify error!... since cannot identify i'm wrong.
the default.aspx
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <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(datavalues) { var info = new google.visualization.datatable(); data.addcolumn('string', 'locality'); data.addcolumn('number', 'frequency'); (var = 0; < datavalues.length; i++) { data.addrow(datavalues[i].astring, datavalues[i].anint); } var options = { 'title': 'pie chart test', 'width': 900, 'height': 500 }; var chart = new google.visualization.piechart(document.getelementbyid('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html> code behind
using system; using system.collections.generic; using system.linq; using system.web; using system.web.ui; using system.web.ui.webcontrols; using system.web.script.serialization; public partial class _default : system.web.ui.page { protected void page_load(object sender, eventargs e) { if (!ispostback) { list<items> datalist = new list<items>(); datalist.add(new items("a", 10)); datalist.add(new items("b", 20)); datalist.add(new items("c", 30)); javascriptserializer jss = new javascriptserializer(); clientscript.registerstartupscript(this.gettype(), "test", string.format("<script type=\"text/javascript\">drawvisualization({0});</script>", jss.serialize(datalist))); } } public class items { public string astring = ""; public int anint = 0; public items(string _astring, int _anint) { astring = _astring; anint = _anint; } } } thank you
javascript case sensitive. method names .addcolumn() , .addrow(), using .addcolumn() , .addrow(). check javascript console errors. should find message saying undefined not function.
the .addrow() method takes array argument, passing in 2 scalar values. wrap in square brackets: data.addrow([datavalues[i].astring, datavalues[i].anint]).
you may run issues utilize of registerstartupscript(). startup script may run before visualization bundle has finished loading. instead, embed value in hidden field on page , read value script.
<asp:hiddenfield runat="server" id="chartdata" /> class="lang-cs prettyprint-override">protected void page_load(object sender, eventargs e) { if (!ispostback) { list<items> datalist = new list<items>(); datalist.add(new items("a", 10)); datalist.add(new items("b", 20)); datalist.add(new items("c", 30)); javascriptserializer jss = new javascriptserializer(); this.chartdata.value = jss.serialize(datalist); } } class="lang-js prettyprint-override">function drawchart() { var datavalues = json.parse(document.getelementbyid("<%= chartdata.clientid %>").value); // rest of function written } snippet changes applied:
class="snippet-code-js lang-js prettyprint-override">google.load("visualization", "1", { packages: ["corechart"] }); google.setonloadcallback(drawchart); function drawchart() { var datavalues = json.parse(document.getelementbyid("chartdata").value); var info = new google.visualization.datatable(); data.addcolumn('string', 'locality'); data.addcolumn('number', 'frequency'); (var = 0; < datavalues.length; i++) { data.addrow([datavalues[i].astring, datavalues[i].anint]); } var options = { 'title': 'pie chart test', 'width': 900, 'height': 500 }; var chart = new google.visualization.piechart(document.getelementbyid('piechart')); chart.draw(data, options); } class="snippet-code-html lang-html prettyprint-override"><script type="text/javascript" src="https://www.google.com/jsapi"></script> <input type="hidden" id="chartdata" value="[{"astring":"a","anint":10},{"astring":"b","anint":20},{"astring":"c","anint":30}]" /> <div id="piechart" style="width: 900px; height: 500px;"></div>
javascript c# .net google-visualization
Comments
Post a Comment