jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • October 10, 2018 at 11:10 pm in reply to: ASP.NET Core 2.1 MVC application 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 1 post (of 1 total)