wrong date axis

[pcesar12Participant]

hello

my input from php is

[{“date”:”2015-01-06″,”pmq1″:”85.2085″,”pmq2″:”1.0455″,”pmq3″:”85.9781″,”pmq4″:”0.5500″},{“date”:”2015-01-07″,”pmq1″:”92.4720″,”pmq2″:”0.9764″,”pmq3″:”95.0043″,”pmq4″:”0.5622″},{“date”:”2015-01-08″,”pmq1″:”86.1469″,”pmq2″:”1.0059″,”pmq3″:”87.2167″,”pmq4″:”0.5756″},{“date”:”2015-01-09″,”pmq1″:”75.7252″,”pmq2″:”1.4056″,”pmq3″:”74.5004″,”pmq4″:”0.6620″},{“date”:”2015-01-10″,”pmq1″:”87.4681″,”pmq2″:”1.0074″,”pmq3″:”88.4216″,”pmq4″:”0.5006″},{“date”:”2015-01-11″,”pmq1″:”40.9536″,”pmq2″:”0.9957″,”pmq3″:”40.9014″,”pmq4″:”0.7093″},{“date”:”2015-01-12″,”pmq1″:”35.3280″,”pmq2″:”1.5927″,”pmq3″:”37.4007″,”pmq4″:”0.9620″},{“date”:”2015-01-13″,”pmq1″:”41.3660″,”pmq2″:”1.6869″,”pmq3″:”42.9727″,”pmq4″:”1.1875″},{“date”:”2015-01-14″,”pmq1″:”63.2406″,”pmq2″:”1.1974″,”pmq3″:”72.5304″,”pmq4″:”0.8698″},{“date”:”2015-01-15″,”pmq1″:”52.8944″,”pmq2″:”1.8240″,”pmq3″:”63.5543″,”pmq4″:”0.9252″},{“date”:”2015-01-16″,”pmq1″:”86.2875″,”pmq2″:”1.7335″,”pmq3″:”90.8297″,”pmq4″:”0.5457″},{“date”:”2015-01-17″,”pmq1″:”89.8764″,”pmq2″:”1.0710″,”pmq3″:”93.0968″,”pmq4″:”0.5026″},{“date”:”2015-01-18″,”pmq1″:”63.7766″,”pmq2″:”1.1175″,”pmq3″:”74.2448″,”pmq4″:”0.6109″},{“date”:”2015-01-19″,”pmq1″:”82.5361″,”pmq2″:”1.2023″,”pmq3″:”87.9244″,”pmq4″:”0.7334″},{“date”:”2015-01-20″,”pmq1″:”54.2319″,”pmq2″:”1.5123″,”pmq3″:”64.8562″,”pmq4″:”0.8726″}]

but in my chart display wrong value. lock this picture.

why my date show one day offset….

$(document).ready(function () {

    function getUrlParameter(sParam)
    {
        var sPageURL = window.location.search.substring(1);
        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < sURLVariables.length; i++)
        {
            var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == sParam)
            {
                return sParameterName[1];
            }
        }
    }

    var site = getUrlParameter('site');

    $( "#titulo" ).text( "Detalhe do site: "+ site );

    $url = 'query/view_site.php?tech=WCDMA&r=SUL&site='+site;

        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'date'},
                { name: 'pmq1'},
                { name: 'pmq2'},
                { name: 'pmq3'},
                { name: 'pmq4'}
            ],
            url: $url
        };

        var dataAdapter = new $.jqx.dataAdapter(source,
            {
                autoBind: true,
                async: false,
                downloadComplete: function () { },
                loadComplete: function () { },
                loadError: function () { }
            });
			
			console.log(dataAdapter);

        // prepare jqxChart settings
        var settings = {
            title: "Acessibilidade Voz e Dados",
            description:'',
            showLegend: true,
            padding: { left: 10, top: 5, right: 10, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            source: dataAdapter,
            xAxis:
            {
                dataField: 'date',
                type: 'date',
                baseUnit: 'day',
                showTickMarks: true,
                tickMarksInterval: 1,
                tickMarksColor: '#888888',
                unitInterval: 1,
                gridLinesColor: '#888888',
                valuesOnTicks: true,
                textRotationAngle: -45,
                textRotationPoint: 'topright',
                textOffset: {x: 0, y: -20},
			formatFunction: function (value) {
							var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                            return (value.getDate() + '-' + months[value.getMonth()]);
	                      }
            },
            colorScheme: 'scheme02',
            seriesGroups:
                [
                    {
                        type: 'line',
                        valueAxis:
                        {
                            unitInterval: 1,
                            axisSize: 'auto',
                            displayValueAxis: true,
                            tickMarksColor: '#888888',
                            description: "Acessibilidade"
                        },
                        series: [
                            { dataField: 'pmq1', displayText: 'ACV' },
                            { dataField: 'pmq3', displayText: 'ACD' }
                        ]
                    }
                ]
        };
        // setup the chart
        $('#chartContainer').jqxChart(settings);

    var settings2 = {
        title: "Taxa de Queda Voz e Dados",
        description:'',
        enableAnimations: true,
        showLegend: true,
        padding: { left: 10, top: 5, right: 10, bottom: 5 },
        titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
        source: dataAdapter,
        xAxis:
        {
            dataField: 'date',
            type: 'date',
            baseUnit: 'day',
            showTickMarks: true,
            tickMarksInterval: 1,
            tickMarksColor: '#888888',
            unitInterval: 1,
            gridLinesColor: '#888888',
            valuesOnTicks: true,
            textRotationAngle: -90,
            textRotationPoint: 'topright',
            textOffset: {x: 0, y: -20},
			formatFunction: function (value) {
							var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                            return (value.getDate() + '-' + months[value.getMonth()]);
	                      }
        },
        colorScheme: 'scheme02',
        seriesGroups:
            [
                {
                    type: 'line',
                    valueAxis:
                    {
                        unitInterval: 1,
                        axisSize: 'auto',
                        displayValueAxis: true,
                        tickMarksColor: '#888888',
                        description: "Taxa de Queda"
                    },
                    series: [
                        { dataField: 'pmq2', displayText: 'TQL' },
                        { dataField: 'pmq4', displayText: 'TQD' }
                    ]
                }
            ]
    };
    // setup the chart
    $('#chartContainer2').jqxChart(settings2);
	
            $('#jqxtabs').jqxTabs({ width: '100%', height: '100%', position: 'top'});
            $('#settings div').css('margin-top', '10px');

});

[Peter StoevKeymaster]

Hi pcesar12,

The issue here is how you try to load Dates. The data is provided as String which contains Year, Month and Day part. It does not however contain the Time-Zone. This means that when your String is turned into JavaScript Date Object, the Javascript Date Object will be in Local Time. This leads to the results which you see. The solution is to include the Time-Zone information in your Server Response.

Best Regards,
Peter Stoev

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

[Author]

Posts