Develop Reference

Passing values to Javascript from code behind asp.net using Webmethod

I'm trying to add values queried from a DB into a google charts bar chart. After googling around, I tried by making a web method.
First I made a class:
public class ChartDetails
{
public string value_type { get; set; }
public float threshold { get; set; }
}
Then the web method (not connected to DB yet)
[WebMethod]
public static List<ChartDetails> GetChartData()
{
List<ChartDetails> dataList = new List<ChartDetails>();
ChartDetails c1 = new ChartDetails();
c1.threshold = 56;
c1.value_type = "Observed";
ChartDetails c2 = new ChartDetails();
c2.threshold = 33;
c2.value_type = "Forecast";
dataList.Add(c1);
dataList.Add(c2);
return dataList;
}
My script is added in the same form tag as the div with id="chartdiv":
script type="text/javascript">
$(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'Page.aspx/GetChartData',
data: '{}',
success: function (response) {
drawchart(response.d); // calling method
},
error: function () {
alert("Error loading data! Please try again.");
}
});
})
function drawchart(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Type of value');
data.addColumn('float', 'Value');
for (var i = 0; i < dataValues.length; i++)
{
data.addRow([dataValues[i].value_type, dataValues[i].threshold] );
}
var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'));
chart.draw(data,
{
title: "Show Google Chart in Asp.net",
position: "top",
fontsize: "14px",
chartArea: { width: '50%' },
});
}
</script>
When I run the page it doesn't even load it. As if the web method is not called at all. Clearly I'm missing something that I can't identify. I've also seen solutions of this type so I'll be trying that next. But it would be nice to figure out why this isn't working out yet.

generate Google Chart using JSON

