jqwidgets chart not rendering any data

Question

I have imported the jqwidgets script however the chart does not render. What am I missing?

<!--Placeholder for the chart-->
<div id="jqxIncidentChart" class="chart">
</div>

    /*
     * https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm
     * */
    document.addEventListener('DOMContentLoaded', (event) => {

        var incidentData = '[{"date":"2020-11-06T00:00:00Z","active":0,"expired":6},{"date":"2020-11-07T00:00:00Z","active":0,"expired":5},{"date":"2020-11-08T00:00:00Z","active":0,"expired":6},{"date":"2020-11-09T00:00:00Z","active":0,"expired":7},{"date":"2020-11-10T00:00:00Z","active":0,"expired":5},{"date":"2020-11-11T00:00:00Z","active":0,"expired":59},{"date":"2020-11-12T00:00:00Z","active":0,"expired":16},{"date":"2020-11-13T00:00:00Z","active":0,"expired":11},{"date":"2020-11-14T00:00:00Z","active":0,"expired":104},{"date":"2020-11-15T00:00:00Z","active":0,"expired":18},{"date":"2020-11-16T00:00:00Z","active":0,"expired":22},{"date":"2020-11-24T00:00:00Z","active":0,"expired":9},{"date":"2020-11-28T00:00:00Z","active":0,"expired":48},{"date":"2020-11-17T00:00:00Z","active":0,"expired":9},{"date":"2020-11-20T00:00:00Z","active":0,"expired":22},{"date":"2020-11-18T00:00:00Z","active":0,"expired":19},{"date":"2020-11-23T00:00:00Z","active":0,"expired":11},{"date":"2020-11-21T00:00:00Z","active":0,"expired":10},{"date":"2020-11-22T00:00:00Z","active":0,"expired":6},{"date":"2020-11-19T00:00:00Z","active":0,"expired":6},{"date":"2020-11-26T00:00:00Z","active":0,"expired":9},{"date":"2020-11-27T00:00:00Z","active":0,"expired":3},{"date":"2020-11-25T00:00:00Z","active":0,"expired":5}]';
        var incidentDataSource = {
            datatype: "json",
            datafields: [
                { name: 'date', type: 'date', format: 'dd.MMM.yyyy' },
                { name: 'active', type: 'number' },
                { name: 'expired', type: 'number' },
            ],
            localdata: incidentData,
            sortcolumn: 'date',
            sortdirection: 'asc'
        };
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        var incidentAdapter = new $.jqx.dataAdapter(incidentDataSource, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
        var incidentChartSettings = {
            title: "Incidents over time",
            description: "Recorded @data.Sum(s=>s.active+s.expired) incidents in @data.Count() days",
            enableAnimations: true,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
            source: incidentAdapter,
            width: 300,
            height:300,
            xAxis: {
                formatFunction: function (value) {
                    return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
                },
                dataField: 'date',
                type: 'date',
                valuesOnTicks: true,
                baseUnit: 'month',
                minValue: '@data.Min(m=>m.date).ToString("dd-mm-yyyy")',
                maxValue: '@data.Max(m=>m.date).ToString("dd-mm-yyyy")',
                tickMarks: {
                    visible: true,
                    interval: 10

                },
                unitInterval: 1,
                gridLines: {
                    visible: true,
                    step: 1,
                    color: '#9b6f71'

                },
                labels: {
                    angle: -45,
                    rotationPoint: 'topright',
                    offset: { x: 0, y: -25 }
                }
            },
            valueAxis: {
                visible: true,
                title: { text: 'Incidents per day<br/>' },
                tickMarks: { color: '#8e0a14' },
            },
            colorScheme: 'scheme04',
            seriesGroups: [{
                type: 'line',
                title: { text: 'Active Incidents' },

                toolTipFormatSettings: {
                    decimalPlaces: 0,
                    thousandsSeparator: ',',
                },
                series: [
                    { displayText: 'Active', dataField: 'active' },
                    { displayText: 'Expired', dataField: 'expired' },
                ]
            }]

        };

        $('#jqxIncidentChart').jqxChart(incidentChartSettings);
    });

Answer 1

The version that generated the chart for me is a bit different, I noted that height and width are definitely not properties of the chart.

it is finally showing the attacks against the site

I have included all the code so that anyone else can see where I get the data from. I generate the java using this code:

@inject Walter.Web.FireWall.IFireWall _fireWall
@{
var data = _fireWall.Incidents.All()
                .Where(where => where.Reported > DateTime.Now.AddYears(-1))
                .GroupBy(groupOn => groupOn.Reported.Date)
                .Select(source => new
                {
                    date = source.Key,
                    active = source.Count(w => w.Expires > DateTime.Now),
                    expired = source.Count(w => w.Expires < DateTime.Now),
                }).OrderBy(order=>order.date)
                .ToArray();          
}

<!--Placeholder for the chart-->
<div id="jqxIncidentChart" class="chart" >
</div>


<script>

    document.addEventListener('DOMContentLoaded', (event) => {

        var dataIncident = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(data))';
        var sourceIncidents =
        {
            datatype: "json",
            datafields: [
                { name: 'date' },
                { name: 'active' },
                { name: 'expired' }
            ],
            localdata: dataIncident
        };

        var dataAdapterIncidents = new $.jqx.dataAdapter(sourceIncidents);

        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];


        var incidentChartSettings = {
            title: "Incidents over time",
            description: "Recorded @data.Sum(count=>count.active+count.expired) incidents in @((int)(data.Max(max=>max.date)-data.Min(min=>min.date)).TotalDays) days",
            enableAnimations: true,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
            source: dataAdapterIncidents,
            xAxis:
            {
                dataField: 'date',
                formatFunction: function (value) {
                    return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
                },
                type: 'date',
                baseUnit: 'day',
                minValue: '@data.Min(min=>min.date).ToString("dd-MM-yyyy")',
                maxValue: '@data.Max(max=>max.date).ToString("dd-MM-yyyy")',
                valuesOnTicks: true,
                tickMarks: {
                    visible: true,
                    interval: 20,
                    color: '#BCBCBC'
                },
                unitInterval: 5,
                gridLines: {
                    visible: true,
                    interval: 5,
                    color: '#BCBCBC'
                },
                labels: {
                    angle: -45,
                    rotationPoint: 'topright',
                    offset: { x: 0, y: -25 }
                }
            },
            valueAxis:
            {

                visible: true,
                title: { text: 'Incident on day<br>' },
                tickMarks: { color: '#BCBCBC' }
            },
            colorScheme: 'scheme06',
            seriesGroups:
                [
                    {
                        type: 'line',
                        series: [
                            { dataField: 'active', displayText: 'active' },
                            { dataField: 'expired', displayText: 'expired' }
                        ]
                    }
                ]
        };
        $('#jqxIncidentChart').jqxChart(incidentChartSettings);
    });
