Search code examples
javascriptjqueryjqplot

jqplot xaxis not starting from the given hour

The xaxis being rendered does not start from the given hour in the data.

PFB the JSFiddle for reference

https://jsfiddle.net/sonal215/6Lg9f5dx/

the code is as follows:

$(document).ready(function(){

var l1 = [['5/17/2016 10 AM', 78], ['5/17/2016 11 AM', 34], ['5/17/2016 12 PM', 67], ['5/17/2016 1 PM' , 18], ['5/17/2016 2 PM' , 33],['5/17/2016 3 PM', 7],['5/17/2016 4 PM', 13],['5/17/2016 5 PM' , 73],['5/17/2016 6 PM' , 93],['5/17/2016 7 PM' , 43],['5/17/2016 8 PM' , 53],['5/17/2016 9 PM' , 11],['5/17/2016 10 PM' , 83],['5/17/2016 11 PM' , 23]];


targetPlot = $.jqplot('targetAvailability', [l1], {
            seriesDefaults:{
                showMarker: false,
                fill: true,

            },
            tickInset: 0,
            axes: {
                xaxis:
                {
                    renderer:$.jqplot.DateAxisRenderer,
                    tickRenderer:$.jqplot.AxisTickRenderer,
                    tickOptions:
                    {
                        showGridline: false,
                        fontSize: '11px',
                        fontFamily: 'CiscoSansTTLight' ,

                    },
                    tickInterval: '8 hour',
                    min: '5/17/2016 11 AM',

                },
                yaxis: {
                    tickOptions:
                    {
                        fontSize: '11px',
                        fontFamily: 'CiscoSansTTLight' ,
                    },
                    min: 0,
                    max: 100,
                    tickInterval: 25
                }
            },


            cursor: {
                show: true,
                zoom: true,
                showTooltip: false
            }
        });   //end of targetPlot


}); //end of document ready

I tried changing the tickInterval to 6 hour, the x-axis then starts rendering from 6:00. i am unable to make out the relation between tickInterval and starting point of ticks. Please help

Solution

  • You should remove the tickInterval and set min and max points definition for the xaxis:

    xaxis:
{
    min:'5/17/2016 10 AM',
    max:'5/17/2016 11 PM',
    ...rest of the code

    I've updated your Fiddle with a working example:

    https://jsfiddle.net/6Lg9f5dx/4/

    If you want to keep the tickInterval, remove the max definition and use only min.