I am working on a web application which retrieves JSON data from servlet and uses it to generate chart. I am successful in retrieving the requisite json file in Google Chart compliant JSON format but am unable to generate the chart.
The jsbin of google chart is in the foll link: http://jsbin.com/hofaqidape/1/watch?html,js,output
The data var should be generated using JSON and I am doing the following stuff in my servlet
response.setContentType("application/json");
String json;
newClass s =new newClass();
List<newClass> classes = new ArrayList<newClass>();
s.setCount(1);
s.setName("Name");
classes.add(s);
s =new newClass();
s.setCount(2);
s.setName("Name1");
classes.add(s);
s =new newClass();
s.setCount(3);
s.setName("Name2");
classes.add(s);
s =new newClass();
s.setCount(1);
s.setName("Name4");
classes.add(s);
json="{ cols :[ { label : name , type : string },{ label : count , type : number }], rows :[";
String ss;int y;
for(newClass class1:classes)
{
ss=class1.getName();
y=class1.getCount();
json+="{ c : [{ v : "+ss+" },{ v : "+y+"}]},";
}
json=json.substring(0, json.length()-1);
json+="]}";
JSONObject js=null;
try {
js = new JSONObject(json);
} catch (ParseException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
try {
out.print(js);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
on the html side I have the foll code for my chart generation:
$(document).ready(function(){
$.ajax({
url : "Serv",
dataType: 'json',
contentType: 'application/json',
success : function(result) {
var dat=result;
alert(JSON.stringify(dat));
google.load('visualization', '1', {
packages: ['corechart', 'bar']
});
google.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable(dat);
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Name'
},
vAxis: {
title: 'Count'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
},
complete: function()
{
alert('done');
}
});
});
alert(JSON.stringify(dat)) gives the alert as
{"cols":[{"label":"name","type":"string"},{"label":"count","type":"number"}],"rows":[{"c":[{"v":"Name"},{"v":1}]},{"c":[{"v":"Name1"},{"v":2}]},{"c":[{"v":"Name2"},{"v":3}]},{"c":[{"v":"Name4"},{"v":1}]}]}
which is a valid JSON.
how do I generate the chart using this data just like I did in jsbin?

google.setOnLoadCallback() set up a callback function to execute when Google Visualization API loaded, so google.load needs to load from the front explicitly. I am recalling it when i worked on them lately. My recommendation would be to move google.load and drawBasic() outside from AJAX call and use them in success of call, like this...
$(document).ready(function(){
google.load('visualization', '1', {
packages: ['corechart']
});
function drawBasic(d) {
var data = new google.visualization.DataTable(d);
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Name'
},
vAxis: {
title: 'Count'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
$.ajax({
url : "Serv",
dataType: 'json',
contentType: 'application/json',
success : function(result) {
google.setOnLoadCallback(drawBasic(JSON.stringify(result)));
},
complete: function(){
// whatever..
}
});
});
Update: You only need to specify packages: ['corechart'] which will define most basic charts, including the pie, bar, and column charts.

finally got the answer to this question.
removed google.setOnLoadCallback() and called drawBasic() function from ajax call itself. somehow setOnLoadCallback() and $(document).ready() doesnt seem to coexist.
working code:
<script>
google.load('visualization', '1', {
packages: ['corechart']
});
function drawBasic(d) {
var data = new google.visualization.DataTable(d);
var options = {
title: 'Sample Data',
hAxis: {
title: 'Name'
},
vAxis: {
title: 'Count'
},
width: 600,
height: 240
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
$(function(){
$("#dd").change(function(){
if($(this).val()!='null')
{
$.ajax({
url : "Serv",
data: {dd1:$(this).val()},
dataType: 'json',
contentType: 'application/json',
success : function(result) {
drawBasic(result);
},
complete: function(){
// whatever..
}
}) ;
}
else
{
$("#chart_div").empty();
alert('please select');
}
});
});
</script>

Issue Deploying Google Charts

I am in the process of deploying a set of Google Charts into SharePoint 2013. I am running into this issue where it isn't loading my data. I have tested it out in just a standard application page and it works perfectly. I will show my code below:
<script type="text/javascript">
//approver chart
var chartDataApprover; // globarlvariable to hold chart data
google.load("visualization", "1", { packages: ["corechart"] });
$(document).ready(function () {
$.ajax({
url: "Chart_Application_Page.aspx/GetChartDataApprover",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function (data) {
chartDataApprover = data.d;
},
error: function () {
alert("Error loading data! Please try again.");
}
}).done(function () {
//after data is loaded
google.setOnLoadCallback(drawChartApprover);
drawChartApprover();
});
});
</script>
//approver function
function drawChartApprover() {
var data = google.visualization.arrayToDataTable(chartDataApprover);
//groups chart data by name
var resultApprover = google.visualization.data.group(data, [0], [{ 'column': 1, 'aggregation': google.visualization.data.sum, 'type': 'number' }]);
var options = {
title: "Approver Spending",
pointSize: 5
};
var pieChartApprover = new google.visualization.PieChart(document.getElementById('chart_div_approver'));
pieChartApprover.draw(resultApprover, options);
}
I believe my error is coming on the line where I am setting the content type. I am deploying this into SharePoint 2013 via an Application Page... with code behind in C#.
Can anyone help me out with this issue?

how to use google chart using dynamic data from json

iam using mvc, i want to connect my data to google pie chart. so i used json to get list of names and their count using the following code
public JsonResult list()
{
var result= list.GroupBy(i => i.Name).Select(i => new { word = i.Key, count = i.Count()
return Json(result.ToList(), JsonRequestBehavior.AllowGet);
}
Using the google chart API
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "list",
dataType: "json",
async: false
}).responseText;
var data = google.visualization.DataTable(jsonData);
var options = {
title: 'Certificate details',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
i want to know how to get list of key value pairs of my data into pie chart.
i have googled for long time, everybody is giving code example with php.
Thankyou.

You can parse that data client-side like this:
function drawChart () {
$.ajax({
url: "list",
dataType: "json",
success: function (jsonData) {
var data = new google.visualization.DataTable();
// assumes "word" is a string and "count" is a number
data.addColumn('string', 'word');
data.addColumn('number', 'count');
for (var i = 0; i < jsonData.length; i++) {
data.addRow([jsonData[i].word, jsonData[i].count]);
}
var options = {
title: 'Certificate details',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
});
}

I created a basic handler to provide some methods to work with dinamic google charts.
First you register the data or part of it. After this, you are able to render when necessary.
Look at: http://github.com/ahlechandre/chart-handler

Json to pie chart conversion error

I was trying to implement dynamic google pie chart.But while doing so it is connecting to the database via json call but I cannot implement a piechat ,.hence i am not able to get the value for the pie chart.
My Json data which i want to is as follows:-
function getHealthReport()
{
var dataString = {auth_token: sessionStorage.auth_token,};
var mh_url = MH_HOST + '/reports/get_health_issues_report.json';
$.ajax(
{
type: "POST",
url: mh_url,
data: dataString,
dataType: "json",
success: function (data)
{/*
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart); <----- here i am getting piechart via hardcoding
function drawChart(){
var data = google.visualization.arrayToDataTable([
['Task','Hours per Day'],
['Work',11],
['Eat',2],
['Commute',2]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('outer_tableDiv'));
chart.draw(data, options);}
*/
},
error: function (data)
{
alert("fail");
}
});
}
can anyone please help.