CODEWITHSUNDEEP
asp.net-mvc-4amcharts
blacksaibot
blacksaibot

Reputation: 285

amcharts pie chart will not load data

Controller:

public ActionResult GetTaskStatus()
{
    TaskPieChart model = new TaskPieChart();
    return Content(model.getStatus(1), "application/json");
}

Model: All the implementation details contains waaaaaaaaay too much code, but it DOES return a valid JSON string (model.getStatus will end up returning jsonResult) using the following method: 

public string DataTableToJSON(DataTable dt)
{
    string jsonResult = "";

    DataSet dataSet = new DataSet("dataSet");
    dataSet.Namespace = "NetFrameWork";
    dataSet.Tables.Add(dt);
    dataSet.AcceptChanges();

    jsonResult = JsonConvert.SerializeObject(dataSet, Formatting.Indented);

    return jsonResult;
}

JSON file returns data in this format

{
  "project.Tasks_Status": [
    {
      "TaskName": "Task 1",
      "TaskCompleted": 1000.0
    },
    {
      "TaskName": "Task 2",
      "TaskCompleted": 0.0
    },
    ...
  ]
}

View

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>

<div id="chartdiv" style="width: 100%; height: 500px;"></div>
<script>
  var chart = AmCharts.makeChart( "chartdiv", {
    "type": "pie",
    "theme": "light",
    "titleField": "TaskName",
    "valueField": "TaskCompleted",
    "dataLoader": {
        "url": "../Home/GetTaskStatus",
        "format": "json"
    },
  });
</script>

The problem is, once I load my view, VS throws an exception and highlights the above code (within my script tag) with the following error message:

Unhandled exception at line 1, column 5209 in http://www.amcharts.com/lib/3/amcharts.js 0x800a01bd - JavaScript runtime error: Object doesn't support this action

Is anyone familiar enough with amcharts to help me out? It would be much appreciated. Thanks in advance for any assistance you may provide.

Upvotes: 0

Views: 788

Answers (1)

xorspark
xorspark

Reputation: 16012

There are two issues with your code:

1) Since you're making a pie chart, you need to include pie.js in your view. serial.js is meant for lines and columns:

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>

2) The dataLoader expects the return value to be the array objects, not an object that contains an array, i.e.:

[
    {
      "TaskName": "Task 1",
      "TaskCompleted": 1000.0
    },
    {
      "TaskName": "Task 2",
      "TaskCompleted": 0.0
    },
    ...
]

You either need to fix your payload to return just the array or use the dataloader's postProcess callback to specify the array in the project.Tasks_Status property from your payload: 

"dataLoader": {
    "url": "../Home/GetTaskStatus",
    "format": "json",
    "postProcess": function(data) {
        return data["project.Tasks_Status"];
    }
}

Upvotes: 1

Related Questions