Problem with Spacing

[George SParticipant]

Hello,

I have a chart which displays 3 or 4 rows of data, basically for people. Each row has 3 series. I want all the data for the first person to be charted together, no spaces, then for the 2nd person, all the data (aka all 3 bars) should be touching, then a space until the 3rd person, and all 3 bars should be touching. I have played around with seriesGapPercent and columnGapPercent, and I cannot get the chart to look any different. If I have 3 people, I have 9 bars, and all 9 bars are evenly spread out across the whole chart. What I want is 3 bars, a space, 3 bars, a space, and then 3 bars. I have seen the column Series spacing demo, and I think I am using the right parameters, I just can’t get it to display properly.
Here is my code…

 // Set our source array to ''
        var source = {
            localdata: data5,
            datatype: "json",
            root: 'rows',
            datafields: [
            { name: 'TERRITORY_FIELD_RM', type: 'string' },
            { name: 'MGR_NAME', type: 'string' },
            { name: 'MYTOTAL_COUNT', type: 'number' },
            { name: 'MYACTIVE_COUNT', type: 'number' },
            { name: 'MYINACTIVE_COUNT', type: 'number' },                   
            { name: 'MYYTD_PAAS_COUNT', type: 'number' },
            { name: 'MYYTD_ON_PREM_COUNT', type: 'number' },
            { name: 'MYEXISTING_ACTIVE', type: 'number' } 
            ]  }; // SOURCE
                       
            var dataAdapter = new $.jqx.dataAdapter(source,
	      	{
			autoBind: true,
			async: false,
			downloadComplete: function () { },
			loadComplete: function () { },
			loadError: function () { }
	     	});
                
           

            // prepare jqxChart settings
            var settings1 = {
                title: "New Accounts",
                description: accountQtr,
                enableAnimations: false,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                    {
                        dataField: 'MGR_NAME',
                        unitInterval: 1,
                        axisSize: 'auto',
                        tickMarks: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        },
                        gridLines: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        }
                    },
                valueAxis:
                {
                    flip: true,
                    //unitInterval: 10,
                    minValue: 0,
                   // maxValue: 120,
                    title: { text: 'Accounts By Manager' },
                    labels: { horizontalAlignment: 'right' },
                    tickMarks: { color: '#BCBCBC' }
                },
                colorScheme: 'scheme05',
                seriesGroups:
                    [
                        {
                            showLabels: true,                          
                            type: 'stackedcolumn',                          
                            columnsMaxWidth: 30,
                            columnsMinWidth: 30,
                            skipOverlappingPoints: false, // change to true if you want to prevent adjacent columns overlap
                            orientation: 'horizontal',
                            columnsGapPercent: 5, 
                            seriesGapPercent: 5,                                                     
                            series: [
                                  { dataField: 'MYINACTIVE_COUNT', displayText: 'InActive/Greenfield On-Premise'}                           
                                ]
                        },
                        {
                            showLabels: true,                           
                            type: 'stackedcolumn',                           
                            columnsMaxWidth: 30,
                            columnsMinWidth: 30,
                            skipOverlappingPoints: false, // change to true if you want to prevent adjacent columns overlap
                            orientation: 'horizontal',
                            columnsGapPercent: 5,
                            seriesGapPercent: 5,
                            series: [                            
                                { dataField: 'MYEXISTING_ACTIVE', displayText: 'Active On-Premise'},                         
                                { dataField: 'MYYTD_ON_PREM_COUNT', displayText: 'YTD New On-Prem Wins'}
                                ]
                        },
                        
                        
                       
                        
                         {
                            showLabels: true,
                            type: 'stackedcolumn',                                                   
                            columnsMaxWidth: 30,
                            columnsMinWidth: 30,
                            skipOverlappingPoints: false, // change to true if you want to prevent adjacent columns overlap
                            orientation: 'horizontal',
                            columnsGapPercent: 5,
                            seriesGapPercent: 5,
                            series: [                                                   
                                { dataField: 'MYYTD_PAAS_COUNT', displayText:'YTD New Cloud Wins'}                         
                                ]
                        }
                    ]
            };
       
            // setup the New Accounts chart
            $('#newAccounts_chart').jqxChart(settings1); 

[Ivo ZhulevParticipant]

Hi George S,

Can you please send us a working fiddle?

Best Regards,
Ivo

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

[Author]

Posts