HighCharts chart asp.net mvc rendering

Question

Hi I'm trying to use DotNet HighCharts to create a simple chart to display my ticket sales data in my C# asp.net MVC site. I wish to create a bar/column chart which will show how many tickets in total were available for the event and how many are remaining. I had planned to pass the chart to the view and display it. However my chart is not rendered in my view and I cannot find a reason why it won't display, any help would be greatly appreciated!

This is my controller method

 [Authorize(Roles = "canEdit")]
 public ActionResult Details(int? id)
 {
     if (id == null)
     {
       return new HttpStatusCodeResult(HttpStatusCode.BadRequest)
     }

     Event events = db.Events.Find(id);

     if (events == null)
      {
        return HttpNotFound();
      }
      Highcharts chart = new Highcharts("chart")
   .SetCredits(new Credits { Enabled = false })
   .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column })
   .SetTitle(new Title { Text = "Ticket Sales" })
   .SetXAxis(new XAxis { Categories = new[] { "Total Tickets", "Tickets  Remaining"} })
   .SetYAxis(new YAxis
   {
    Min = 0,
    Title = new YAxisTitle { Text = "Quantity" }
   })
   .SetTooltip(new Tooltip { Formatter = "function() { return ''+  this.series.name +': '+ this.y +''; }" })
   .SetPlotOptions(new PlotOptions { Bar = new PlotOptionsBar { Stacking = Stackings.Normal } })
   .SetSeries(new[]
           {
               new Series { Name = "Total", Data = new Data(new object[] { events.TicketsAvailable, events.TicketsRemaining }) }
            });


        return View(chart);
    }

And this is my view

@model DotNet.Highcharts.Highcharts
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

<head>
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script>
<title>Event Title</title>
</head>
<body>

<p>Chart Displaying Ticket Sales </p>
<div>@(Model)</div>


<div>
    @Html.ActionLink("Back to List", "Index", "EventsAdmin")
</div>
</body>

Please run the console (developer tools) and check if any errors appear. — Sebastian Bochan

Renuka Deshmukh Renuka Deshmukh · Accepted Answer · 2016-03-13T18:51:29

I think the issue is that your js files are not loading.

<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script>

I tried the following code and it worked for me. You can modify the code as per your requirements.

View:

@model DotNet.Highcharts.Highcharts
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.jquery.com/jquery-1.12.1.min.js" integrity="sha256-I1nTg78tSrZev3kjvfdM5A5Ak/blglGzlaZANLPDl3I=" crossorigin="anonymous"></script>
<head>
    <title>Event Title</title>
</head>
<body>
    <p>Chart Displaying Ticket Sales </p>
    <div>@(Model)</div>
</body>

Controller:

public ActionResult Index()
        {
            object[] desktops = new object[] {17368, 17792, 18235, 18136 };
            var monthsList = new[] { "Feb-15", "Mar-15", "Apr-15", "May-15",};

            Highcharts chart = new Highcharts("chart")
         .SetCredits(new Credits { Enabled = false })
         .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column , Height = 190, Width=190})
         .SetTitle(new Title { Text = "Ticket Sales" })
         .SetXAxis(new XAxis { Categories = monthsList, Labels = new XAxisLabels() { } })
         .SetYAxis(new YAxis
         {
             Min = 0,
             Title = new YAxisTitle { Text = "Quantity" }
         })
         .SetTooltip(new Tooltip { Formatter = "function() { return ''+  this.series.name +': '+ this.y +''; }" })
         .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn{ Color = System.Drawing.Color.Black } })
         .SetSeries(new[]
                 {
               new Series { Name = "Total", Data = new Data(desktops) }
                  });

            return View(chart);
        }

If you still face issues, look into your browser's debug console if there are any javascript issues.

HighCharts chart asp.net mvc rendering

1 Answers