How do you combine Highchart model with other models in MVC ASP.NET
<p>Am using Highcharts for MVC dashboard graphs, because the dashboard has several contents from different models to get the information display.
However,the chart is not loading while personal data information is displayed.This is what I have done </p>

<p>Model</p>

<pre><code>  public class BigViewModel
  {
    public IEnumerable&lt;PersonalData&gt; PersonalData { get; set; }
    public Highcharts Highchart { get; set; }
  }
</code></pre>

<p>Controller</p>

<pre><code>  Highcharts chart = new Highcharts("chart")
           .InitChart(new Chart { PlotShadow = false })
           .SetTitle(new Title { Text = "Browser market shares at a specific website, 2010" })
           .SetTooltip(new Tooltip { Formatter = "function() { return '&lt;b&gt;'+ this.point.name +'&lt;/b&gt;: '+ this.percentage +' %'; }" })
           .SetPlotOptions(new PlotOptions
           {
               Pie = new PlotOptionsPie
               {
                   AllowPointSelect = true,
                   Cursor = Cursors.Pointer,
                   DataLabels = new PlotOptionsPieDataLabels
                   {
                       Color = ColorTranslator.FromHtml("#000000"),
                       ConnectorColor = ColorTranslator.FromHtml("#000000"),
                       Formatter = "function() { return '&lt;b&gt;'+ this.point.name +'&lt;/b&gt;: '+ this.percentage +' %'; }"
                   }
               }
           })
           .SetSeries(new Series
           {
               Type = ChartTypes.Pie,
               Name = "Browser share",
               Data = new Data(new object[]
                {
                    new object[] { "Firefox", 45.0 },
                    new object[] { "IE", 26.8 },
                    new DotNet.Highcharts.Options.Point
                    {
                        Name = "Chrome",
                        Y = 12.8,
                        Sliced = true,
                        Selected = true
                    },
                    new object[] { "Safari", 8.5 },
                    new object[] { "Opera", 6.2 },
                    new object[] { "Others", 0.7 }
                })
           });


   var personalInfo= GetInfo();
   var high_chart = chart;//Gets chart data

   var personalData_highcharts = new BigViewModel
        {
            PersonalData = personalInfo,
            Highchart = high_chart
        };
   return View(personalData_highcharts);
</code></pre>

<p>Controller</p>

<pre><code>&lt;div class="body"&gt;
 &lt;table class="table table-bordered table-hover"&gt;
                        &lt;tr&gt;
                            &lt;th&gt;First Name&lt;/th&gt;
                            &lt;th&gt;Last Name&lt;/th&gt;
                            &lt;th&gt;Mobile Number&lt;/th&gt;
                            &lt;th&gt;Email&lt;/th&gt;                                

                        &lt;/tr&gt;
                        @foreach (var item in Model.PersonalData)
                        {
                            &lt;tr&gt;
                                &lt;td&gt;
                                    @Html.DisplayFor(modelItem =&gt; item.FirstName)

                                &lt;/td&gt;
                                &lt;td&gt;
                                    @Html.DisplayFor(modelItem =&gt; item.LastName)

                                &lt;/td&gt;                                   
                                &lt;td&gt;
                                    @Html.DisplayFor(modelItem =&gt; item.MobileNumber)
                                &lt;/td&gt;
                                &lt;td&gt;
                                    @Html.DisplayFor(modelItem =&gt; item.Email)

                                &lt;/td&gt;


                            &lt;/tr&gt;
                        }
                    &lt;/table&gt;
  &lt;/div&gt;
&lt;div class="body"&gt;
    @(Model)
&lt;/div&gt;
</code></pre>