DotNet.Highchart not showing

Question

I am new to MVC3 and I am trying to figure out how to use dotnet.highcharts. BTW I have read several post and none seem to help. I have tried to use the simple examples that accompanied the download from codeplex. I can't even get that to work even by copying and pasting. I hardly register with forums, I mainly just search for answers. I usually don't have much trouble and I feel bad that I have to ask a question like this, but I need help. All I want to do is to simply create a chart. I will post my code any help will be appreciated.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DotNet.Highcharts.Options;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts;

namespace MyProject.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
    }

    public ActionResult About()
    {
        return View();
    }

    public ActionResult PartialChart()
    {
        Highcharts chart = new Highcharts("chart")
            .InitChart(new Chart { DefaultSeriesType = ChartTypes.Bar })
            .SetTitle(new Title { Text = "Stacked bar chart" })
            .SetXAxis(new XAxis { Categories = new[] { "Apples", "Oranges", "Pears", "Grapes", "Bananas" } })
            .SetYAxis(new YAxis
            {
                Min = 0,
                Title = new YAxisTitle { Text = "Total fruit consumption" }
            })
            .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 = "John", Data = new Data(new object[] { 5, 3, 4, 7, 2 }) },
                           new Series { Name = "Jane", Data = new Data(new object[] { 2, 2, 3, 2, 1 }) },
                           new Series { Name = "Joe", Data = new Data(new object[] { 3, 4, 4, 2, 5 }) }
                       });

        return PartialView(chart);
    }
}
}

This is the partialview:

@model DotNet.Highcharts.Highcharts

@(Model)

This is the index page:

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET     MVC Website">http://asp.net/mvc</a>.
</p>
<p>
@Html.Action("PartialChart", "Home")
@Html.Partial("PartialChart")
</p>

And this is the master page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">    </script>
    <script src="@Url.Content("~/Scripts/highcharts.js")" type="text/javascript">    </script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

No error is thrown. That is the weird part. The chart isn't visible. I have stepped through the code and everything appears to execute, then I am left with no results. — Brandon Comer
– Brandon Comer, Commented Aug 21, 2012 at 23:41

Mihai Iorga · Accepted Answer · 2012-08-28 06:43:34Z

With the help of a friend I have the answer. Just in case someone out there still cares. The problem was the reference to the Highcharts scripts. The scripts were located differently than listed in the example and being completely oblivous I didn't notice.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"   type="text/javascript">    </script>
        <script src="@Url.Content("~/Scripts/Highcharts-2.2.1/js/highcharts.js")" type="text/javascript">      </script>
        <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    </head>
    <body>
        <div class="page">
            <header>
                <div id="title">
                    <h1>My MVC Application</h1>
                </div>
                <div id="logindisplay">
                    @Html.Partial("_LogOnPartial")
                </div>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                    </ul>
                </nav>
            </header>
            <section id="main">
                @RenderBody()
            </section>
            <footer>
            </footer>
        </div>
    </body>
</html>

Collectives™ on Stack Overflow

DotNet.Highchart not showing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related