Gap between bars is different

[77chuachuaParticipant]

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

[ChristopherParticipant]

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

[77chuachuaParticipant]

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);
});

[ChristopherParticipant]

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

[77chuachuaParticipant]

Hi Christopher,

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

However, thank you all the same!

[Author]

Posts