This article details how to use Gantt charts in FastReport BusinessGraphics. We learned how to change the color and style of the node. We worked through the title of the chart and figured out how to add new tasks, intervals, and resources. In the process, we learned how to create our own charts using.csv files.
First, let’s launch a demo project. This is what the start page looks like when you open the Gantt chart demo.
Above, we see the title of the chart, which shows the development cycle of a conditional project. The list of tasks is displayed on the left, with the interval between tasks performed in the middle.
Let’s edit it a little bit. To enter edit mode, right-click on any string and click Properties, and you will see a window that looks like a screenshot.
A node is understood as a line representing an action in an item. \
Let’s start with the color palette. Palettes enable you to use chart styles. You can change the color palette and styles here.
The Color Palette is responsible for the Color of the resource. Here you can choose from off-the-shelf templates, or customize them in your own way. To customize the palette, first you need to select a color and click Add. You may also notice an example of what the diagram looks like, at the bottom. This is handy because you don’t have to close and open Windows to view changes.
Now let’s go to the Styles window. This is where we can change the string.
- The draw style is responsible for how the string looks in normal mode.
- Recording the hover is responsible for the appearance of the string when you hover the mouse.
- The selected records are still under development.
Let’s change Record Hovered. To open the edit window, simply double-click the left button on the name and you will see the following window:
Fill Style configures the style of the node during the hover.
A gradient style is needed to flexibly customize the display of hover points (gradients only).
Need Hatch Style to flexibly customize display of hover points (hatching only).
As we can see, the style control of nodes is very flexible. You can change the fill color, gradient style, text color, and more. There is also an example of what a hover point looks like.
For example, let’s change the style of the gradient, set two colors, apply changes, and this is what the hover point looks like.
Now let’s go to the title window. Here we can change its height in the chart, vertical and horizontal grids, a data template, the distribution of the editing task, and the position of the title. This is what the window looks like at the beginning:
Header height Specifies the Header height. If you set the default title height, the title height is equal to two nodes.
Scale shows the interval between tasks, depending on the task you select (day, month, year).
The string pattern is responsible for the format of the data to be displayed on the title. The default value is MMMM (only the month is displayed in the title). C# configuration user-friendly format. You’ll have the fewest problems or errors.
Drawing a horizontal grid and drawing a vertical grid are responsible for whether there will be horizontal and vertical lines in the chart.
The Show Top Date in header is responsible for displaying the date based on what you set in Scale.
The bottom title view shows the location of the month on the title.
Sections in the header are set to display days (1 through 31).
Let’s change our title. Let’s set the following properties:
Now, our chart looks like this:
Now we have a much more accurate grid. The month is divided into 10 days and the tasks are equally divided.
Let’s go to the data TAB, which looks like this:
Here we can create a new resource and task, as well as some functionality. Let’s start at the beginning.
In Date, we store tasks. We can delete them, add new tasks, or sort them.
Resources displays resources (usually employees). For convenience, you can assign them an index.
Text on the interval is required to display tasks correctly on the interval.
The text position is responsible for the position of the text in the interval.
The length of the task list (leftmost column) needs to be adjusted by the maximum width of the block that records the title.
Note that if the value is too small, the minimum value is assigned to the attribute. This is done so that the error display will not appear if the user makes a mistake.
It is important to know that each resource must have its own unique index. Otherwise, the chart may have problems.
You can also add task names on the interval. It is sufficient to check the box in the Text every once in a while and set the position in the middle. Let’s add a new resource and task.
Double-click the task to add a resource, change the start and end dates, and you will see a new window:
To add a resource, write its name below and click the + button.
We have created a task in the data TAB, now we create a new resource and click OK. This is what our chart looks like now:
As we can see, in the lower right corner we have a new interval that has been in development for a month and has a separate color (yellow) so you don’t get confused. The task name is added to the left of the new interval.
Congratulations, we learned how to edit existing charts. Now let’s create a chart.
Click the custom data TAB on the start page and this is what we see when we click the button:
To create your own chart, you first need to create a.csv or.xml file. Let’s take the.csv file at \Demos\Data\GanttSamples as an example. It looks something like this:
We have four columns, name, start date, end date, and index. We enter one by one:
We get a graph that looks something like this:
Remember, we only have four columns.
Name member – Contains the name of the task.
Start date member – Contains the start date of the processing task.
End Date member – Contains the end date of the task.
Resource members are the names of resources.
To avoid problems, it is important to check the names of the columns to be filled in when creating the chart and the order in which data is entered.