ctoolis
Posts: 3
Joined: Mon Mar 27, 2023 12:41 pm

AJAX call display issue.

I have this custom made chart I had it working and displaying properly before i switched it to an ajax call.

Code: Select all

   <div data-ajax="true" data-url="@Url.Action(nameof(HomePageController.Portfolio_NAVPercent_By_AssetClass), nameof(HomePageController).GetControllerName(), new { clientPortalDataSetID = Model.SelectedDataSet.TCPD_ClientPortalDataSetID, currencyID = Model.CPR_PerformancePeriod.Currency_CURR_GlobalCurrencyID_FK })"></div>

               @{Html.RenderAction(nameof(HomePageController.Portfolio_NAVPercent_By_AssetClass), nameof(HomePageController).GetControllerName(), new { clientPortalDataSetID = Model.SelectedDataSet.TCPD_ClientPortalDataSetID, currencyID = Model.CPR_PerformancePeriod.Currency_CURR_GlobalCurrencyID_FK });}

The @html.RenderAction displays correctly and shows the table.

The ajax call hits all of the same code but does not display.

Here is my code

Code: Select all

 public static ChartBuilderResult Portfolio_NAVPercent_By_AssetClass(ConfigurationModels.BaseSettings Configuration)
        {
            string uniqueChartName = $"hc_{DisplayHelpers.HTMLSafeUniqueID()}";

            var currency = Townsend.CURR.Load.SingleCurrency(Configuration.CurrencyID);
            List<WaterfallSeriesData> result = new List<WaterfallSeriesData>();

            var AllAssetClasses = Townsend.AC.Load.AllAssetClasses();
            foreach (var assetClass in AllAssetClasses)
            {
                var cpirPerfPeriods = Townsend.TCPD.Load.Get_ClientPortalDataSet_Investment_PerformancePeriod_List(Configuration.ClientPortalDataSet.TCPD_ClientPortalDataSetID, Configuration.ClientPortalDataSet.EndDate, Configuration.CurrencyID);
                var investmentIDs = cpirPerfPeriods.Select(x => x.Position_CPI_ClientPortfolioInvestmentID_FK).Distinct();
                var pageSettings = new Townsend.Shared.SL_Settings
                {
                    CurrencyID = Configuration.CurrencyID,
                    EndingDate = Configuration.ClientPortalDataSet.EndDate,
                };
                var cpiByAssetClass = new List<long>();
                foreach (var investmentID in investmentIDs)
                {
                    var investment = Townsend.CPI.Load.SingleInvestment_CustomQuery(investmentID, pageSettings, new List<Townsend.CPI.Includes>());
                    investment.SetupInvestment(pageSettings, new List<Townsend.CPI.Includes>());
                    if ((long)investment.AssetClass == assetClass.AC_AssetClassID)
                    {

                        DataInfo_Decimal assetClassTotalNav = new DataInfo_Decimal();

                        var dataPoints = Townsend.TCPD.Load.Get_ClientPortalDataSet_CPIR_DataPoints(cpirPerfPeriods.FirstOrDefault().TCPD_CPIR_PerformancePeriodID);
                        var invNav = dataPoints?.NAV.To_ND_NC_Value_CurrencyString(currency);
                        if (invNav == null || invNav == "NC" || invNav == "ND")
                            continue;
                        var invNavDecimal = decimal.Parse(invNav);
                        assetClassTotalNav.Value = assetClassTotalNav.Value + invNavDecimal;
                        //};

                        if (assetClassTotalNav.IsNotZero())
                        {
                           var newBreakout = new WaterfallSeriesData();
                            var cprPerformancePeriod = Townsend.TCPD.Load.Get_CPR_PerformancePeriod(Configuration.ClientPortalDataSet.TCPD_ClientPortalDataSetID, Configuration.ClientPortalDataSet.EndDate, Configuration.CurrencyID);
                            var cprDataPoints = Townsend.TCPD.Load.Get_ClientPortalDataSet_CPR_DataPoints(cprPerformancePeriod.TCPD_CPR_PerformancePeriodID);
                            var portNAVString = cprDataPoints?.NAV.To_ND_NC_Value_CurrencyString(currency);
                            if (portNAVString == null || portNAVString == "NC" || portNAVString == "ND")
                                continue;
                            var portNAV = decimal.Parse(portNAVString);

                            var percentage = (assetClassTotalNav.Value / portNAV) * 100;
                            newBreakout = new WaterfallSeriesData { Name = assetClass.AssetClassName, Y = double.Parse(percentage.ToString()) };
                            result.Add(newBreakout);
                        }


                    }
                    //var cpirPerfperiod= Townsend.TCPD.Load.Get_CPIR_PerformancePeriod(Configuration.ClientPortalDataSet.TCPD_ClientPortalDataSetID, investment, 
                    //var assetClassName = Townsend.TCPD.Load.Get_ClientPortalDataSet_CPIR_DataPoints(cpirPerfPeriods.FirstOrDefault().TCPD_CPIR_PerformancePeriodID);
                    //if (assetClassName != assetClass.AssetClassName)
                    //    continue;

                }



            }


            int counter = 0;
            var categories = result.Select(x => x.Name).ToList();
            const string NAME = "NAV % by Asset Class";

            var seriesData = new List<object>();
            foreach (var (region, index) in result.WithIndex())
            {
                seriesData.Add(new WaterfallSeriesData
                {
                    Name = region.Name,
                    Y = region.Y,
                    Color = DisplayHelpers.GetUniqueColor_ByIndex(index + 1).ToString()
                });
                counter++;
            }
            var chart = new Highcharts
            {

                Title = new Title
                {
                    Text = "Nav % By Asset Class"
                },
                XAxis = new List<XAxis>
                {
                    new XAxis
                    {
                        Categories=categories
                    }

                },
                YAxis = new List<YAxis>
                {
                    new YAxis
                    {
                        Title = new YAxisTitle { Text = "Percentage %" },
                        Min = 0,
                        Max = 100
                    }
                },
                Tooltip = new Tooltip
                {
                    Shared = true,
                    Formatter = "function() " +
                    "{ " +
                        "return this.points.reduce(function(s, point){" +
                            "return s + '<br/>' +" +
                                "FormatPercent(point.y);" +
                            "}, '<b>' + this.x + '</b>');" +
                    "}"
                },
                //PlotOptions = new PlotOptions { Pie = new PlotOptionsPie { Shadow = false } })
                //.SetTooltip(new Tooltip { Formatter = $"TT_{uniqueChartName}" })
                PlotOptions = new PlotOptions
                {
                    Column = new PlotOptionsColumn
                    {
                        Cursor = PlotOptionsColumnCursor.Pointer,
                        Point = new PlotOptionsColumnPoint { Events = new PlotOptionsColumnPointEvents { Click = $"CPC_{uniqueChartName}" } },
                        DataLabels = new PlotOptionsColumnDataLabels
                        {
                            Enabled = false,
                            // Color = System.Drawing.Color.FromName($"colors_{uniqueChartName}[0]"),
                            Formatter = "function() {return this.y}",
                            //Style = "fontWeight: 'bold'"
                        }
                    }
                },
                Credits = new Credits
                {
                    Enabled = false
                },
                Series = new List<Series>
                 {
                     new WaterfallSeries
                     {
                         Name= "InvestmentStructure Structures",
                         Data= result,
                     }
                 },
            };
            chart.ID = uniqueChartName;
            var renderer = new HighchartsRenderer(chart);


           
            return new ChartBuilderResult
            {
                ChartCompleted = true,
                Chart = chart,
                Renderer = renderer
            };
        }
