jQuery UI Widgets Forums Chart Gap between bars is different

This topic contains 4 replies, has 2 voices, and was last updated by  77chuachua 7 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Gap between bars is different #89864

    77chuachua
    Participant

    Hi there,

    If I config the chart like this:
    seriesGroups
    {
    columnsGapPercent:”auto”
    type:”column”
    }
    xAxis
    {
    baseUnit:”month”
    type:”date”
    }
    There is a wired thing that the gap between February and March is significant shorter than the gap between other month.
    I had tried to adjust the “columnsGapPercent” or “seriesGapPercent”, but no use.
    Do you have any suggestions on this issue?

    Thanks

    Gap between bars is different #89869

    Christopher
    Participant

    Hi 77chuachua,

    Please provide the full code to we can test it and come up with a suggestion/solution. You can also share a demo using jsFiddle or jsEditor.

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com

    Gap between bars is different #89891

    77chuachua
    Participant

    Hi Christopher,

    Here you are:

    $(document).ready(function () {
        // prepare chart data as an array
    
        var  sampleData = [
                        { Date:"2015-01-01", George: 25},
                        { Date:"2015-02-01", George: 30},
                        { Date:"2015-03-01", George: 25},
                        { Date:"2015-04-01", George: 45},
                        { Date:"2015-05-01", George: 25},
                        { Date:"2015-06-01", George: 30},
                        { Date:"2015-07-01", George: 90},
                        { Date:"2015-08-01", George: 90},
                        { Date:"2015-09-01", George: 90},
                        { Date:"2015-10-01", George: 90},
                        { Date:"2015-11-01", George: 90},
                        { Date:"2015-12-01", George: 90},
                    ];
    				
                // prepare jqxChart settings
                var settings = {
                    title: "Fitness & exercise weekly scorecard",
                    description: "Time spent in vigorous exercise",
                    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: 'month',
                        gridLines: {visible: false},
                        tickMarks: {visible: true},
                        formatFunction: function (value) {
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            return months[value.getMonth()];
        },
                    },
                    valueAxis:
                    {
                        minValue: 0,
                        maxValue: 100,
                        unitInterval: 10,
                        title: {text: 'Time in minutes'}
                    },
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                columnsGapPercent: 30,
                                seriesGapPercent: 10,
                                series: [
                                        { dataField: 'George', displayText: 'George'}
                                    ]
                            }
                        ]
                };
        
        // setup the chart
        $('#chartContainer').jqxChart(settings);
    });
    Gap between bars is different #89913

    Christopher
    Participant

    Hi 77chuachua,

    Increase the columnsGapPercent to a bigger number, for example, 40 and the columns will be repositioned better. Another approach is to just remove the property from the settings.

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com

    Gap between bars is different #89927

    77chuachua
    Participant

    Hi Christopher,

    Increase the “columnsGapPercent” could only make it not obvious, but not fix the issue.

    However, thank you all the same!

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

You must be logged in to reply to this topic.