</script>

it generates this output:

<!--Placeholder for the chart-->
<div id="jqxIncidentChart" class="chart" >
</div>


<script>

    document.addEventListener('DOMContentLoaded', (event) => {

        var dataIncident = '[{"date":"2020-11-06T00:00:00Z","active":0,"expired":6},{"date":"2020-11-07T00:00:00Z","active":0,"expired":5},{"date":"2020-11-08T00:00:00Z","active":0,"expired":6},{"date":"2020-11-09T00:00:00Z","active":0,"expired":7},{"date":"2020-11-10T00:00:00Z","active":0,"expired":5},{"date":"2020-11-11T00:00:00Z","active":0,"expired":59},{"date":"2020-11-12T00:00:00Z","active":0,"expired":16},{"date":"2020-11-13T00:00:00Z","active":0,"expired":11},{"date":"2020-11-14T00:00:00Z","active":0,"expired":104},{"date":"2020-11-15T00:00:00Z","active":0,"expired":18},{"date":"2020-11-16T00:00:00Z","active":0,"expired":22},{"date":"2020-11-17T00:00:00Z","active":0,"expired":9},{"date":"2020-11-18T00:00:00Z","active":0,"expired":19},{"date":"2020-11-19T00:00:00Z","active":0,"expired":6},{"date":"2020-11-20T00:00:00Z","active":0,"expired":22},{"date":"2020-11-21T00:00:00Z","active":0,"expired":10},{"date":"2020-11-22T00:00:00Z","active":0,"expired":6},{"date":"2020-11-23T00:00:00Z","active":0,"expired":11},{"date":"2020-11-24T00:00:00Z","active":0,"expired":9},{"date":"2020-11-25T00:00:00Z","active":0,"expired":5},{"date":"2020-11-26T00:00:00Z","active":0,"expired":9},{"date":"2020-11-27T00:00:00Z","active":0,"expired":3},{"date":"2020-11-28T00:00:00Z","active":0,"expired":48}]';
        var sourceIncidents =
        {
            datatype: "json",
            datafields: [
                { name: 'date' },
                { name: 'active' },
                { name: 'expired' }
            ],
            localdata: dataIncident
        };

        var dataAdapterIncidents = new $.jqx.dataAdapter(sourceIncidents);

        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];


        var incidentChartSettings = {
            title: "Incidents over time",
            description: "Recorded 416 incidents in 22 days",
            enableAnimations: true,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
            source: dataAdapterIncidents,
            xAxis:
            {
                dataField: 'date',
                formatFunction: function (value) {
                    return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
                },
                type: 'date',
                baseUnit: 'day',
                minValue: '06-11-2020',
                maxValue: '28-11-2020',
                valuesOnTicks: true,
                tickMarks: {
                    visible: true,
                    interval: 20,
                    color: '#BCBCBC'
                },
                unitInterval: 5,
                gridLines: {
                    visible: true,
                    interval: 5,
                    color: '#BCBCBC'
                },
                labels: {
                    angle: -45,
                    rotationPoint: 'topright',
                    offset: { x: 0, y: -25 }
                }
            },
            valueAxis:
            {

                visible: true,
                title: { text: 'Incident on day<br>' },
                tickMarks: { color: '#BCBCBC' }
            },
            colorScheme: 'scheme06',
            seriesGroups:
                [
                    {
                        type: 'line',
                        series: [
                            { dataField: 'active', displayText: 'active' },
                            { dataField: 'expired', displayText: 'expired' }
                        ]
                    }
                ]
        };
        $('#jqxIncidentChart').jqxChart(incidentChartSettings);
    });
</script>