Link to home
Start Free TrialLog in
Avatar of Crystal Rouse
Crystal RouseFlag for United States of America

asked on

Using HighCharts and the Chart does not render.

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)
                        );
ASKER CERTIFIED SOLUTION
Avatar of Crystal Rouse
Crystal Rouse
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial