jQuery UI Widgets Forums Chart Date not showing on xAxis

This topic contains 3 replies, has 2 voices, and was last updated by  sonicviz 8 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Date not showing on xAxis #75318

    sonicviz
    Participant

    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:
    weight 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’,
    weight2

    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.

    • This topic was modified 8 years, 5 months ago by  sonicviz.
    • This topic was modified 8 years, 5 months ago by  sonicviz.
    Date not showing on xAxis #75321

    sonicviz
    Participant

    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);
            });
    
    Date not showing on xAxis #75327

    Dimitar
    Participant

    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/

    Date not showing on xAxis #75332

    sonicviz
    Participant

    kk, ty

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

You must be logged in to reply to this topic.