Fever Chart
About Fever Chart
Fever Chart is a visual tool used in conjunction with CCPM (Critical Chain Project Management) to monitor project progress. It plots the project's performance against time, comparing the planned progress (taking into account the buffers) against the actual progress. The chart gets its name from its resemblance to a medical fever chart, which tracks a patient's body temperature over time.
Features of the Fever Chart include:
X-Axis (Horizontal): Represents the percentage of buffer consumption.
Y-Axis (Vertical): Represents the percentage of project completion.
Safe Zone: The area where the project's progress is on or ahead of schedule, typically depicted in green.
Warning Zone: Indicates potential trouble, usually colored in yellow, where the project is consuming buffer at a faster rate than planned.
Critical Zone: Often colored red, indicating a high risk of not completing the project on time, where the buffer consumption significantly exceeds the project completion percentage.
The Fever Chart allows project managers and teams to quickly identify when a project is off track and take corrective actions. It promotes a focus on managing the critical resources and tasks that are most likely to impact the project's timeline, rather than micro-managing every task.
Together, CCPM and the Fever Chart offer a robust framework for managing projects in a way that addresses both the logistical and psychological aspects of project work, aiming to improve completion rates, reduce project durations, and manage resources more effectively.
Fever Chart component
Work Relay package provides a component to draw a Fever Chart basing on the data passed to the component from the data provider Apex class. This component does not itself perform any calculations, and requires an Apex class that would produce an output with the data to be displayed. The custom developed Apex class would likely combine data from Work Relay objects and key Objects involved in business logic in the Salesforce Org.
Main capabilities provided by the component are:
- Custom sections division & colorization;
- Ability to define a set of Dots representing a Project's Critical chain data snapshots;
- for a Dot, additional visualization options are available by manipulating Dot's radius, color & border;
- a Dot may or may not have a line connecting it to another Dot (no-lines view suitable for a Portfolio view where each Dot would represent current state of different Projects);
- each Dot may have a popup with custom-defined content showing on hover;
- for each Dot, a handler can be configured (ex. to navigate to a Record in Salesforce);
- component has means to communicate with other components on the Page by event handling;
- component can be embedded in a Work Relay form (see below)
Data Provider Apex class
See below for an example of custom Apex class that provides an output for the Chart shown earlier in this article. Code has comments with clarifications.
global with sharing class WR_FeverChartController implements WR_BPM.FeverChartInterface
{
public Object loadData(Map<String, Object> parameters) {
return new Map<String, Object> {
'chart' => new Map<String, Object> {
'yAxis' => 100,
'xAxis' => 100,
'yAxisLabel' => 'Y Axis %',
'xAxisLabel' => 'X Axis %',
'topSection' => new Map<String, Object> {
'color' => '#e03131', // color of the section
'top' => new Map<String, Object> {
/* yFrom & yTo attributes for the 3 sections define the sections division on the chart */
'yFrom' => 100,
'yTo' => 100
}
},
'middleSection' => new Map<String, Object> {
'color' => '#ffd43b',
'top' => new Map<String, Object> {
'yFrom' => 20,
'yTo' => 80
}
},
'bottomSection' => new Map<String, Object> {
'color' => '#37b24d',
'top' => new Map<String, Object> {
'yFrom' => 0,
'yTo' => 40
}
},
'line' => new Map<String, Object> {
'color' => '#000000' // color of the line conencting dots
}
},
'points' => new List<Object> {
new Map<String, Object> {
'id' => '1',
'parentId' => null, // fill in to connect this dot with another dot with a line; other dot is the parent
'x' => 10,
'y' => 20,
/* radius, color, border - are the 3 attributes that can make the dots look different
and visually communicate some information */
'radius' => 5,
'color' => '#a5d8ff',
'border' => '#333333',
/* details are shown on hover in the popup */
'details' => new Map<String, Object> {
'header' => 'Point 1',
'rows' => new List<Object> {
new Map<String, Object> {
'label' => 'Label 1',
'value' => 'Value 1'
},
new Map<String, Object> {
'label' => 'Label 2',
'value' => 'Value 2'
}
}
},
/* onClick handler for the dot */
'handler' => new Map<String, Object> {
'type' => 'url',
'value' => '/0013a00001mwYRSAA2',
'params' => new Map<String, Object> {}
}
},
new Map<String, Object> {
'id' => '2',
'parentId' => '1',
'x' => 20,
'y' => 30,
'radius' => 8,
'color' => '#69db7c',
'border' => '#333333',
'details' => new Map<String, Object> {
'header' => 'Point 2',
'rows' => new List<Object> {
new Map<String, Object> {
'label' => 'Label 1',
'value' => 'Value 1'
}
}
}
},
new Map<String, Object> {
'id' => '3',
'parentId' => '2',
'x' => 40,
'y' => 50,
'radius' => 3,
'color' => '#ffd43b',
'border' => '#333333',
'details' => new Map<String, Object> {
'header' => 'Point 3',
'rows' => new List<Object> {
new Map<String, Object> {
'label' => 'Label 1',
'value' => 'Value 1'
}
}
}
},
new Map<String, Object> {
'id' => '4',
'parentId' => '3',
'x' => 60,
'y' => 80,
'radius' => 4,
'color' => '#ffd43b',
'border' => '#333333',
'details' => new Map<String, Object> {
'header' => 'Point 4',
'rows' => new List<Object> {
new Map<String, Object> {
'label' => 'Label 4',
'value' => 'Value 4'
}
}
}
}
}
};
}
0 Comments
Add your comment