Advertisement

10.11.2008 at 11:24PM PDT, ID: 23807400 | Points: 500
[x]
Attachment Details

Flex: How to add a horizontal scrollbar to a column chart

Asked by jrwalker2 in Adobe Flex

I would like to add a horizontal scrollbar to the column chart that I have such that a specific number of column series will show at a given time and then you can scroll to see the rest. Can someone please show me how to do this? Below is the axis renderer class that I need to alter. Please help. Thanks
Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:

TriDiAxisRenderer
---------------------------
package 
{
	import flash.display.Graphics;
	import flash.display.Shape;
	import flash.geom.Rectangle;
	
	import mx.charts.AxisRenderer;
	import mx.charts.chartClasses.GraphicsUtilities;
	import mx.graphics.Stroke;
	import mx.utils.ColorUtil;
 
	public class TriDiAxisRenderer extends AxisRenderer
	{
		private var depth:Number = 20;
		private var axisShape:Shape;
		
		public function TriDiAxisRenderer()
		{
			super();
			
		}
		
		override protected function createChildren():void{
			super.createChildren();
			
			if(axisShape == null){
				axisShape = new Shape();
				addChild(axisShape);
			}
		}
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
	    {
	    	super.updateDisplayList(unscaledWidth, unscaledHeight);
	    	
	    	draw3DAxis(unscaledWidth, unscaledHeight);
	    }
	    
	    private function draw3DAxis(unscaledWidth:Number, unscaledHeight:Number):void {
	    	var baseline:Number = Number(unscaledHeight - gutters.bottom);
	    	var stroke:Stroke = this.getStyle("axisStroke");
	    	var g:Graphics = axisShape.graphics;
	    	var rc:Rectangle = new Rectangle(gutters.left,
    										baseline - depth,
    										unscaledWidth - gutters.right - gutters.left,
    										depth);
	    	
	    	g.clear();
	    	g.beginFill(stroke.color, 1);
	    	g.lineStyle(1, ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(stroke.color),-10), 1);
	    	g.moveTo(rc.x + depth, rc.y);
	    	g.lineTo(rc.right - depth, rc.y);
	    	g.lineTo(rc.right + 1, rc.y + rc.height);
	    	g.lineTo(rc.x + 1, rc.y + rc.height);
	    	g.lineTo(rc.x + depth, rc.y);
	    	g.endFill();
	    }
	    
	}//class
}//package
 
 
TriDiRenderer 
--------------------------
 
 
package 
{
	import flash.display.DisplayObject;
	import flash.display.Graphics;
	import flash.filters.DropShadowFilter;
	import flash.geom.Rectangle;
	
	import mx.charts.ChartItem;
	import mx.charts.ColumnChart;
	import mx.charts.chartClasses.ChartBase;
	import mx.charts.chartClasses.GraphicsUtilities;
	import mx.core.IDataRenderer;
	import mx.graphics.GradientEntry;
	import mx.graphics.IFill;
	import mx.graphics.IStroke;
	import mx.graphics.LinearGradient;
	import mx.graphics.RadialGradient;
	import mx.skins.ProgrammaticSkin;
	import mx.utils.ColorUtil;
 
	public class TriDiRenderer extends ProgrammaticSkin implements IDataRenderer
	{
		
		private var capHeight:Number = -3;//How the tips appear
		private var shadow:DropShadowFilter;
		
		public function TriDiRenderer()
		{
			super();
			
			shadow = new DropShadowFilter(15, 220, 0x000000, 0.4);
		}
		
		private var _data:Object;
	
		[Inspectable(environment="none")]
		public function get data():Object
		{
			return _data;
		}
	
		public function set data(value:Object):void
		{
			if (_data == value)
				return;
			_data = value;
		}
		
		// access to the governing chart.
		private function get chart():ChartBase{
			var p:DisplayObject = parent;
	        while (p && !(p is ChartBase))
	        {
	            p = p.parent;
	        }           
	        return p as ChartBase;
		}
		
		override protected function updateDisplayList(unscaledWidth:Number,
												  unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
				
			var fill:IFill;
			
			if(_data is ChartItem && _data.hasOwnProperty('fill'))
			{
				fill = _data.fill;
			}	 	
			else
			 	fill = GraphicsUtilities.fillFromStyle(getStyle('fill'));
			
			var gradientFill:LinearGradient = new LinearGradient();
    
		    var g1:GradientEntry = new GradientEntry(GraphicsUtilities.colorFromFill(fill), 0, 1);
		    var g2:GradientEntry = new GradientEntry(ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),50), 0.60, 1);
		    var g3:GradientEntry = new GradientEntry(ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),55), g2.ratio + 0.10, 1);
		    var g4:GradientEntry = new GradientEntry(GraphicsUtilities.colorFromFill(fill), 1, 1);
		      
		    gradientFill.entries = [ g1, g2, g3, g4 ];
		    
			var stroke:IStroke = getStyle("stroke");
					
			var w:Number = stroke ? stroke.weight / 2 : 0;
			
			var rc:Rectangle = new Rectangle(w, w, width - 2 * w, height - 2 * w);
			
			var g:Graphics = graphics;
			
//			if((chart as ColumnChart).type == "stacked" || (chart as ColumnChart).type == "100%"){
//				rc.top -= capHeight/2;
//			}	
			
 			g.clear();		
			g.moveTo(rc.left,rc.top);
			if (stroke)
				stroke.apply(g);
			if (fill)
				gradientFill.begin(g,rc);
			g.curveTo((rc.right-rc.left)/2, rc.top + capHeight, rc.right, rc.top);
			g.lineTo(rc.right,rc.bottom - capHeight/2);
			g.curveTo((rc.right-rc.left)/2, rc.bottom + capHeight/2, rc.left, rc.bottom - capHeight/2);
			g.lineTo(rc.left,rc.top);
			if (fill)
				gradientFill.end(g);
				
			
//			if((chart as ColumnChart).type == "clustered" || (chart as ColumnChart).type == "overlaid" ||
//				parent == (chart as ColumnChart).series[(chart as ColumnChart).series.length-1]){
//				drawCaps(rc);
//			}
			if(chart!=null)
			{
				chart.seriesFilters = [shadow];	
			}
			
		}
		
		private function drawCaps(rc:Rectangle):void {
			var stroke:IStroke = getStyle("stroke");
			var fill:IFill = GraphicsUtilities.fillFromStyle(getStyle('fill'));
			
		    var gradientFill:RadialGradient = new RadialGradient();
          
			var g1:GradientEntry = new GradientEntry(ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),60), 0, 1);
			var g2:GradientEntry = new GradientEntry(ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),40), 0.3, 1);
			var g3:GradientEntry = new GradientEntry(GraphicsUtilities.colorFromFill(fill), 1, 1);
			
			gradientFill.entries = [ g1, g2, g3 ];
			  
			gradientFill.angle = 70;
			gradientFill.focalPointRatio = 1;
		    
		    gradientFill.begin(graphics, new Rectangle(rc.left, rc.top-capHeight/2 ,rc.right, capHeight));
		    graphics.drawEllipse(rc.left, rc.top-capHeight/2 ,rc.right - stroke.weight/2, capHeight);
		    gradientFill.end(graphics);
		}
		
	}//class
}//package
[+][-]10.14.2008 at 11:35PM PDT, ID: 22718460

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10.15.2008 at 10:29PM PDT, ID: 22728277

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628