Here’s my intial attempt at making something that resembles a Gantt chart. There’s been some good discussion about this recently on flexcoders. People have suggested a few different ways of making a Gantt chart. Here I’ll outline the main ideas that have been thrown around and then I’ll go over the example that I came up with.
Option 1: Use the DataGrid as the base. This was the approach that Andrew Trice used. This is also the approach that I took, see the example below. The idea here is that each row of the DataGrid will serve as each item of the Gantt chart, and all we need to do is specify a custom itemRenderer to display it.
Option 2: Use the charting classes as the base. Ely Greenfield’s got an example of making a chart similar to a Gantt chart (follow the link and find: Series Type >> Columns and Bars >> Floating Bars). The basic idea here is that you use the chart classes and extend them to turn them into a Gantt chart. I decided against this because 1) I haven’t investigated custom charting and reading Ely’s blog makes it seem fairly complicated (Ely, I know you try to make it easy for us 🙂 ) and 2) I liked the itemRenderer and itemEditor approach that a DataGrid takes, which would allow me to have editable controls in there.
Option 3: Use the scheduling framework from Adobe Consulting as the base. I really like this idea. It was mentioned on flexcoders after I started working on a solution using DataGrid, but I think this way is definitely worth exploring. I haven’t played with the scheduling framework yet, but at first glance it seems like much of the work they did for that would carry over very well for a Gantt chart.
So like I said, I went with the DataGrid option. The basic idea is the same as on Andrew Trice’s post, I just went a little further. In my example you can manipulate the data in the chart. Each item is represented by a slider that allows you to adjust the starting point, the end point, and the percent complete for each task. To try this in the example just click on one of the items and the slider thumbs should appear.
Another cool thing this shows is some skinning and customization of the Slider component. To get these sliders looking like they do I had to make the Slider apply different skins to the first, second, and third thumbs. I also needed different highlighting skins for the two portions of the slider track. And you can drag the entire region (that’s something that came from a previous post about draggable sliders). Deep down those are just Slider components, but they look and act fairly differently.
So I’m not going to go into heavy duty explanation of how this works. And I didn’t comment the code up very much (if at all). It’s not complete by any means, no axis is shown, etc. This is sort of my first draft and if you want to download the source and figure it out for yourself, go for it.
The example below shows a gantt chart with my plans for world domination. There are two charts here with the same data, but they show different skinning options.
Very nice work Doug!
I like the approach. I developed a Gantt chart for a proof of concept not so long ago to display flight times. http://travelport.monochrome.co.uk – create a journey from London to Perth and view the flights.
It just essentially uses a repeater on a canvas with a class that manages the timeline and grid. It ended up being a little convoluted, so I like the idea of utilising a built-in class to do much of the work for you.
Great example! But can’t compile on my box (winxp, FB 2.0.1). “1118: Implicit coercion of a value with static type flash.events:Event to a possibly unrelated type mx.events:ListEvent.” on GanttDataGrid.mxml line 3.
BR Milan
Great work Doug! Check out my flexcoders response. I hope we can build a full Gantt chart tool as a community!
milan, I’m going to go ahead and call you a liar 🙂 and say that I think you’re not actually using the 2.0.1 framework. The type of event that gets fired for the change event in the DataGrid was changed from flash.events.Event to mx.events.ListEvent. This change was done from 2.0 to 2.0.1.
Here’s the details in the LiveDocs:
version 2.0
version 2.0.1
But no biggie, just go ahead and change line 22 of GanttDataGrid.mxml and replace ListEvent with Event. That should fix the error. But if you really are using version 2.0 of the framework then I don’t know if other errors will crop up.
I guess I should post a big warning on all my posts that makes it clear that I’m using version 2.0.1 for everything I do. If you haven’t upgraded then everything might get messed up. (milan, I know you say you’re using 2.0.1, but perhaps the SDK didn’t get updated properly?)
Thanks, Doug, so I finaly know that I haven’t upgrade it properly, even if there is 2.0.14359 in about screen on flex builder. The problem is that I really don’t know what could I do more: I’ve reinstaled with updater, than completly, so what a heck is the problem… Anyway, thanks, I’m looking forward to run your example on 2.0.1 🙂
BR, Milan
Yes, you’re rigth, I’ve downloaded just sdk and compiles fine. Thanks again,
BR, Milan
Hey Doug, question for you:
Have you played around with hit-testing images? Everything I’ve ever tried counts the transparent area of an image as a hit. It’s really annoying when I’ve got a container that has sub-components that are mixed vector art and bitmaps, the bitmap areas count as a hit (for mouseover, clicks, etc) even when transparent, but vector art areas don’t.
In my experimentations, I’ve found that the standard mouse-over detection does NOT seem to call hitTestPoint() on whichever display object it’s over. Furthermore (and this is so fucked up that I get nauseas just thinking about it) it seems that Bitmap’s hitTestPoint() method does not call the hitTest() method on the BitmapData that it contains! The fucking contract as specified in the docs for hitTestPoint() say that it won’t count transparent pixels if the last param is true, and then it never even checks the pixel values for a Bitmap.
Anyway, this seems like a bug in flash, I’m wondering if you’ve ever played around with it, since you’ve been working with transparency.
Ray,
See my latest post.
Great example!
Doug, this is really a great little module and I’m looking forward to attempting to “bend it to my will”. I’m new to Flex – so it might bend me.
Some things that I would like to see (if you were bored!) is:
In most Gantt Charts there are Milestone events and Duration events… with a Milestone event usually represented by a diamond shape. Seeing that added would be great.
In addition, it would be nice to have some sort of “Day” indication along the top or bottom of the chart.
Thanks for the start!
Hi
I want to all of you know, World is mine, and yoursite good
Bye
Thank You
Pingback: Simple GanttChart using AdvancedDataGrid of Flex 3.0 (Moxie) « flexgeek
Great work!! I find some bug when dragging a task….
//=========================================
Error: Unknown Property: ‘-1’.
at mx.collections::ListCollectionView/http://www.adobe.com/2006/actionscript/flash/proxy::setProperty()
at GanttItemEditor/private::sliderChanged()
at GanttItemEditor/___GanttSlider1_change()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at com.dougmccune.controls.sliderClasses::Slider/private::setValueAt()
at com.dougmccune.controls.sliderClasses::Slider/private::setValueFromPos()
at com.dougmccune.controls.sliderClasses::Slider/http://www.adobe.com/2006/flex/mx/internal::onThumbRelease()
at com.dougmccune.controls.sliderClasses::SliderThumb/http://www.adobe.com/2006/flex/mx/internal::buttonReleased()
at mx.controls::Button/private::systemManager_mouseUpHandler()
at [mouseEvent]
//===========================
Great work!
But… there is a major bug where you select an item on the grid, and you have vertical scroll on the grid, moving the mouse down (while NOT pressed) will scroll down the grid.
do you know about this one?
any plans on fixing it?
cheers!
hay gays
Great work!
very interesting….well am now working with this code and i want to now if it is possible to add labels or texts on tasks and how it’s made?????????????
Thanks
waiting reply 🙂
There is a online scheduling solution based on interactive Gantt charts. Just for alternative ideas.
…. forgot link
http:://www.yutiti.com
Wow , very nice work . I need it for my website 🙂
tnx
Hi!
I want to make better my SQL experience.
I red so many SQL resources and would like to
read more about SQL for my position as mysql database manager.
What can you recommend?
Thanks,
Werutz
J.P. Morgan Chase & Co. says it will modify the terms of $70 billion in troubled, mostly adjustable-rate mortgages it holds.
The New York bank inherited many of the loans as part of its September purchase of a failed competitor, Washington Mutual Inc. (NYSE:WM), and its move will cover as many as 400,000 borrowers. J.P. Morgan said Friday the borrowers will be moved into loans carrying lower interest rates, smaller principal amounts or other more-affordable terms, The Wall Street Journal reported.
The move came shortly after the bank received a $25 billion capital infusion from the U.S. Treasury’s program to strengthen financial institutions and get credit flowing.
“Our goal in doing this was to come up with something that we think will lead the industry in helping as much as possible on this issue,” said J.P. Morgan executive Charles Scharf.
John Taylor, chief executive of the National Community Reinvestment Coalition, said the action was “a gutsy move on their part. They are bending over backward to try to reach out to these people.”
Pingback: developer.cl » Archivo del weblog » links for 2008-10-13
Pingback: flexgeek » Blog Archive » Simple GanttChart using AdvancedDataGrid of Flex 3.0 (Moxie)
Pingback: Adobe Flex : Componente : Gráfico de Gantt | Erko Bridee
Very nice work. How do we put more sections in the chart..I mean now we have put success and failure… If I have more sections to show like…..critical,high,low,medium etc..how easy will it be.
Pingback: Flex Gantt Charts « Flex and Specs()
Hey Doug,
Do you know how you could disable movement of gantt thums, so that you could only change start, finish and percentComplete but you wouldnt be able to move the whole thumb left and right
I must admit i am new to Flex.
I’ve taken your Code and tried something with it, but forgive me, i am running into an error, and figured you’d, or someone here, would have an answer, especially since it deals directly with this code.
I have used some AS to find the LOWEST Number of any of the Bars, and the Highest number of any bars (As in the example, the lowest number on anything is 0, and the highest is 10, because the one has a start time of 0, and the other had an end time = start(5) + duration(5).
Taking those numbers, i wanted to populate the max property of the GanttDateGrid. Its hard coded as “10” right now.
And again, i bet this is a newbie problem. What i am TRYING to do is something like this
where endTime is a [Bindable] Number declared and defined in a Script section that i added.
Every time i try to set the max Property non hard coded, i get a billion errors, but the first line is this:
Error: Unknown Property: ‘-1’.
and it opens a file called:
ListCollectionView.as, and brings me to this function:
/**
* @private
* Attempts to call setItemAt(), converting the property name into an int.
*/
override flash_proxy function setProperty(name:*, value:*):void
{
if (name is QName)
name = name.localName;
var index:int = -1;
try
{
// If caller passed in a number such as 5.5, it will be floored.
var n:Number = parseInt(String(name));
if (!isNaN(n))
index = int(n);
}
catch(e:Error) // localName was not a number
{
}
if (index == -1)
{
var message:String = resourceManager.getString(
“collections”, “unknownProperty”, [ name ]);
throw new Error(message);
}
else
{
setItemAt(value, index);
}
}
It indicated that my error is coming from the “throw new Error(message); section.
so, as the newb that i am, why can’t i set the max using AS, or bind it to anything?
Pingback: Flex ile yap?lm?? minik bir Gannt ?emas? örne?i | Ali Sait TEKE
Just a note for anyone trying to use this component within Flex 4 – I encountered a problem where the GanttItemEditor was not rendering. Turns out the item height (which was originally set to 100%) needed to be explicitly set to a value of your choice – 10 seems reasonable.
Cheers for the cool component Doug
As Kevin mentioned above, the GanttItemEditor was not rendering when using Flex 4. Can you check your source code (in the compressed file)?
We’ve planned build the resources management with supporting from Gantt charts.
Waiting your confirmation with warm regards!
1061: Call to a possibly undefined method getResourceBundle through a reference with static type Class. Slider.as /GanttChart_Tour/src/com/dougmccune/controls/sliderClasses line 1 Flex Problem
1061: Call to a possibly undefined method getResourceBundle through a reference with static type Class. Slider.as /GanttChart_Tour/src/com/dougmccune/controls/sliderClasses line 1 Flex Problem
1061: Call to a possibly undefined method getString through a reference with static type mx.resources:ResourceBundle. Slider.as /GanttChart_Tour/src/com/dougmccune/controls/sliderClasses line 399 Flex Problem
1061: Call to a possibly undefined method getString through a reference with static type mx.resources:ResourceBundle. Slider.as /GanttChart_Tour/src/com/dougmccune/controls/sliderClasses line 402 Flex Problem
1061: Call to a possibly undefined method getString through a reference with static type mx.resources:ResourceBundle. Slider.as /GanttChart_Tour/src/com/dougmccune/controls/sliderClasses line 405 Flex Problem
I m using FB 4.
Variable level ResourceBundle metadata is deprecated. Please use class level ResourceBundle metadata. Slider.as /GanttChart_Tour/src/com/dougmccune/controls/sliderClasses line 364 Flex Problem
Please help
Pingback: withbreakpoints.com » Blog Archive » Flexlib Scheduling Sample
Hi Doug,
I’m looking for a shift scheduler and found this work of yours. However, using your code with FB4, I encountered the following error:
Description Resource Path Location Type
1061: Call to a possibly undefined method getResourceBundle through a reference with static type Class. Slider.as /GanttChart_Tour/src/com/dougmccune/controls/sliderClasses line 1 Flex Problem
1061: Call to a possibly undefined method getResourceBundle through a reference with static type Class. Slider.as /GanttChart_Tour/src/com/dougmccune/controls/sliderClasses line 1 Flex Problem
1061: Call to a possibly undefined method getString through a reference with static type mx.resources:ResourceBundle. Slider.as /GanttChart_Tour/src/com/dougmccune/controls/sliderClasses line 390 Flex Problem
1061: Call to a possibly undefined method getString through a reference with static type mx.resources:ResourceBundle. Slider.as /GanttChart_Tour/src/com/dougmccune/controls/sliderClasses line 393 Flex Problem
1061: Call to a possibly undefined method getString through a reference with static type mx.resources:ResourceBundle. Slider.as /GanttChart_Tour/src/com/dougmccune/controls/sliderClasses line 396 Flex Problem
I can’t figure out how to resolve this. Any help will be much appreciated. I badly needed this to work for the project I’m working on to be able to meet the deadline. Please help.
Thanks.
Hi,I also met the same promble with meaj4713,when I using this code in FB4. Please help!
Thanks!
Hi:
I use FlexBuilder4.5.
I modified the following code.
/**
* @private
* Loads resources for this class.
*/
private static function loadResources():void
{
resourceDecimalSeparatorFrom=ResourceManager.getInstance().getString(“decimalSeparatorFrom”, “SharedResources”);
resourceThousandsSeparatorFrom=ResourceManager.getInstance().getString(“thousandsSeparatorFrom”, “SharedResources”);
resourceDecimalSeparatorTo=ResourceManager.getInstance().getString(“decimalSeparatorTo”, “SharedResources”);
}
But I met the following questions.
Please help!
Thanks!
ArgumentError: Error #2004: One parameter is invalid.
at flash.display::Graphics/drawRect()
at mx.controls::DataGrid/drawVerticalLine()[E:\dev\hero_private\frameworks\projects\mx\src\mx\controls\DataGrid.as:3582]
at mx.controls::DataGrid/drawVerticalSeparator()[E:\dev\hero_private\frameworks\projects\mx\src\mx\controls\DataGrid.as:3550]
at mx.controls::DataGrid/drawLinesAndColumnGraphics()[E:\dev\hero_private\frameworks\projects\mx\src\mx\controls\DataGrid.as:3692]
at mx.controls::DataGrid/drawLinesAndColumnBackgrounds()[E:\dev\hero_private\frameworks\projects\mx\src\mx\controls\DataGrid.as:3602]
at mx.controls::DataGrid/updateDisplayList()[E:\dev\hero_private\frameworks\projects\mx\src\mx\controls\DataGrid.as:1815]
at mx.controls.listClasses::ListBase/validateDisplayList()[E:\dev\hero_private\frameworks\projects\mx\src\mx\controls\listClasses\ListBase.as:3963]
at mx.managers::LayoutManager/validateDisplayList()[E:\dev\hero_private\frameworks\projects\framework\src\mx\managers\LayoutManager.as:736]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\hero_private\frameworks\projects\framework\src\mx\managers\LayoutManager.as:801]
at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\hero_private\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1180]
An invalid parameter
For those experiencing the “ArgumentError: Error #2004: One parameter is invalid” in Flex 4, to get around this, you need to set the height attribute of the GanttSlider in GanttItemEditor.mxml to a pixel height instead of a percentage. I set mine to “10”.
You’ll still notice some glitching, for example if you click too low on a slider, it will actually select the slider beneath it.
It took me 4 weeks to figure this out.
And also in GanttDataGrid.xmxl, for the 2nd column, you’ll have to set the itemRenderer like so:
itemRenderer=”GanttItemEditor”