Apex Code Development You need to sign in to do that
Don't have an account?
Show/create simple Bar Graph on a Visual Force Page in a Salesforce Community
The main requirement was to show a simple Bar graph in a Community Home Page (VF Page). I firstly tried to show a simple already created Report in Salesforce but got to know that Community doesn't allow access to Reports and you need a Community Plus license which is not possible.
Then I tool the second approach to create the Graphs manually where All I need to show is Case Types on the X Axis (Group Data Axis) and the Bar should Show the Number of Cases whose status are equal to "In Progress".
Therefore in the Controller Class I had the following method:
Then I tool the second approach to create the Graphs manually where All I need to show is Case Types on the X Axis (Group Data Axis) and the Bar should Show the Number of Cases whose status are equal to "In Progress".
Therefore in the Controller Class I had the following method:
// To Calculate Number of Cases for status = 'In Progress'
public class Types {
public Integer cnt {get; set;}
public String ty {get; set; }
Types(String ty, Integer cnt) {
this.cnt = cnt;
this.ty = ty;
}
}
public Types[] getTypes() {
Types[] types = new Types[] {};
for (AggregateResult ar : [SELECT COUNT(id) c, Type t FROM Case WHERE Status='In Progress' GROUP BY Type])
{
types.add(new Types (
(String) ar.get('t'),
(Integer) ar.get('c')
));
}
return types;
}
And in the Visual Force Page I had the following:
<div style="padding: 15px;">
<label>Number of Enquirers in Progress</label>
<apex:chart height="380" width="400" data="{!Types}">
<apex:legend position="right"/>
<apex:axis type="Numeric" position="left" fields="cnt" title="Case Record Count"/>
<apex:axis type="Category" position="bottom" fields="ty" title="Status" />
<apex:barSeries title="In Progress Cases" orientation="vertical" axis="left" xField="ty" yField="cnt" />
</apex:chart>
</div>
But the above Code is not showing proper Bar graph. The Bars are not shown at all but I can see the x-axis and y-axis labels. I am new to Coding and have to fulfill this requirement as soon as possible. Also please let me know if there is any easier option for creating the Graphs. Any help will be appreciated.
<style type="text/css">
[hidden], template
{
display:block !important;
}
</style>
All Answers
Please debug the final types List. Check if any data coming null. If there, add check if count == null value must be 0 or skip the null values.
I can see the Bar graph now but do not know why only the Bars are not visible as shown in the attached Picture here.
As you can see that the Data is coming up fine and the Tool tip shows the correct values. I tried adding the colourset and highlighting values but nothing seems to be working.
The Present code is as follows:
<div class="row"> <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div style="padding: 15px;"> <label>Number of Enquirers in Progress</label> <apex:chart height="380" width="400" data="{!Types}"> <apex:legend position="right"/> <apex:axis type="Numeric" position="left" fields="cnt" title="Case Record Count" minimum="0" maximum="10" /> <apex:axis type="Category" position="bottom" fields="ty" title="Case Type" /> <apex:barSeries title="In Progress Cases" orientation="vertical" axis="left" xField="ty" yField="cnt" colorset="#120AF5, #F50A45" highlightColor="#F50A45" rendered="True" > <apex:chartTips height="20" width="120" /> </apex:barSeries> </apex:chart> </div> </div> </div>Therefore the only problem now which is coming is that Bars are not visible on the graph and a secondary problem is that on the x-axis the Case Types are being skipped for the even values (ex. Metering here is not visible).<style type="text/css">
[hidden], template
{
display:block !important;
}
</style>