Working with Variable numbers of rows

[George SParticipant]

I am trying to build a column graph, showing sales performance for sales reps over a 13 weeks period. For a given sales rep, what percentage of his quota did he make for weeks 1 through 13. I have this coded, and working correctly. The challenge is that I want to graph this for all members of a team, which have a variable number of reps. One team might have 3 reps, one might have 7. I am returning this data from a database in JSON format. I am not displaying this like I want. Right now, I am getting a group of data. It shows weeks 1 through 13, for sales rep #1, then weeks 1 through 13 for sales rep 2, etc… I need to shift this, and I am not understanding how. I need to show all week 1 (sales rep 1, rep 2, rep 3, etc), then show week 2 (rep 1, rep 2), etc…

Keep in mind, that I will be using this for different teams, which have different numbers of sales reps. What is it that I need to change? Here is my current code.

// Set our source array to ''
        var source = {
            localdata: data,
            datatype: "json",
            root: 'rows',
            datafields: [
            { name: 'NAME', type: 'string' },
            { name: 'WK1', type: 'number' },
            { name: 'WK2', type: 'number' },
            { name: 'WK3', type: 'number' },
            { name: 'WK4', type: 'number' },
            { name: 'WK5', type: 'number' },
            { name: 'WK6', type: 'number' },
            { name: 'WK7', type: 'number' },
            { name: 'WK8', type: 'number' },
            { name: 'WK9', type: 'number' },
            { name: 'WK10', type: 'number' },
            { name: 'WK11', type: 'number' },
            { name: 'WK12', type: 'number' },
            { name: 'WK13', type: 'number' }
               ]          
             }; // SOURCE
                       
            var dataAdapter = new $.jqx.dataAdapter(source,
	      	{
			autoBind: true,
			async: false,
			downloadComplete: function () { },
			loadComplete: function () { },
			loadError: function () { }
	     	});
            
            var settings = {
			title: "Current Quarter Linearity",
			showLegend: true,
			padding: { left: 5, top: 5, right: 5, bottom: 5 },
			titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
			source: dataAdapter,
			categoryAxis:
				{
					text: 'Category Axis',
					textRotationAngle: 0,
					dataField: 'NAME',					
					showTickMarks: true,
					tickMarksInterval: Math.round(dataAdapter.records.length / 6),
					tickMarksColor: '#888888',
					unitInterval: Math.round(dataAdapter.records.length / 6),
					showGridLines: true,
					gridLinesInterval: Math.round(dataAdapter.records.length / 3),
					gridLinesColor: '#888888',
					axisSize: 'auto'
				},
			colorScheme: 'scheme05',
			seriesGroups:
				[
					{
						type: 'column',
						valueAxis:
						{
							displayValueAxis: true,
							description: 'Percentage',
							descriptionClass: 'css-class-name',
							axisSize: 'auto',
							tickMarksColor: '#888888',
							unitInterval: 20,
							minValue: 0,
							maxValue: 100
						},
						series: [
							{ dataField: 'WK1', displayText: 'Week 1' },
                            { dataField: 'WK2', displayText: 'Week 2' },
                            { dataField: 'WK3', displayText: 'Week 3' },
                            { dataField: 'WK4', displayText: 'Week 4' },
                            { dataField: 'WK5', displayText: 'Week 5' },
                            { dataField: 'WK6', displayText: 'Week 6' },
                            { dataField: 'WK7', displayText: 'Week 7' }
						  ],
                        
                        
                        bands:
                            [                              
                                { minValue: 74, maxValue: 75, color: 'green', opacity: 0.5 }
                            ]  
                        
					}                   
                
				]
                                                                                         
		};

		// setup the chart
		$('#lin_chartCurrent').jqxChart(settings);

Thanks

[HristoParticipant]

Hello George S,

Would you like to explain more detailed what you want to visualize and is it possible to give an example of the data that you recive (just sample)?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[George SParticipant]

I will upload a picture if you will tell me a site where I can host it….
What I see now is that data is grouped by sales rep. I want it grouped by week. What I mean by this, if I look at the X axis, I see my first rep week1, the next column is the first rep week 2, first rep week 3, first rep week 4, etc…then I see a space and the same thing starts for the next rep (week1, week 2, week 3, etc). I see all the weeks for one rep, then a space, then all the weeks for the next rep, etc…

What I WANT to see is data grouped by week. Meaning I want to see rep 1 week1, rep 2 week1, rep 3 week 1, rep 4 week 1. I want to see all the data for ALL rep’s week 1, then a space, then all the data for ALL rep’s week 2.

[HristoParticipant]

Hello George S,

Please, take a look at this article (the example on the end):
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-getting-started.htm?search=
And change the ‘days’ with ‘weeks’ and ‘names’ with ‘sales rep’.
If you still have difficulties and this is not desired scenario you could use this to share images: http://postimage.org/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts