jQuery UI Widgets Forums Getting Started Incorrect X-Axis labels

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 7 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Incorrect X-Axis labels #95883

    Pix
    Participant

    Dears,

    When i am displaying data in a line chart, the same date is repeated multiple times even thought it is present only once in the data set.

    Data Set:
    [{“stat_date”:”2017-09-02″,”total_success”:”0″,”total_fail”:”0″,”total_requests”:”0″,”success_rate”:”0.0000″},
    {“stat_date”:”2017-09-03″,”total_success”:”35262″,”total_fail”:”7653″,”total_requests”:”42915″,”success_rate”:”82.1671″},
    {“stat_date”:”2017-09-04″,”total_success”:”11754″,”total_fail”:”2551″,”total_requests”:”14305″,”success_rate”:”82.1671″},
    {“stat_date”:”2017-09-05″,”total_success”:”11754″,”total_fail”:”2551″,”total_requests”:”14305″,”success_rate”:”82.1671″},
    {“stat_date”:”2017-09-06″,”total_success”:”11754″,”total_fail”:”2551″,”total_requests”:”14305″,”success_rate”:”82.1671″},
    {“stat_date”:”2017-09-07″,”total_success”:”0″,”total_fail”:”0″,”total_requests”:”0″,”success_rate”:”0.0000″}]

    Partial Code:
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘stat_date’,type: ‘date’,format: ‘yyyy-MM-dd’},
    { name: ‘total_success’,type: ‘number’},
    { name: ‘total_fail’,type: ‘number’},
    { name: ‘total_requests’,type: ‘number’},
    { name: ‘success_rate’,type: ‘number’}
    ],
    cache: false,
    id: ‘stat_date’,
    url: php_link
    };

    var settings = {
    title: ‘Stats’,
    description: “”,
    enableAnimations: true,
    animationDuration: 500,
    enableAxisTextAnimation: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 20, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    showToolTips: true,
    xAxis:
    {
    dataField: ‘stat_date’,
    valuesOnTicks:’true’,
    type:’date’,
    formatFunction: function formatDate(value) {
    var myReturnValue=(value.getDate().toString()+’-‘+month[value.getMonth()]+’-‘+value.getFullYear().toString());
    return myReturnValue;
    },
    rangeSelector: {
    serieType: ‘area’,
    valuesOnTicks:’true’,
    formatFunction: function formatDate(value) {
    var myReturnValue=(value.getDate().toString()+’-‘+month[value.getMonth()]+’-‘+value.getFullYear().toString());
    return myReturnValue;
    },
    padding: { /*left: 0, right: 0,*/ top: 20, bottom: 0 },

    backgroundColor: ‘white’,
    size: 110,
    gridLines: {visible: false}
    },
    gridLines: {
    visible: false,
    interval: 3,
    color: ‘#BCBCBC’
    },
    labels: {
    //step:2,
    angle: -45,
    rotationPoint: ‘topright’,
    offset: { x: 0, y: -25 }
    }

    },
    colorScheme: ‘scheme01’,
    seriesGroups:
    [
    { unitInterval: 1,
    type: ‘line’,
    columnsGapPercent: 100,
    seriesGapPercent: 5,
    toolTipFormatSettings: { thousandsSeparator: ‘,’ },
    toolTipFormatFunction: toolTipCustomFormatFn,
    valueAxis:
    {flip: false,
    minValue: 0,
    formatSettings: { decimalPlaces: 0, decimalSeparator: ‘.’,thousandsSeparator: ‘,’},
    description: ‘Requests’,
    displayValueAxis: true
    },
    series: [
    { dataField: ‘total_requests’, displayText: ‘Total Requests’, opacity: 1, lineWidth: 2 },
    { dataField: ‘total_success’, displayText: ‘Successful Requests’, opacity: 1, lineWidth: 2 },
    { dataField: ‘total_fail’, displayText: ‘Failed Requests’, opacity: 1, lineWidth: 2}
    ]
    },
    { unitInterval: 1,
    type: ‘line’,
    columnsGapPercent: 100,
    seriesGapPercent: 5,
    toolTipFormatSettings: { thousandsSeparator: ‘,’ },
    toolTipFormatFunction: toolTipCustomFormatFn,
    valueAxis:
    {flip: false,
    minValue: 0,
    maxValue: 100,
    formatSettings: { decimalPlaces: 2, decimalSeparator: ‘.’,thousandsSeparator: ‘,’},
    description: ‘Success Rate (%)’,
    displayValueAxis: true
    },
    series: [
    { dataField: ‘success_rate’, displayText: ‘Success Rate (%)’, opacity: 1, lineWidth: 2}
    ]
    }
    ]
    };

    $(‘#chart’).jqxChart(settings);
    var chart = $(‘#chart’).jqxChart(‘getInstance’);

    The X-axis is displaying the below Labels:
    1-Sep-2017
    1-Sep-2017(shouldn’t not be there)
    2-Sep-2017
    3-Sep-2017
    4-Sep-2017
    5-Sep-2017
    6-Sep-2017
    6-Sep-2017(shouldn’t not be there)

    Also if I select only data for 5 and 7 September:
    X-axis will repeat 5 September multiple times, then 6 September multiple times.

    I also noticed that the values are not aligned with the date labels.

    Kindly support on the way forward.

    Incorrect X-Axis labels #95893

    Peter Stoev
    Keymaster

    Prepared a sample: http://jsfiddle.net/f5gattv8/. No such issue with current version.

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

You must be logged in to reply to this topic.