How to Create a Chart Dynamically from an MVC Controller or Razor

I'm using ASP.Net Core MVC. I have a page where I am calling a REST service and then deserializing the complex JSON response into an object (it's too complex to do with just a list, it's an object with collections of objects which have to be looped through). I then need to parse the data and create a Stacking Column Chart. The number of items in the stacked columns varies and the colors and tooltips are defined in the data along with a lot of other logic that needs to run as I loop through the data. I also need to be able to page through the data. So I want to dynamically create the chart by looping through the object created from the JSON response. How can I do this from the controller or using Razor on the view page? I want whatever will give me the maximum flexibility in creating the chart.

[Index.cshtml]:  <div class="row" style="margin-top:10px">      <div class="col-md-8">          <ejs-chart id="container" title="Sales History of Product X">              <e-series-collection>                  <e-series dataSource="ViewBag.dataSource1" xName="xvalue" yName="yValue1" fill="blue" visible="true" type="StackingColumn">                      <e-series-animation enable="false"></e-series-animation>                  </e-series>                  <e-series dataSource="ViewBag.dataSource1" xName="xvalue" yName="yValue2" fill="red" visible="true" type="StackingColumn">                      <e-series-animation enable="false"></e-series-animation>                  </e-series>              </e-series-collection>              <e-chart-tooltipsettings enable="true"></e-chart-tooltipsettings>              <e-chart-legendsettings visible="true"></e-chart-legendsettings>          </ejs-chart>      </div>  </div>  <script>      setInterval(refreshChart, 3000);       function refreshChart() {          var chart = document.getElementById("container").ej2_instances[0];          var i = 10;          var obj = { value: i };          $.ajax({              type: "POST",              url: "/Home/GetChartData",              data: obj,              success: function (data) {                  chart.series[0].dataSource = data;                  chart.series[0].xName = "x";                  chart.series[0].yName = "y";                   chart.series[0].fill = "green";                  chart.series[1].dataSource = data;                  chart.series[1].xName = "x";                  chart.series[1].yName = "y1";                  chart.series[1].fill = "orange";                  chart.refresh();              },              error: function (args) {                  alert('error');              }          });      }  </script>    [HomeController.cs]:    [HttpPost]          public JsonResult GetChartData(string value)          {              Random r = new Random();              List<ExportChartData> data2 = new List<ExportChartData>();                  for (int i = 0; i < Int32.Parse(value); i++)                      data2.Add(new ExportChartData(i, r.Next(10, 100), r.Next(50, 100)));              ViewBag.dataSource = data2;              return Json(data2);          }

As I mentioned I need full control over creating the chart. I won't know how many columns and stacked charts there will be until I look at the data and what filters the user has chosen. So I need to loop through the data and create series as I go.

[Index.cshtml]:  @{          var count = Enumerable.Count(ViewBag.Items);  }    <ejs-chart id="container" title="Sales History of Product X">              <e-series-collection>                  @for (var i = 0; i < count; i++)                  {                      <e-series dataSource="ViewBag.Items[i]" xName="xValue" yName="yValue1" visible="true" type="StackingColumn">                          <e-series-animation enable="false"></e-series-animation>                      </e-series>                  }              </e-series-collection>              <e-chart-tooltipsettings enable="true"></e-chart-tooltipsettings>              <e-chart-legendsettings visible="true"></e-chart-legendsettings>          </ejs-chart>    [HomeController.cs]:  public IActionResult Index()          {              List<List<DoubleAxisData>> data = new List<List<DoubleAxisData>>();              List<DoubleAxisData> chartData = new List<DoubleAxisData>              {                  new DoubleAxisData { xValue = 16, yValue1 = 12, yValue2= 7},                  new DoubleAxisData { xValue = 17, yValue1 = 14, yValue2 = 7 },                              };              List<DoubleAxisData> chartData1 = new List<DoubleAxisData>              {                  new DoubleAxisData { xValue = 16, yValue1 = 2, yValue2= 7},                  new DoubleAxisData { xValue = 17, yValue1 = 14, yValue2 = 7 },                    };                data.Add(chartData);              data.Add(chartData1);              ViewBag.Items = data;              return View();          }          public class DoubleAxisData          {              public double xValue;              public double yValue1;              public double yValue2;          }

@{      ViewData["Title"] = "Home Page";      var carriers = new Dictionary<string, List<Dynamic_Chart.Models.Data>>();      carriers.Add("Series 1", Dynamic_Chart.Models.Data.GetAllData());      carriers.Add("Series 2", Dynamic_Chart.Models.Data.GetAllData1());      carriers.Add("Series 3", Dynamic_Chart.Models.Data.GetAllData2());  }     <ejs-chart id="container" title="Sales History of Product X">              <e-series-collection>                  @foreach (KeyValuePair<string, List<Dynamic_Chart.Models.Data>> carrier in carriers)                  {                      <e-series name=@carrier.Key                                xName="Month"                                yName="Price"                                dataSource="carrier.Value"                                type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn" fill="@carrier.Value[carriers.Count].fill">                      </e-series>                  }              </e-series-collection>              <e-chart-tooltipsettings enable="true"></e-chart-tooltipsettings>              <e-chart-legendsettings visible="true"></e-chart-legendsettings>          </ejs-chart>

public class Data      {          public static List<Data> data = new List<Data>();  //some code here  }

I'm trying the first method but I'm having some difficulty. It seems to be working but it's not drawing a graph. I've attached my project. I've created a view called Graph, a controller called GraphController and a model called GraphModel. I'm reading in some sample json data from a file called shortcomplexresults.json to simulate a call to a service. The model was generated from the JSON. The x axis is Months and the y axis is power usage. Each column is the power usage for the month. Each stacked column is made of three parts: mornings, evenings and nights (for the power usage during the 3 parts of the day). The json data looks like this:
Attachment: TXUMED_b50adf42.zip

@{      var count = Enumerable.Count(ViewBag.dataSource1);  }       @for (int x = 0; x < count; x++)                                          {  string theYName = ("y" + x).ToString();  <e-series dataSource="ViewBag.dataSource1[x]" name="@Model.Result.Records[0].LineItems[x].Category.Label"   selectionStyle="series"   xName="month"   width="2"   opacity="1"   yName="@theYName"   yAxisName="powerAxis"   type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"   pointColorMapping="color">  <e-series-animation enable="false"></e-series-animation>  </e-series>                         }