Solved

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

Posted on 2008-10-11
5
3,661 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
Comment Utility
Just a suggestion, would it not be possible to just place the chart in a HBox?
0
 
LVL 1

Author Comment

by:jrwalker2
Comment Utility
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
Comment Utility
0
 
LVL 1

Author Comment

by:jrwalker2
Comment Utility
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
Comment Utility
If you could isolate the issues you're having into source code snippets, that would make things much easier to address.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

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…
This article explains in simple steps how to renew expiring Exchange Server Internal Transport Certificate.
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.

743 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

14 Experts available now in Live!

Get 1:1 Help Now