How to update data in Morris.Bar chart

Question

This is question is about morris.bar implementation in a cshtml page in a .net6 application.

I have a morris.bar chart that gets loaded with two data sets when the page loads. The chart data can be toggled with a dropdown (#drpVolOverviewType).

I have added a second dropdown (#drpTeamOrInd). When this new dropdown is toggled I want the two data sets in the chart to be updated from the DB - per logic that is defined in the controller. The data part works fine. My problem is that the morris.bar does not get updated.

This is the version of my morris.bar: js/MorrisPlugin/raphael-2.1.0.js

I tried to have it refresh with method this but it didnt work:

$('#drpTeamOrInd').change(function () {
    // Call the function with synchronous AJAX and update the MorrisBar chart
    morBarF.setData(getFVolumeOverviewData($('#drpTeamOrInd').val()));
    morBarC.setData(getCVolumeOverviewData($('#drpTeamOrInd').val()));
});

getFVolumeOverviewData and getCVolumeOverviewData are the functions that get the data when the page load and they work fine.

This is the relevant code:

  var morBarF;
   var morBarC;

   // Function to initialize MorrisBar charts
   function initializeCharts() {
       // All volume overview
       morBarF = new Morris.Bar({
           // ID of the element in which to draw the chart.
           element: 'divChartVolumeOverviewAll',
           data: getFVolumeOverviewData($('#drpTeamOrInd').val()), // Initial data
           xkey: 'x',
           ykeys: ['y'],
           labels: ['DV']
       });

       // Part volume overview
       morBarC = new Morris.Bar({
           // ID of the element in which to draw the chart.
           element: 'divChartVolumeOverviewPart',
           data: getCVolumeOverviewData($('#drpTeamOrInd').val()), // Initial data
           xkey: 'x',
           ykeys: ['y'],
           labels: ['DV']
       });
       $('#divChartVolumeOverviewPart').hide();
       $('#drpVolOverviewType').trigger('change');
   }

   // Call the function to initialize charts
   initializeCharts();

     //Volume overview instrument type dropdown change event
     $('#drpVolOverviewType').change(function () {
            if ($('#drpVolOverviewType').val() == 1) {
                $('#spnMonthToDate').text(fTotalTrade);
                $('#divChartVolumeOverviewF').show();
                $('#divChartVolumeOverviewC').hide();
            } else if ($('#drpVolOverviewType').val() == 2) {
                $('#spnMonthToDate').text(cTotalTrade);
                $('#divChartVolumeOverviewC').show();
                $('#divChartVolumeOverviewF').hide();
            }
        });

   $('#drpTeamOrInd').change(function () {
       // Call the function with synchronous AJAX and update the MorrisBar chart
       morBarF.setData(getFVolumeOverviewData($('#drpTeamOrInd').val()));
       morBarC.setData(getCVolumeOverviewData($('#drpTeamOrInd').val()));
    });

Appreciate your help with this. Thanks

Answer 1

As per the suggestion from 3limin4t0r in the discussion, the solution was to first assign the value to returned by getFVolumeOverviewData($('#drpTeamOrInd').val()) to a variable and then pass it to morris.bar.

I was not aware that in JS it was not possible to execute a function within as a parameter within another method.