ASP .NET CORE Charts Uncaught ReferenceError: $ is not defined

[PawelKanarekParticipant]

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

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.

[PawelKanarekParticipant]

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 StoevKeymaster]

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

[jefryarchParticipant]

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

[thinsysParticipant]

Are you a asp programmer? use thin client and enjoy

[decorsanthuongParticipant]

https://decorsanthuong.com/ là trang thông tin cập nhật thường xuyên về các kiểu mẫu, xu hướng và tổng hợp những mẹo vặt, thủ thuật mới nhất xoay quanh việc trang trí sân thượng.
Thông tin Liên Hệ:
Địa Chỉ: P. Hào Nam, Chợ Dừa, Đống Đa, Hà Nội, Việt Nam
Điện Thoại: 0876318489
Website: https://decorsanthuong.com/
Email: decorsanthuong@gmail.com
Social Media
Twitter: https://twitter.com/decorsanthuong
Reddit: https://www.reddit.com/user/decorsanthuong
Linkedin: https://www.linkedin.com/in/decorsanthuong/
Youtube: https://www.youtube.com/@decorsanthuong/about
Twitch: https://www.twitch.tv/decorsanthuong/about

[thenexttechParticipant]

ASP .NET CORE Charts Uncaught ReferenceError: $ is not defined” indicates a common issue encountered when attempting to utilize jQuery within an ASP .NET Core application. This error typically occurs when the jQuery library is not properly loaded or referenced in the project. To resolve this issue, ensure that the jQuery library is included and correctly referenced in the HTML file or layout view where the ASP .NET Core Charts are being implemented. You can do this by either adding a CDN link to the jQuery library or by including the jQuery script file locally in your project. Once jQuery is properly loaded, the “Uncaught ReferenceError: $ is not defined” error should be resolved, allowing you to successfully integrate ASP .NET Core Charts with jQuery functionality.
FedEx operational delay
Snapchat premium app
Walmart call out number
Apps like moneylion
Best youtube video downloader

[Author]

Posts