[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2008-10-11
5
Medium Priority
?
3,776 Views
Last Modified: 2009-12-14
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

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

Open in new window

0
Comment
Question by:jrwalker2
  • 2
  • 2
5 Comments
 
LVL 19

Expert Comment

by:Gary Benade
ID: 22718460
Just a suggestion, would it not be possible to just place the chart in a HBox?
0
 
LVL 1

Author Comment

by:jrwalker2
ID: 22728277
I'm sure I understand, because as the number of entries in the chart increases...the entries just become smaller and the labels on the x-axis become unreadable. If I put the chart in a HBox, wouldn't that only work if the chart grew horizontally? Please advise. Thanks
0
 
LVL 13

Accepted Solution

by:
bglodde earned 2000 total points
ID: 24306232
0
 
LVL 1

Author Comment

by:jrwalker2
ID: 24306313
Hi bglodde,

Your link is axactly what I want to accomplish, but I'd like to accomplish it using the 3D chart axis that I mention above. I am have problems with this aspect of it (connecting the two concepts). Can you please help me with this?

Thanks,
Jeffrey
0
 
LVL 13

Expert Comment

by:bglodde
ID: 24309480
If you could isolate the issues you're having into source code snippets, that would make things much easier to address.
0

Featured Post

Reclaim your office - Try the MB 660 headset now!

High level of background noise often makes it difficult for employees to concentrate fully on their jobs – or to communicate clearly on calls. The MB 660 headset helps you create a disruption free workspace.  

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
MSSQL DB-maintenance also needs implementation of multiple activities. However, unprecedented errors can hamper the database management. In that case, deploying Stellar SQL Database Toolkit ensures fast and accurate database and backup repair as wel…
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
With just a little bit of  SQL and VBA, many doors open to cool things like synchronize a list box to display data relevant to other information on a form.  If you have never written code or looked at an SQL statement before, no problem! ...  give i…

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question