Drilldown with Ajax and MVC

[hecatonchireslm]

I’m trying to get my head around this, and have been looking at the examples. The MVC drilldown seems to precache all data, which is not suitable for us. I want an ajax query fired off for each layer, based on the data clicked.

In the MVC controller I have made several methods that return Json datapoint collections

public async Task<IActionResult> GetLayer1(string datePassedIn)
        {
            string orgCode = User.Identity.GetOrgCode();
            DateTime? processDate;
            CultureInfo provider = CultureInfo.InvariantCulture;
            DateTime defaultDate = DateTime.Today.AddDays(-1);  //default yesterday 
            string inputDateFormat = "yyyyMMdd";

            try
            {
                processDate = DateTime.ParseExact(datePassedIn, inputDateFormat, provider);
            }
            catch (FormatException ex)
            {
                _logger.LogError(ex, "Error formatting date {datePassedIn} did not match {inputDateFormat}. using default date {defaultDate}", null);
                processDate = defaultDate;
            }

            List<DataPoint> dataPoints = new List<DataPoint>();

            IEnumerable<EventTypeLayer1> results = await _context.EventTypeLayer1Results
                                                                .FromSql($"usp_dd_EventType_1 @p0, @p1", orgCode, processDate)
                                                                .ToListAsync();

            foreach (EventTypeLayer1 result in results)
            {
                dataPoints.Add(new DataPoint(result.Value, result.Title, result.Colour));
            }

            return Json(dataPoints);

However, I’m weak with Javascript. It would make sense to have config objects for each layer of chart

var optionsLayer1 = {
    click: layer1DrilldownHandler,
    type: doughnut,
    etc: etc
} 

var optionsLayer2 = {
    click: layer2DrilldownHandler,
    type: bar,
    etc: etc
} 

The click handlers need to be defined. I know the click event would be where I load the next layer and prepare its data. But all of the examples seem to be one of global actions.

How do I convert this to multiple variations?
`
$.getJson(“~/Views/Json/GetLayer0?processDate=20190801&orgCode=HVO”, function (data) {
$.each(data, function (key, value) {
dataPoints.push({ x: value[0], y: parseInt(value[1]) });
});
chart.render();
});’

• This topic was modified 4 years, 8 months ago by hecatonchireslm. Reason: typo in code section

[Indranil]

@hecatonchireslm,

Please download the sample project from this link to create Drilldown chart in ASP.NET MVC. An instructions.txt file has been included for your convenience with instructions to set up the project and get the charts running.

In case you are still facing any issue, please create a sample project with a sample database and share it over Google-Drive or Onedrive so that we can look into the code, understand the scenario better and help you out?

__________
Indranil Deo
Team CanvasJS