Solved

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

Posted on 2008-10-11
5
3,732 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 500 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

Free eBook: Backup on AWS

Everything you need to know about backup and disaster recovery with AWS, for FREE!

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…
Changing a few Outlook Options can help keep you organized!
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

740 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