I want to get data from DB to plot the chart but not working, please help
35 views
Skip to first unread message
Cyprosoft
Jun 11, 2018, 10:27:07 AM6/11/18
to Google Visualization API
Below is my html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.aspx/getdata",
dataType: "html",
async: true
}).responseText;
alert(jsonData);
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, { width: 400, height: 240 });
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
<head runat="server">
<title></title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.aspx/getdata",
dataType: "html",
async: true
}).responseText;
alert(jsonData);
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, { width: 400, height: 240 });
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
Below is the getdata code am calling
[WebMethod()]
[System.Web.Script.Services.ScriptMethod()]
public static string getdata() {
JJSG genTool1 = JJSGTool.SetTool;
DataSet ds = genTool1.DataSetData("select regionID,region from static_region");
string result = genTool1.SerializeObj2String(ds.Tables[0]);
try {
return result;
}
catch (Exception ex) {
Panel pnl = new Panel();
MessageBox.Show(pnl, ex.Message);
return result;
}
}
[System.Web.Script.Services.ScriptMethod()]
public static string getdata() {
JJSG genTool1 = JJSGTool.SetTool;
DataSet ds = genTool1.DataSetData("select regionID,region from static_region");
string result = genTool1.SerializeObj2String(ds.Tables[0]);
try {
return result;
}
catch (Exception ex) {
Panel pnl = new Panel();
MessageBox.Show(pnl, ex.Message);
return result;
}
}
It is alerting undefinded.
I used this code on something else with jquery and it works fine , I dont know why it is not working.
Please assist me.
Thank
Cyprosoft
Jun 15, 2018, 10:59:38 AM6/15/18
to Google Visualization API
I have got no help from the forum?
Reply all
Reply to author
Forward
0 new messages