Solved

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

Posted on 2008-10-11
5
3,722 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 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

Register Today - IoT Current and Future Threats

Are you prepared to protect your organization from current and future IoT Threats?  Join our Wi-Fi expert in episode three of our webinar series for a look at the current state of Wi-Fi IoT and what may lie ahead. Register for our live webinar on April 20th at 9 am PDT!

Question has a verified solution.

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

Suggested Solutions

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…
Building a cohesive image for your brand is vital to making an impression on consumers. When the economy is tough, brands do better than unbranded  products. This can have a huge impact on your long-term profits, as the economy goes up and down.
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

680 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