Google Visualization API

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

2 thoughts on “Google Visualization API

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>