Solved

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

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

Save on storage to protect fatherhood memories

You're the dad who has everything. This Father's Day, make sure your family memories are protected. My Passport Ultra has automatic backup and password protection to keep your cherished photos and videos safe. With up to 3TB, you have plenty of room to hold the adventures ahead.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Advanced Datagrid with checkbox 4 299
AS3 Image Edit Package 3 552
How do I load vector graphics with Actionscript 3.0? 3 1,743
flash develop problem when trying to build a package 1 276
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…
Lotus Notes – formerly IBM Notes – is an email client application, while IBM Domino (earlier Lotus Domino) is an email server. The client possesses a set of features that are even more advanced as compared to that of Outlook. Likewise, IBM Domino is…
Delivering innovative fully-managed cloud services for mission-critical applications requires expertise in multiple areas plus vision and commitment. Meet a few of the people behind the quality services of Concerto.
A company’s greatest vulnerability is their email. CEO fraud, ransomware and spear phishing attacks are the no1 threat to a company’s security. Cybercrime is responsible for the largest loss of money to companies today with losses projected to r…

914 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now