Column Chart with Dashed Bars in Flex

Here comes the Column Chart with Dashed column series .In this i have a class dashed.as which is used to draw rectangle with dashed lines

DashedFill.as is the custom fill written to show dashed bars in the chart.Dashed fill must implement the IFill Interface in which the beginFill method is implemented to draw dashed rectangles using the static method drawRect of the dashed class.

You must pass the target Graphics as first parameter to drawRect and an object with style properties to customize the border and fill color of the dashed bar .

ScreenShot

View Demo

DownLoadSource

Filling Series with Stroked Lines in Flex Charts

Hi folks,

I had an requirement saying to fill the column series with stroked lines.I tryed googling but it doesn’t helped ,hence i have developed my own fill to draw stroked lines inside the column series.

StrokeFill.as

package com.customcomponents
{
import flash.display.Graphics;
import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;
import flash.geom.Rectangle;

import mx.graphics.IFill;

public class StrokeFill extends EventDispatcher implements IFill
{

public function StrokeFill(target:IEventDispatcher=null)
{
super();
}

public function begin(target:Graphics, rc:Rectangle):void
{
target.clear();
target.lineStyle(1,0×000000,1);

var j:int=0;
var i:int=0;

var yIncrement:int=rc.height/8;
var xIncrementer:int=rc.width/8;

for(i=0;i<rc.height;i=i+yIncrement)
{
target.moveTo(j,0);
target.lineTo(0,i);
if(j<rc.width)
j=j+xIncrementer;
}
var z:int=0;
var s:int=yIncrement;
j=rc.width;
while(s<rc.height)
{
target.moveTo(z,i);
target.lineTo(j,s);
i=i+xIncrementer;
if(z<rc.width)
z=z+xIncrementer;
s=s+yIncrement;
}

target.lineStyle(1,0×000000,1);
//target.moveTo(j-5,0);
target.drawRect(0,0,rc.width,rc.height);
rc.width=0;
}

public function end(target:Graphics):void
{
}

}
}

To write a fill we must implement the IFill interface and in the beginFill method i have drawn a rectangle with specified height and width according to the data.Then i have divided the width and height by 8 to get the incrementers for x and y positions ,so that 8 lines will be drawn along the width of the bar.

First 8 lines are drawn from the top of the bar to the bar height by incrementing the x and y positions by the repective incrementors so that the first half of the bar is filled then again in the while loop iam filling the second half by moving to the bottom left position and drawing lines till the bottom right .

DOWNLOAD SOURCE