Datapoint update on selection

[KratosMafia]

My question is how to either
1. get my viewbag to update on a selection change (which I don’t think is possible)
2. Set multiple different datapoints and push out the new datapoints when a selection is changed.

Currently my graphs work on page load using viewbags. This was fine until I was asked to add a selection box to choose a year to display our information. So far I have a selection box that calls my controller, sets the year that I need and grabs all of the data I need.

At the end of my controller the viewbags are set to the new data is not shown on the view even though my jquery is waiting on a success. I know that viewbags don’t like to be reused and only really work on page render so I tried to go the other way and use datapoints.push. (https://canvasjs.com/asp-net-mvc-charts/json-data-api-ajax-chart/)
This seems to only work for 1 point and not for a column graph. The only thing in column graphs that I see is using viewbags.

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

            List<DataPoint> costData = new List<DataPoint>();
            List<DataPoint> currentsavingsData = new List<DataPoint>();

            List<List> currentsavingsList = new List<List>();

            String currentYear = SelectedYear;
            decimal currentSavings = 1;

            currentsavingsList = (....).ToList();
            currentSavings = 100;

            var devMaintHours = 200

            var cost = 100;

            currentsavingsData.Add(new DataPoint(currentYear, Convert.ToDouble(currentSavings)));
            costData.Add(new DataPoint(currentYear, Convert.ToDouble(cost)));

            ViewBag.CurrentSavingsData = JsonConvert.SerializeObject(currentsavingsData);
            ViewBag.CostData = JsonConvert.SerializeObject(costData);

            return View(....);

JQuery

var chart = new CanvasJS.Chart("chart", {
                    colorSet: "",
                     animationEnabled: true,
            title: {
                text: "Automation Savings"
                        },
                        axisY: {
                            valueFormatString: "$###,###,###.#0", //try properties here
                        },
                        toolTip: {
                            shared: true,
                            valueFormatString: "$###,###,###.#0"
                        },
            data: [{
                type: "column",
                name: "Costs",
                showInLegend: true,
                indexLabel: "{y}",
                indexLabelFontColor: "#EEEEEE",
                indexLabelPlacement: "inside",
                yValueFormatString: "$#,##0",
                dataPoints: @Html.Raw(ViewBag.CostData)
            },
                {
                    type: "column",
                    name: "Benefits",
                    showInLegend: true,
                    indexLabel: "{y}",
                    indexLabelFontColor: "#000000",
                    indexLabelPlacement: "inside",
                    yValueFormatString: "$#,##0",
                dataPoints: @Html.Raw(ViewBag.CurrentSavingsData)
                }]
                    });

This is just 1 chart, I have 8 charts in total so I was wondering what the best way was. Some charts have 4 different datapoints.

[Adithya Menon]

@kratosmafia,

Can you kindly create a complete sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with sample data so that we can look into your code, run it locally at our end to understand the scenario better, and help you out?

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue at our end or not able to understand the exact requirements or due to the variation in chart-options being used by you and us. Because of these reasons we expect you to share the complete sample project along with sample data(dummy data) which helps us run it locally at our end to understand the use case and help you resolve it.

—
Adithya Menon
Team CanvasJS