Using HighCharts and the Chart does not render.

Crystal Rouse
Crystal Rouse used Ask the Experts™
on
I am using HighCharts and when loading the View, the source for Highcharts is loaded after the DOM.  The chart does not display.

My View looks like this:

@{
    ViewBag.Title = "Warranty Expiration Chart";
}

<div class="jumbotron">

    <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

</div>

<script type="text/javascript">
    $(document).ready(function () {
        $.getJSON("GetMaintenanceExp", function (data) {

            Highcharts.chart('container', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: 'Maintenance Expiration Chart'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: [{
                        name: 'ThirtyDays',
                        y: data.ThirtyDays,
                    }, {
                        name: 'SixtyDays',
                        y: data.SixtyDays
                    }, {
                        name: 'NinetyDays',
                        y: data.NinetyDays
                    }]
                }]
            });
        });
    });

</script>

Open in new window


My Controller returns the values for ThirtyDays, SixtyDays, NinetyDays as a Json.

My Layout View has the following in the head:  @Scripts.Render("~/javascript/js")
I have an app bundle that has the following:

 bundles.Add(new ScriptBundle("~/javascript/js").Include(
                        "~/Scripts/jquery-1.11.3.js",
                        "~/Scripts/bootstrap.js",
                        "~/Scripts/jquery-ui.js",
                        "~/Scripts/chosen.jquery.min.js",
                        "~/Scripts/jquery.dataTables.js",
                        "~/Scripts/dataTables.buttons.min.js",
                        "~/Scripts/highcharts.js",
                         "~/Scripts/sweetalert/sweetalert.min.js")
                         .IncludeDirectory("~/Content/classes", "*.js", true)
                        );
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Task Lead
Commented:
Updated my code using examples for .NET

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial