Date format in localdata

[HangWireParticipant]

Hello!

I’m using json localdata in a stackedcolumns chart. One dataField contains dates in the format ‘dd.mm.yyyy’ for example: 01.07.2013 and I want to use it as dataField for categoryAxis. The poblem ist that only ‘.00’ is displayed instead of ‘01.07.2013’. I tried to use the type ‘date’ and also ‘string’ but that doesn’t work. When I use ‘-‘ instead of ‘.’ it is displayed correctly (but still not with dots).

Any suggestions?

[DimitarParticipant]

Hello HangWire,

Please, provide us with a sample code which we may test locally and remember to include your JSON data as well.

Best Regards,
Dimitar

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

[HangWireParticipant]

<script type="text/javascript">
$(document).ready(function(){
var testdata = [{"TEST1":"168","TEST2":"1008","TEST3":"0","DATUM":"01.03.2013"}];
var testAdapter = new $.jqx.dataAdapter({datatype: 'json', datafields: [{name:'DATUM', type: 'string'},{name: 'TEST1', type: 'float'}, {name: 'TEST2', type:'string'}, {name: 'TEST3', type:'string'}], localdata: testdata});
var test_settings = {
            title: 'testtitle',
            description: 'testdescription',
            enableAnimations: true,
            showLegend: true,
            padding: {left: 5, top: 5, right: 5, bottom: 5},
            titlePadding: {left: 90, top: 0, right: 0, bottom: 10},
            source: testAdapter,
            categoryAxis:
                    {
                        text: 'Category Axis',
                        dataField: 'DATUM',
                        textRotationAngle: 0,
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: false,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                    },
            colorScheme: 'scheme01',
            seriesGroups:
                    [
                        {
                            type: 'stackedcolumn100',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            valueAxis:
                                    {
                                        unitInterval: 10,
                                        minValue: 0,
                                        maxValue: 100,
                                        displayValueAxis: true,
                                        description: 'Value in %',
                                        axisSize: 'auto',
                                        tickMarksColor: '#888888'
                                    },
                            series: [
                                {dataField: 'TEST1', displayText: 'Not available'},
                                {dataField: 'TEST2', displayText: 'Available'},
                                {greyScale: true, dataField: 'TEST3', displayText: 'Failure'}
                            ]
                        }
                    ]
        };
$('#test-div').jqxChart(test_settings);
});
</script>
<div id='test-div' style='width:1000px; height:500px;'></div>

[DimitarParticipant]

Hi HangWire,

Here is a workaround using the categoryAxis formatFuction:

<script type="text/javascript">
    $(document).ready(function () {
        var testdata = [{ "TEST1": "168", "TEST2": "1008", "TEST3": "0", "DATUM": "01/03/2013"}];
        var testAdapter = new $.jqx.dataAdapter({ datatype: 'json', datafields: [{ name: 'DATUM', type: 'string' }, { name: 'TEST1', type: 'float' }, { name: 'TEST2', type: 'string' }, { name: 'TEST3', type: 'string'}], localdata: testdata }); var test_settings = {
            title: 'testtitle',
            description: 'testdescription',
            enableAnimations: true,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            source: testAdapter,
            categoryAxis:
                {
                    text: 'Category Axis',
                    dataField: 'DATUM',
                    textRotationAngle: 0,
                    showTickMarks: true,
                    tickMarksInterval: 1,
                    tickMarksColor: '#888888',
                    unitInterval: 1,
                    showGridLines: false,
                    gridLinesInterval: 1,
                    gridLinesColor: '#888888',
                    axisSize: 'auto',
                    formatFunction: function (value) {
                        var date = new Date(value);
                        var d = date.getDate();
                        var m = date.getMonth();
                        var y = date.getFullYear();
                        return (m + 1) + "." + d + "." + y;
                    }
                },
            colorScheme: 'scheme01',
            seriesGroups:
                [
                    {
                        type: 'stackedcolumn100',
                        columnsGapPercent: 100,
                        seriesGapPercent: 5,
                        valueAxis:
                                {
                                    unitInterval: 10,
                                    minValue: 0,
                                    maxValue: 100,
                                    displayValueAxis: true,
                                    description: 'Value in %',
                                    axisSize: 'auto',
                                    tickMarksColor: '#888888'
                                },
                        series: [
                            { dataField: 'TEST1', displayText: 'Not available' },
                            { dataField: 'TEST2', displayText: 'Available' },
                            { greyScale: true, dataField: 'TEST3', displayText: 'Failure' }
                        ]
                    }
                ]
        };
        $('#test-div').jqxChart(test_settings);
    });
</script>

Best Regards,
Dimitar

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

[HangWireParticipant]

Thank you very much.

I noticed that the month and day value is missing a leading 0.
So here is my fix if anyone got the same problem with formatFunction:

                        formatFunction: function(value) {
                            var date = new Date(value * 1000);
                            var d = date.getDate();
                            var m = date.getMonth() + 1;
                            var y = date.getFullYear();
                            return (d < 10 ? '0' + d : d) + "." + (m < 10 ? ('0' + m).slice(-2) : m) + "." + y;
                        }

[Author]

Posts