Can’t load stockEvents with amcharts eventDataLoader when calling MVC controller action

Question

I’m using amcharts stock chart. When using the following code, my chart loads fine and everything works:

var chart = AmCharts.makeChart("chartdiv", {
    "type": "stock",
    "theme": "light",
    "dataSets": [{
        "title": "Values",
        "color": "#b0de09",
        "fieldMappings": [{
            "fromField": "value",
            "toField": "value"
        }, {
             "fromField": "average",
             "toField": "average"
        }],
        "dataProvider": @Html.Raw(ViewBag.ChartData),
        "categoryField": "date"
   }],
   ...

And my controller:

public class ChartController : Controller
{
    public IActionResult Index()
    {
        ViewBag.ChartData = JsonConvert.SerializeObject(GetChartData ());
        return View();
    }
}

However, when I try to add stock events by adding the following code, two things happen: 1) the chart no longer displays, and 2) the GetChartEvents action in the controller is never called, so obviously never returns any data.

var chart = AmCharts.makeChart("chartdiv", {
    "type": "stock",
    "theme": "light",
    "dataSets": [{
        "title": "Values",
        "color": "#b0de09",
        "fieldMappings": [{
            "fromField": "value",
            "toField": "value"
        }, {
             "fromField": "average",
             "toField": "average"
        }],
        "dataProvider": @Html.Raw(ViewBag.ChartData),
        "categoryField": "date",
        "eventDataLoader": {
            "url": @Url.Action("GetChartEvents", "ChartController"),
            "format": "json",
            "showCurtain": true,
            "showErrors": true,
            "async": true
        }
   }],
   ...

and in the controller

public class ChartController : Controller
{
    …
    [HttpGet]
    public IActionResult GetChartEvents()
    {
        ChartEvent[] events = new ChartEvent[3];
        events[0] = new ChartEvent(new DateTime(2007, 12, 17));
        events[1] = new ChartEvent(new DateTime(2008, 10, 27));
        events[2] = new ChartEvent(new DateTime(2009, 07, 06));

        return Json(events);
    }
}

ChartEvent is my own class, but because GetChartEvents is never called, I don’t think the issue is how the returned data is formatted. In the view, if I replace

"url": @Url.Action("GetChartEvents", "ChartController"),

With

"url": "/Chart/GetChartEvents",

GetChartEvents is still never called, but the chart does display itself. I even tried placing the events in the ViewBag, but that doesn’t work either

"dataProvider": @Html.Raw(ViewBag.ChartData),
"stockEvents": @Html.Raw(ViewBag.ChartEvents)

As a final note (and sanity check!), if I output to the page the contents of @Html.Raw(ViewBag.ChartEvents), I get the following that appears fine:

[{"date":"Date(2007,12,17)","type":"arrowUp","backgroundColor":"#00CC00","graph":"g1","description":" "}, {"date":"Date(2008,10,27)","type":"arrowUp","backgroundColor":"#00CC00","graph":"g1","description":" "}, {"date":"Date(2009,07,06)","type":"arrowUp","backgroundColor":"#00CC00","graph":"g1","description":" "}]

Any help or insight would be much appreciated.

Answer 1

Following their guide here, there are few things that might cause problem.

First, quotes:

"url": '@Url.Action("GetChartEvents", "ChartController")',

Notice single quotes around the URL. Without them your js is just invalid, and that's why the graph does not display.

Second, they use "dataLoader" and not "eventDataLoader" property.

Third, make sure to include dataloader plugin:

<script src="amcharts/plugins/dataloader/dataloader.min.js" type="text/javascript"></script>