jQuery UI Widgets Forums ASP .NET MVC ASP .NET CORE Charts Uncaught ReferenceError: $ is not defined

This topic contains 3 replies, has 3 voices, and was last updated by  jefryarch 1 year ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • PawelKanarek
    Participant

    Hi everyone!
    I have problems with presenting charts on ASP.NET CORE 2.0, using MVC.

    I’ve installed yours product (followed this instruction on github).

    So, firstly i added nuget https://www.nuget.org/packages/Chart.AspNetCore.Mvc/ to my existing project, updated _ViewImports.cshtml, then i rebuild solution and finally added a new chart object.

    Sadly i can’t see chart on the screen, there is some JS error with message “Uncaught ReferenceError: $ is not defined” as seen on this screenshot screenshot

    This is my Model

    
        public class ChartDataItem
        {
            public int Keith
            {
                get;
                set;
            }
            public int Erica
            {
                get;
                set;
            }
            public int George
            {
                get;
                set;
            }
            public string Day
            {
                get;
                set;
            }
        }
    

    This is my Index method

    
            public async Task<IActionResult> Index()
            {
                return View(new List<ChartDataItem>()
                {
                    new ChartDataItem() { Day="Monday", Keith = 30, Erica = 15, George=25 },
                    new ChartDataItem() { Day="Tuesday", Keith = 25, Erica = 25, George=30 },
                    new ChartDataItem() { Day="Wednesday", Keith = 30, Erica = 20, George=25 },
                    new ChartDataItem() { Day="Thursday", Keith = 35, Erica = 25, George=45 },
                    new ChartDataItem() { Day="Friday", Keith = 20, Erica = 20, George=25 },
                    new ChartDataItem() { Day="Saturday", Keith = 30, Erica = 20, George=30 },
                    new ChartDataItem() { Day="Sunday", Keith = 60, Erica = 45, George=90 }
                });
            }
    

    and finally this is my view

    
    @model IEnumerable<MeteoWww.Models.ChartDataItem>
    @using jQWidgets.AspNetCore.Mvc.TagHelpers;
    @{
        ViewData["Title"] = "Index";
    
        Padding padding = new Padding() { Left = 5, Top = 5, Right = 35, Bottom = 5 };
        Padding titlePadding = new Padding() { Left = 90, Top = 0, Right = 0, Bottom = 10 };
        Rectangle legendPosition = new Rectangle() { Left = 520, Top = 140, Width = 100, Height = 100 };
        FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    }
    <div class="example-description">ASP .NET MVC Chart Line Series Example</div><br />
    <jqx-chart style="width: 850px; height: 500px;" color-scheme="scheme02" padding="padding" title-padding="titlePadding" title="Fitness & exercise weekly scorecard" description="Time spent in vigorous exercise" show-legend="true" legend-position="legendPosition" source="Model">
        <jqx-chart-x-axis datafield="Day" show-grid-lines="true"></jqx-chart-x-axis>
        <jqx-chart-series-groups>
            <jqx-chart-serie-group show-labels="true" columns-gap-percent="50" series-gap-percent="0" type=@SerieType.Line>
                <jqx-chart-value-axis axis-size="auto" display-value-axis="true" description="Time in minutes" tick-marks-color="#888888" min-value="0" max-value="100" unit-interval="10"></jqx-chart-value-axis>
                <jqx-chart-series>
                    <jqx-chart-serie symbol-type="square" datafield='Keith' display-text='Keith'></jqx-chart-serie>
                    <jqx-chart-serie symbol-type="square" datafield='Erica' display-text='Erica'></jqx-chart-serie>
                    <jqx-chart-serie symbol-type="square" datafield='George' display-text='George'></jqx-chart-serie>
                </jqx-chart-series>
            </jqx-chart-serie-group>
        </jqx-chart-series-groups>
    </jqx-chart>
    

    Can you guys help me to solve this error? You’ve made a great work on those widgets and it would be awesome to use them in my project.

    • This topic was modified 3 years, 9 months ago by  PawelKanarek.

    PawelKanarek
    Participant

    Any ideas? I think i did not install some javascripts…

    But i don’t see anywhere complete instruction how to install those charts for total newbie like i’m. I followed only this instruction and i think this is to little to activate those charts.


    Peter Stoev
    Keymaster

    Hi Pawel,

    The installation instructions are available here: https://www.jqwidgets.com/asp.net-core-mvc-tag-helpers-documentation/.

    $ is undefined means that jQuery reference is not available in the code.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com


    jefryarch
    Participant

    Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function, it will endup throwing this $ is not defined error . This usually indicates that jQuery is not loaded and JavaScript does not recognize the $. Even with $(document).ready , $ is still going to be undefined because jquery hasn’t loaded yet.

    To solve this error:

    Load the jQuery library at the beginning of all your javascript files/scripts which uses $ or jQuery, so that $ can be identified in scripts .

    There can be multiple other reasons for this issue:

    * Path to jQuery library you included is not correct
    * The jQuery library file is corrupted
    * Working offline
    * Conflict with Other Libraries

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.