jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts

  • 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.

Viewing 1 post (of 1 total)