WebMethod issue - blank page

Question

0.00/5 (No votes)

See more:

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.

C#

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>",
            jss.Serialize(GetData()),
        "Name Example",
         "Type,"));

        }
    }

    [WebMethod]
    public static List<Data3> GetData()
    {
        SqlConnection conn = new SqlConnection("##############");
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        conn.Open();
        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);
        adp.Fill(ds);
        dt = ds.Tables[0];
        List<Data3> dataList = new List<Data3>();
        string cov = "";
        string typ = "";
        int val = 0;


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

                typ = dr[1].ToString();

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

XML

<head runat="server">
    <title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
        function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
            if (dataValues.length < 1)
                return;

            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);

        }

</script>
</head>
<body>


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

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

                    </td>

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

                    </td>

                </tr>
                  <tr>
                    <td style='width: 600px'>

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

                </tr>

            </table>
        </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

Posted 23-Jun-14 4:00am

miss786

Updated 23-Jun-14 5:00am

v2

Add a Solution

Comments

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.

2 solutions

Solution 2

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": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

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

http://www.agile-code.com/blog/using-the-google-datatable-net-wrapper/[^]

https://www.dropbox.com/s/lds7m75saz6pf5h/Google.Visualization.DataTable.Example.zip[^]

https://developers.google.com/chart/interactive/docs/reference#DataView[^]

Hope it helps

Posted 23-Jun-14 7:39am

Jafarinejadvazifehkhorani

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Bitla Phanindra · Accepted Answer · 2014-06-23T05:50:00

Solution 1

Try adding these two at the top of your view.

XML

<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 [^]

Posted 23-Jun-14 5:50am

Bitla Phanindra

Updated 23-Jun-14 5:53am

v2