Home Forums Chart Support Drilldown with Ajax and MVC

Drilldown with Ajax and MVC

Viewing 2 posts - 1 through 2 (of 2 total)
  • #26510

    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";
                    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)
                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]) });

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


    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.