ASP.NET Core 2.1 MVC application - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: #bargauge, javascript bargauge, jquery bargauge, jqwidgets bargauge, TagHelpers

This topic contains 2 replies, has 2 voices, and was last updated by LightspeedNZ 6 years, 6 months ago.

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

Author

ASP.NET Core 2.1 MVC application Posts

August 22, 2018 at 4:47 am ASP.NET Core 2.1 MVC application #101638

Participant

Hi guys,

I’m new here and have an ASP.NET Core 2.1 MVC application that I am trying to get working with JQWidgets. I have followed all the instructions from this link (https://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp-net-core/mvc-tag-helpers.htm) but when I access this page …

@model IEnumerable<SkyNet.Models.ExchangeRates>

@{
    ViewData["Title"] = "Index";
}

@{
    List<string> ranges = new List<string>()
    {
    "{ startValue: 0, endValue: 200, color: \"#000000\", opacity: 0.5 }",
    "{ startValue: 200, endValue: 250, color: \"#000000\", opacity: 0.3 }",
    "{ startValue: 250, endValue: 300, color: \"#000000\", opacity: 0.1 }"
    };
        List<double> barGaugeValues = new List<double>()
    {
    102, 115, 130, 137
    };
}

<label>ASP .NET MVC Core BarGauge Tag Helper Example</label><br />
<jqx-bargauge colorScheme="scheme02" ranges="ranges" values="barGaugeValues" width="600" height="600" max="150"></jqx-bargauge>

<h2>Exchange Rates</h2>

<p>
    <a class="btn btn-default btn-sm" asp-action="Create">Create New</a>
</p>

All I get is this result.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index - SkyNet</title>
        <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap-cyborg.css" />

        <!-- add the jQWidgets base styles and one of the theme stylesheets -->
        <link rel="stylesheet" href="/lib/jqwidgets/styles/jqx.base.css" />
        <link rel="stylesheet" href="/lib/jqwidgets/styles/jqx.darkblue.css" />

        <link rel="stylesheet" href="/css/site.css" />
</head>
<body>
    <div class="container body-content">
        <label>ASP .NET MVC Core BarGauge Tag Helper Example</label><br />
        <jqx-bargauge colorScheme="scheme02" ranges="ranges" values="barGaugeValues" width="600" height="600" max="150"></jqx-bargauge>

        <h2>Exchange Rates</h2>

        <p>
            <a class="btn btn-default btn-sm" href="/ExchangeRates/Create">Create New</a>
        </p>

    </div>
        <script src="/lib/jquery/dist/jquery.js"></script>
        <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
        
        <!-- add the jQWidgets framework -->
        <script type="text/javascript" src="/lib/jqwidgets/jqxcore.js"></script>
        <!-- add one or more jQWidgets widgets -->
        <script type="text/javascript" src="/lib/jqwidgets/jqx-all.js"></script>

        <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
</body>
</html>

Any idea what I am doing wrong?

Many thanks, Stuart

August 24, 2018 at 7:26 am ASP.NET Core 2.1 MVC application #101695

Hristo

Participant

Hello Stuart,

I tested this example and it seems to work fine.
https://www.jqwidgets.com/asp.net-core-mvc-tag-helpers/asp.net-core-mvc-bargauge-tag-helper/index.htm#https://aspcore.jqwidgets.com/mvc/TagHelpers/BarGauge
Could you clarify it? Is there any error message?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

October 10, 2018 at 11:10 pm ASP.NET Core 2.1 MVC application #102343

LightspeedNZ

Participant

Hi guys,

For those interested in the fix for this, it is important that you have the JavaScript files in the head of the application not the footer as usual.

I had to add the following to the <head> section of the _Layout.cshtml file to make this work.

        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>

        <script src="~/lib/jqwidgets/jqxcore.js"></script>
        <script src="~/lib/jqwidgets/jqxdata.js"></script>
        <script src="~/lib/jqwidgets/jqxdraw.js"></script>

Then this is the code I used on the Index.cshtml page for accessing the chart.

<script src="~/lib/jqwidgets/jqxchart.js"></script>

@model IEnumerable<SkyNet.Models.ExchangeRateHistories>

@{
    ViewData["Title"] = "Index";

    DateTime minDate = DateTime.Now.AddDays(-80);
    DateTime maxDate = DateTime.Now;

    List<SkyNet.Models.ExchangeRateHistories> myList = Model
        .Where(e => e.ExchangeRate.Name == "AUD" && e.Date > minDate)
        .Select(e=> new ExchangeRateHistories { Date = e.Date, ActualRate = e.ActualRate, Dvtrate = e.Dvtrate })
        .ToList();
}

<h2>Exchange Rate History</h2>

<jqx-chart style="width: 850px; height: 500px;" title="AUD" description="Exchange Rate" source="myList">
    <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
    </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Exchagne Rate Value" axis-size="auto">
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
    <jqx-chart-series-groups>
        <jqx-chart-serie-group type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='ActualRate' display-text='Exchange Rate' line-width="1" line-width-selected="1"></jqx-chart-serie>
                <jqx-chart-serie datafield='Dvtrate' display-text='DVT Rate' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
        </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Hope this helps anyone else that gets caught with this problem.

Author

Posts

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

You must be logged in to reply to this topic.