Styjun

I try to render a highsoft highchart inside a partial view.
If I render the chart on a main view, everthing works fine.

The partial view will be loaded via an ajax call inside my main view "index.cshtml":

@
 ViewBag.Title = "Index";
 Layout = "~/Views/Shared/_Layout.cshtml";



<button id="showIndexChart" onclick="RenderIndexPartial()">Get Partial</button>

<div id="PartialContent">

</div>



@section scripts
 <script>

 var RenderIndexPartial = function () 
 $.ajax(
 url: '/Line/RenderIndexPartial',
 type: "Get",
 cache: false,
 dataType: "html",
 success: function (PartialViewData) 
 $('#PartialContent').html(PartialViewData);
 ,
 error: function (xhr, status, error) 
 console.log("status: " + status + " / error: " + error);
 ,
 );
 ;

 </script>

The controller action for the partial view looks like this:
It returns the partial view and a model (object Highsoft.Web.Mvc.Charts.Highcharts)

 [HttpGet]
 public ActionResult RenderPartial()
 
 List<double> tokyoValues = new List<double> 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 ;
 List<LineSeriesData> tokyoData = new List<LineSeriesData>();

 tokyoValues.ForEach(p => tokyoData.Add(new LineSeriesData Y = p ));


 var tmpChart = new Highcharts()
 
 Chart = new Chart
 
 Height = 100,
 Width = 100,
 Type = ChartType.Line,
 RenderTo = "containerPartial",
 ,
 Title = new Title
 
 Text = "Monthly Average Temperature",
 ,
 XAxis = new List<XAxis>
 
 new XAxis
 
 Categories = new List<string> "Jan", "Feb", "Mar", "Apr", "May", "Jun",
 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ,

 
 ,
 YAxis = new List<YAxis>
 
 new YAxis
 
 Title = new YAxisTitle
 
 Text = "Temperature (°C)"
 ,
 PlotLines = new List<YAxisPlotLines>
 
 new YAxisPlotLines
 
 Value = 0,
 Width = 1,
 Color = "#808080"
 
 
 
 ,
 Series = new List<Series>
 
 new LineSeries
 
 Name = "Tokyo",
 Data = tokyoData,
 ,

 
 ;

 return PartialView("_Index", tmpChart);
 

The partial view "_index.cshtml" is here:

@model Highsoft.Web.Mvc.Charts.Highcharts

@using Highsoft.Web.Mvc.Charts

<h1>Partial loaded</h1>

<div id="containerPartial" style="height: 400px">

 @(Html.Highsoft().Highcharts(Model, "ChartB")

</div>

If I check the dom elements there is somthing missing inside the highcharts div

Can maybe someone help me? Thank you so much.

Update:
The div content an my main view where the chart is visible looks a little bit dirrent:

And thats the response from my ajax call what shoul load to the div "PartialContent":

<h1>Partial loaded</h1>

<div id="containerPartial" style="height: 400px">

 <div id='ChartB' style='height:100;min-width:100;clear:both;margin: 0 auto;'></div><script type='text/javascript'>if (document.addEventListener) document.addEventListener("DOMContentLoaded", function() createChartChartB();); else if (document.attachEvent) document.attachEvent("onreadystatechange", function()if (document.readyState === "complete")document.detachEvent("onreadystatechange", arguments.callee);createChartChartB(););function createChartChartB() var ChartOptions = "xAxis":["categories":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]],"chart":"height":100,"width":100,"type":"line","renderTo":"ChartB","title":"text":"Monthly Average Temperature","series":["name":"Tokyo","type":"line","data":["y":7,"y":6.9,"y":9.5,"y":14.5,"y":18.2,"y":21.5,"y":25.2,"y":26.5,"y":23.3,"y":18.3,"y":13.9,"y":9.6]],"yAxis":["title":"text":"Temperature (°C)","plotLines":["width":1,"color":"#808080","value":0]];new Highcharts.chart("ChartB",ChartOptions);</script>

</div>