HighCharts not being displayed in Partial view

Question

my controller is

    public ActionResult Index()
    {

        if (Request.IsAjaxRequest())
        {
            List<double> nyValues = new List<double> { 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 };
            List<ColumnSeriesData> nyData = new List<ColumnSeriesData>();
            nyValues.ForEach(p => nyData.Add(new ColumnSeriesData { Y = p }));
            ViewData["tokyoData"] = nyData;

            return PartialView("~/Views/Home/_Graph.cshtml");
        }
        else

        {
            List<double> tokyoValues = new List<double> { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 };
            List<ColumnSeriesData> tokyoData = new List<ColumnSeriesData>();
            tokyoValues.ForEach(p => tokyoData.Add(new ColumnSeriesData { Y = p }));
            ViewData["tokyoData"] = tokyoData;

            return View();
        }
    }

and In View

<div class="graphDiv" id="MainGraph">
@{ Html.RenderPartial("_Graph");}
</div>

and ajax call is

 @Ajax.ActionLink("Team", "Index", "Home", null, new AjaxOptions { HttpMethod = "GET", LoadingElementId = "divLoading", UpdateTargetId = "body", InsertionMode = InsertionMode.Replace, OnSuccess = "" }, new { })

The Partial view is not being rendered in the div.. Its just an empty page ...Any help ...Thanks in advance please.

Answer 1

the problem at our project was, that highcharts triggers two events:

• DOMContentLoaded
• readystatechange

https://developer.mozilla.org/en-US/docs/Web/API/Document/readystatechange_event

Highcharts is generating a method which is not fired by this eventlisteners. We have to run the "CreateChart"-Function, when Ajax succeeded.

if (document.addEventListener) 
{
  document.addEventListener("DOMContentLoaded", function() {
    createChartTargetChart(); //CreateChartFunction !!
  });
}
else if (document.attachEvent) 
{
  document.attachEvent("onreadystatechange", function() {
      if (document.readyState === "complete")
      {
        document.detachEvent("onreadystatechange", arguments.callee);
        createChartTargetChart(); //CreateChartFunction !!
      }
   });
}

Highsoft generates the function name automatic, in c# you can code:

string divId = "xxx"; // = the containers target Id 
var functionName = $"createChart{divId}()";

Answer 2

I think you're trying to render a chart in a partial view and render that partial view inside the main view. In order to properly render a "PartialView" inside a "MainView" via an AJAX request, please try the following:

MainView:

@{ ViewBag.Title = "MainView"; }

<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

<h2>MainView</h2>
<div class="graphDiv" id="MainGraph">
  @Ajax.ActionLink("Team", "GetChart", "Home", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "TargetForChart", InsertionMode = InsertionMode.Replace, OnSuccess = "" })
  <h2>The chart appears here:</h2>
  <div id="TargetForChart">

  </div>
</div>

PartialView:

<!-- Your chart html and js goes here -->

Controller:

public class HomeController : Controller
{
    public ActionResult MainView()
    {
        return View();
    }

    public PartialViewResult GetChart()
    {
        List<double> nyValues = new List<double> { 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 };
        List<ColumnSeriesData> nyData = new List<ColumnSeriesData>();
        nyValues.ForEach(p => nyData.Add(new ColumnSeriesData { Y = p }));
        ViewData["tokyoData"] = nyData;
        return PartialView("_Graph");
    }
}

And as long as your partial view contains the right logic, there wouldn't be any reason for it to not render. If you have duplicated the initialization logic for the chart on both the MainView and the PartialView, I would suggest you to remove it from the MainView and only keep it on the PartialView where it would actually be rendered. Do keep an eye on the console to spot and resolve any and all js errors.