The Google Visualization API lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. Google Visualization API enables you to expose your own data, stored on any data-store that is connected to the web, as a Visualization compliant datasource. Thus you can create reports and dashboards as well as analyze and display your data through the wealth of available visualization applications. The Google Visualization API also provides a platform that can be used to create, share and reuse visualizations written by the developer community at large.
Steps to use in ASP.NET
Step1 : Add javascript libraries on head section
Step2: Now make json function
<script type="text/javascript" language="javascript">
google.load('visualization', '1', {'packages': ['columnchart']});
function PageViews(response)
{
if(response == null)
{
var days = 10;
var request = "{'NoOfDays':"+ days +"}";
GetData("Default.aspx/GetDailyVisits",request,PageViews);
}
else
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Page Views');
data.addRows(response.d.length);
for (var i = 0; i < response.d.length; i++) {
data.setValue(i, 0, response.d[i].Date);
data.setValue(i, 1, response.d[i].Visits);
}
var container = document.getElementById('spnChart');
container.innerHTML = "";
var chart = new google.visualization.ColumnChart(container);
chart.draw(data, {width: 800, height: 300, is3D: true, title: 'Page Views', legend:'none', titleX:'Date', titleY:'Page Views'});
}
}
function GetData(func,arg,SFunc) {
$.ajax({
type: "POST",
url: func,
data: arg,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: SFunc
});
}
</script>
Step3: Now in code behind, make static webmethod function to return list
[WebMethod]
public static List<DateNVisits> GetDailyVisits(int NoOfDays)
{
List<DateNVisits> ts = new List<DateNVisits>();
for (int i = 0; i < NoOfDays; i++)
{
ts.Add(new DateNVisits(DateTime.Now.AddDays(i).ToShortDateString(),i));
}
return ts;
}
public class DateNVisits
{
public DateNVisits()
{
}
public DateNVisits(string d, int v)
{
Date = d;
Visits = v;
}
public string Date
{
get;
set;
}
public int Visits
{
get;
set;
}
}
Thats all
Download: Download
Geoff Campbell
April 19, 2012 at 12:37 pm
Doesn’t appear that the download link is active?
admin
April 20, 2012 at 3:58 am
Thanks Geooff, Link updated now.