I do not see examples of exactly what you want in documentation such as Building a Complex Chart with Visualforce Charting.
But you should be able to get part of the way there because apex:barSeries supports colorSet
and colorsProgressWithinSeries
attributes. It looks like putting the colors there using a true value should give a different color per bar.
In the examples I have seen, the apex:legend
is typically used to describe the series and you only have one series (your apex:barSeries
). You are trying to get the legend to repeat the labels of the x-axis and that does not appear to be a supported option.
So I suggest the compromise of using the colored bars and just removing the legend.
PS
The code below produces the chart below and demonstrates that just setting colorsProgressWithinSeries
allows the colors from the apex:chart
to be used. When experimenting with the size of the chart, I found that the legends are hidden when they don't fit so making the chart bigger is the simplest way to get all the legends shown. One purpose of the legend when displayed is to turn a series on and off so the legend has little value when there is only one series. And there appears to be no option to repurpose the legend to show axis values instead so I think your are out of luck. (Or if the first chart you show was created using apex:chart
contact whoever created it and ask them.)
<apex:page controller="ChartController">
<apex:pageBlock title="Annual Recurring Revenue">
<apex:chart name="AnnualRecurringRevenue" data="{!nvs}" width="400" height="400"
colorSet="#156F9E,#FF9123,#6BAE4A,#424242,#A4A4A4">
<apex:axis type="Numeric" position="left" grid="true" title="$(Millions)"
fields="v"/>
<apex:axis type="Category" position="bottom" grid="false" title="Quarter"
fields="n"/>
<apex:barSeries orientation="vertical" axis="left" xField="n" yField="v"
colorsProgressWithinSeries="true"/>
</apex:chart>
</apex:pageBlock>
</apex:page>
public class ChartController {
public class Nv {
public String n { get; private set; }
public Decimal v { get; private set; }
Nv(String n, Decimal v) {
this.n = n;
this.v = v;
}
}
public Nv[] getNvs() {
return new Nv[] {
new Nv('Actual', 106.00),
new Nv('Forecast', 150.56),
new Nv('Plan', 135.00),
new Nv('Prior Qtr', 97.00),
new Nv('Prior Yr', 88.44)
};
}
}
It's just the Status
field. You can also get the individual step statuses from ProcessInstanceStep
.
SELECT Status, TargetObjectId, (Select StepStatus FROM Steps)
FROM ProcessInstance WHERE TargetObjectId = '<id_here>'
Best Answer
I have worked on this requirement few days back, although the Ui was a little different. Hope this will help you.
Have the following CSS to style your status nodes.
Have an outputPanel and inside that an un-ordered list to show all your status with conditional styling. Basically just check the status of your current record and apply style
done
for the ones already past andactive
for the one which is currently the status.This worked pretty well for me. You can of course redesign the CSS as per your need.
I have referred a blog from the internet which I am unable to find now. I will try to search it and put a reference. Credit should be given to the original author.