CODEWITHSUNDEEP
javascriptc#htmlchartsgoogle-visualization
user2307236
user2307236

Reputation: 755

Google Pie Chart not displaying in browser

I'm trying to invoke drawChart function from an external javascript file. When I compile nothing is shown in screen. I cannot identify the issue since no errors are given during debugging.

Does this for loop in the js function have access to the variables of the object. I think that the error lies somewhere there. I posted the full codefor clarification.

for (var i = 0; i < dataValues.length; i++) {
    data.addRow([dataValues[i].name, dataValues[i].number]);
}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">google.load("visualization", "1", { packages: ["corechart"] }); </script>
  <script type="text/javascript" src="Test.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript" src="Test.js"></script>
        <input type="button" onclick="drawChart('<%=getJsonObj()%>')" value="Draw Pie Chart" />
        <div id="piechart" style="width: 900px; height: 500px;"></div>
    </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;

public partial class _Default : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    public string getJsonObj()
    {
        List<Item> data = new List<Item>();
        data.Add(new Item("AAA", 10));
        data.Add(new Item("BBB", 20));
        data.Add(new Item("CCC", 30));

        JavaScriptSerializer jss = new JavaScriptSerializer();
        string json = jss.Serialize(data);
        return json;
    }
}

public class Item
{
    public string name = "";
    public int number = 0;

    public Item(string iName, int iNumber)
    {
        name = iName;
        number = iNumber;
    }
}

Test.js

function drawChart(jsonObj) {

    var dataValues = eval(jsonObj);
    var data = new google.visualization.DataTable(dataValues);
    data.addColumn('string', 'NAME');
    data.addColumn('number', 'NUMBER');

    for (var i = 0; i < dataValues.length; i++) {
        data.addRow([dataValues[i].name, dataValues[i].number]);
    }

    var options = { 'title': 'Pie Chart Example' };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
}

Can somebody test this code and identify any issues. Thanks

Upvotes: 0

Views: 1182

Answers (2)

Steve Wellens
Steve Wellens

Reputation: 20620

This line is incorrect

<input type="button" onclick="drawChart('<%=getJsonObj()%>')" value="Draw Pie Chart" />

Look at the rendered source, you'll see that there are a boat load of double quotes from the JavaScriptSerializer.

Change it to this:

<input type="button" onclick='drawChart( <%= getJsonObj() %> )' value="Draw Pie Chart" />

Then all the double quotes will be nested inside the two single quotes

Upvotes: 1

javapadawan
javapadawan

Reputation: 907

I think you forgot the callback, something like this.

<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
</script>

Upvotes: 0

Related Questions