That is the controller code.

It seems the differences from what gets actually posted to the html are just the container created by this code is empty using the ajax call. When Using @html.RenderAction it seems to fill that container that is created. Could it be something with the javascript? The render being sinc eit worked on page load and hte ajax not? if so how could i fix this. Thank you.

Code: Select all

<div data-ajax="true" data-url="/Home/PortfolioAssetClassNavPercent?clientPortalDataSetID=22&amp;currencyID=11" data-loaded="true">
<div id="hc_c7099f03b48046039e58ac373a6cec65" style="height:;min-width:;clear:both;margin: 0 auto;"></div>
<script type="text/javascript">
if (document.addEventListener) {document.addEventListener("DOMContentLoaded", function() {createCharthc_c7099f03b48046039e58ac373a6cec65();});} else if (document.attachEvent) {document.attachEvent("onreadystatechange", function(){if (document.readyState === "complete"){document.detachEvent("onreadystatechange", arguments.callee);createCharthc_c7099f03b48046039e58ac373a6cec65();}});}function createCharthc_c7099f03b48046039e58ac373a6cec65() {var ChartOptions = {"chart":{"renderTo":"hc_c7099f03b48046039e58ac373a6cec65"},"plotOptions":{"column":{"cursor":"pointer","dataLabels":{"formatter":function() {return this.y}},"point":{"events":{"click":CPC_hc_c7099f03b48046039e58ac373a6cec65}}}},"yAxis":[{"min":0.0,"max":100.0,"title":{"text":"Percentage %"}}],"series":[{"data":[{"y":20.60823409809203,"name":"Debt"},{"y":20.60823409809203,"name":"Real Estate"},{"y":20.60823409809203,"name":"Real Estate"},{"y":20.60823409809203,"name":"Real Estate"},{"y":20.60823409809203,"name":"Real Estate"},{"y":20.60823409809203,"name":"Real Estate"},{"y":20.60823409809203,"name":"Real Estate"},{"y":20.60823409809203,"name":"Real Estate"},{"y":20.60823409809203,"name":"Real Estate"},{"y":20.60823409809203,"name":"Real Estate"},{"y":20.60823409809203,"name":"Real Estate"}],"type":"waterfall","name":"InvestmentStructure Structures"}],"title":{"text":"Nav % By Asset Class"},"credits":{"enabled":false},"xAxis":[{"categories":["Debt","Real Estate","Real Estate","Real Estate","Real Estate","Real Estate","Real Estate","Real Estate","Real Estate","Real Estate","Real Estate"]}],"tooltip":{"formatter":function() { return this.points.reduce(function(s, point){return s + '<br/>' +FormatPercent(point.y);}, '<b>' + this.x + '</b>');},"shared":true}};new Highcharts.chart("hc_c7099f03b48046039e58ac373a6cec65",ChartOptions);}</script>
</div>
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: AJAX call display issue.

Hello,

Welcome to our forum and thanks for contacting us with your inquiry!

I can see that this is a duplicate post from StackOverflow. We work as a single team across all support platforms including StackOverflow. Please do not duplicate your topics on multiple channels because it only disrupts our work. You do not have to worry because we always answer all questions on our support platforms.

This question already has an answer on StackOverflow: https://stackoverflow.com/a/75864418.

In case of any other questions related to Highcharts functionality feel free to contact us anytime.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Usage”