Avatar of Crystal Rouse
Crystal Rouse
Flag 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)
                        );
C#* asp.net core mvcJavaScriptJSON

Avatar of undefined
Last Comment
Crystal Rouse

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Crystal Rouse

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy