Click here to Skip to main content
15,746,534 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I trying to pass the following the web method below, through json format to a javascript function, but I am currently getting a blank page on the client-side.
protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            JavaScriptSerializer jss = new JavaScriptSerializer();
            ClientScript.RegisterStartupScript(this.GetType(), "TestInitPageScript",   
           string.Format("<script type=\"text/javascript\">google.load('visualization','1.0',{{'packages':['corechart','controls']}});google.setOnLoadCallback(function(){{drawVisualization({0},'{1}','{2}');}});</script>",
        "Name Example",


    public static List<Data3> GetData()
        SqlConnection conn = new SqlConnection("##############");
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        var yesterday = DateTime.Today.AddDays(-1);
        string cmdstr = "SELECT [Type], Cover, COUNT(Cover)  AS 'Total' FROM [dbo].[database_data] WHERE [Type] in ('rm','ab', 'cm', 'cl', 'cd') and  UploadDate between '2014-03-01' and '2014-06-20' GROUP BY Cover, [Type] order by Cover";
        SqlCommand cmd = new SqlCommand(cmdstr, conn);
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        dt = ds.Tables[0];
        List<Data3> dataList = new List<Data3>();
        string cov = "";
        string typ = "";
        int val = 0;

        foreach (DataRow dr in dt.Rows)
                cov = dr[0].ToString();

                typ = dr[1].ToString();

                val = Convert.ToInt32(dr[2]);
            dataList.Add(new Data3(cov, typ, val));
        return dataList;

<head runat="server">
<script src="//" type="text/javascript"> </script>
<script type="text/javascript" src="//"></script>
    <script type="text/javascript">
        function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
            if (dataValues.length < 1)

            var data = new google.visualization.DataTable();
            data.addColumn('string', columnNames.split(',')[0]);
            data.addColumn('string', columnNames.split(',')[1]);
            data.addColumn('number', columnNames.split(',')[2]);

            for (var i = 0; i < dataValues.length; i++) {

                data.addRow([dataValues[i].Type, dataValues[i].COVER, dataValues[i].COUNT]);

            var line = new google.visualization.ChartWrapper({
                'chartType': 'PieChart',
                'containerId': 'chart1',
                'options': {
                    'width': 1200,
                    'height': 500,
                    'legend': 'none',

                    'view': { 'columns': [0, 2] }

            var table = new google.visualization.ChartWrapper({
                'chartType': 'Table',
                'containerId': 'chart2',
                'options': { 'height': '25em', 'width': '80em' }

            var categoryPicker = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'Contorl1',
                'options': {
                    'filterColumnLabel': columnNames.split(',')[1],
                    'filterColumnIndex': '1',

                    'ui': {

                        'label': 'Price',


            new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker], [line, table]).draw(data);



         <div id="PieChartExample">
                <tr style='vertical-align: top'>

                    <td >
                        <div style="float: left;" id="chart1"></div>


                    <td >
                        <div style="float: left;" id="chart2"></div>


                    <td style='width: 600px'>

                           <div style="float: left;" id="control2"></div>



I am little unsure, where the problem is arising (i.e. if its a syntax error in the sql query or something else).

I would also, like to ask, while debugging this method, what parameters i should be looking out for. I have checked, while debugging this that the [dr] array variable is getting data through.

Please advice.

Many thanks
Updated 23-Jun-14 5:00am
Jafarinejadvazifehkhorani 23-Jun-14 10:40am    
please provide your 'drawVisualization' method implementation to make it clearer.
miss786 23-Jun-14 11:01am    
Hi thank you for your reply. I have updated my question with the relevant information requested. Please advice, further. Many thanks.

Try adding these two at the top of your view.
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

Make sure you have these js files in your Scripts folder. Download them here [^]
Share this answer
as the required json format for data table of google chart is different from the one generated from Json serilizer , you need to convert the response to the following format is different from the ordinary one

  "cols": [
  "rows": [

so there is a library in order to convert the list and tables to the understandable format for google chart data table[^][^][^]

Hope it helps
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900