Date not showing on xAxis

[sonicvizParticipant]

Hi,
I’m testing JQWidgets for a project.
It’s going well but I’ve run into a problem with the chart display.

Here’s the javascript (dynamically generated from Php and MySql)

jQuery(document).ready(function () {
// prepare chart data
var sampleData = [{Date:2015-08-11,Weight:-5},{Date:2015-08-17,Weight:3},{Date:2015-08-18,Weight:-8},{Date:2015-08-23,Weight:-2},{Date:2015-08-25,Weight:-3},{Date:2015-08-26,Weight:2},{Date:2015-08-28,Weight:-3}];
// prepare jqxChart settings
var settings = {
title: “Weight”,
description: “Weight difference”,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
xAxis:
{
dataField: ‘Date’,
type: ‘date’,
baseUnit: ‘day’,
valuesOnTicks: false,
unitInterval: 1,
gridLines: {
visible: true,
interval: 1,
color: ‘#BCBCBC’
}
},
valueAxis:
{
minValue: -15,
maxValue: 15,
unitInterval: 1,
title: {text: ‘Weight Difference’},
gridLines : {visible: false},
labels:
{
horizontalAlignment: ‘right’,
formatSettings:
{
decimalPlaces: 1
}
}
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘line’,
series: [
{ dataField: ‘Weight’, displayText: ‘Weight’}
]
}
]
};

// select the chartContainer DIV element and render the chart.
jQuery (‘#chartContainer’).jqxChart(settings);
});

And here’s the chart:

If I remove the xAxis type = date the chart shows the data but xaxis is messed up strange dates going back to 1975 onwards.
eg: above code but with //type: ‘date’,

How do I get this to interpret the date correctly?
Date in {Date:2015-08-11,Weight:-5}, is comes from a standard_date routine of mysql to truncate the normal datetime to just the date portion
I tried a formatFunction but does not seem to recognise anything. Also can’t find any documentation on formatFunction, just a one line reference in the docs.

Also, what would you recommend as settings for the xAxis labeling that would be readable?

Any help appreciated, ty.

[sonicvizParticipant]

I solved it myself, through trial and error.
The docs could use a few more comprehensive examples with different date formats imo.

fwiw I had to put the dates in quotes (why?) and use a dataAdaptor as it doesn’t seem to work without it.

        jQuery(document).ready(function () {
            // prepare chart data             
 		var data = [{Date: "2015-08-11 ",Weight:-5},{Date: "2015-08-17 ",Weight:3},{Date: "2015-08-18 ",Weight:-8},{Date: "2015-08-23 ",Weight:-2},{Date: "2015-08-25 ",Weight:-3},{Date: "2015-08-26 ",Weight:2},{Date: "2015-08-28 ",Weight:-3}];
            var trendsource = {
                datatype: "json",
                datafields: [{
                    name: 'Date', type: 'date', format: 'yyyy-MM-dd'
                }, {
                    name: 'Weight', type: 'float'
                }],
                localdata: data
            };

            var trenddataAdapter = new jQuery.jqx.dataAdapter(trendsource, {
                async: false,
                loadComplete: function (records) { },
                autoBind: true,
                loadError: function (xhr, status, error) {
                    alert('Error loading "' + source.url + '" : ' + error);
                }
            });                
            // prepare jqxChart settings
            var settings = {
                title: "Weight",
                description: "Weight difference",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: trenddataAdapter,
                xAxis:
                {
                    dataField: 'Date',
                    type: 'date',
                    baseUnit: 'day',
//                    formatFunction: function (value) {
//                        var date = new Date(value);
//                        return  date.GetDate() + "-" + date.getMonth();
//                    },
                    valuesOnTicks: true,
                    unitInterval: 7,
                    gridLines: {
                        visible: false,
                        interval: 1,
                        color: '#BCBCBC'
                    }
                },
                valueAxis:
                {
                    minValue: -15,
                    maxValue: 15,
                    unitInterval: 1,
                    title: {text: 'Weight Difference'},
                    gridLines : {visible: false},   
                    labels:
                    {
                        horizontalAlignment: 'right',
                        formatSettings:
                        {
                            decimalPlaces: 1
                        }
                    }
                },                
                colorScheme: 'scheme01',
                seriesGroups:
                [
                    {
                        type: 'line',                  
                        series: [
                                { dataField: 'Weight', displayText: 'Weight'}
                            ]
                    }
                ]
            };
            
            // select the chartContainer DIV element and render the chart.
            jQuery ('#chartContainer').jqxChart(settings);
        });

[DimitarParticipant]

Hi sonicviz,

Quotes are necessary, because for JavaScript 2015-08-11 is 2015 – 8 – 11 (2015 minus 8 minus 11), which is not a valid date. Except in some very simple cases, the data adapter plug-in is necessary to populate jqxChart (and other widgets) with data. You can learn more about it here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[sonicvizParticipant]

kk, ty

[Author]

Posts