Google API chart in ASP.NET MVC

Question

I am using google apis to create a simplechart

    [AllowAnonymous]
    public JsonResult PieChart()
    {
      return Json("[[\"State\",\"Total\"],[\"GA\",50], [\"AL\",30]]",JsonRequestBehavior.AllowGet);
    }

I am calling this method via ajax from my View. Below is my View

@{
    ViewBag.Title = "Visuals";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Visuals</h2>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

          var jsonData = $.ajax({
                type: 'GET',
                url: '@Url.Action("PieChart","Home")',
                dataType: "json",
                async: false
           }).responseText;

        var data = google.visualization.arrayToDataTable(jsonData, false);
        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart($('#piechart_3d')[0]);
        chart.draw(data, options);
      }

</script>

However I am getting a javascript error on this line saying not an array

var data = google.visualization.arrayToDataTable(jsonData, false);

I have also tried with JSON.Parse but with no success. Thanks for any help.

Put a breakpoint and look what value the jsonData variable has. Also if it is a string, try to use JSON.parse(jsonData) — vortexwolf
– vortexwolf, Commented Mar 20, 2014 at 14:19
when I add a watch to JSON.Parse(jsonData) I get "[["State","Total"],["GA",50], ["AL",30]]" and I still get the same error. — desiguy
– desiguy, Commented Mar 20, 2014 at 14:37

hutchonoid · Accepted Answer · 2014-03-20 14:28:11Z

2

I would try setting the contentType and handling the result in a success handler instead as follows:

      $.ajax({
            type: 'GET',
            url: '@Url.Action("PieChart","Home")',
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            async: false,
            success: function(result) {
                  jsonData = result;
           }
       });

The data you are returning looks ok to me as I tried this:

http://jsfiddle.net/Qquse/547/

answered Mar 20, 2014 at 14:28

hutchonoid

33.4k15 gold badges102 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PotatoJam · Accepted Answer · 2014-06-04 08:51:16Z

1

Unfortunately hutchonoid's answer didn't completely work for me. I had to change the array code to:

object[][] arr = new object[][] { new object[] { "Trickle", "Count" }, new object[] { "Ga", 50 }, new object[] { "Ga", 50 } };

answered Jun 4, 2014 at 8:51

PotatoJam

3181 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

Google API chart in ASP.NET MVC

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related