function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Aman Singh ChhokarAman Singh Chhokar 

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:
 
// 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.

 
Best Answer chosen by Aman Singh Chhokar
Aman Singh ChhokarAman Singh Chhokar
I have manged to resolve the issue by adding the following style:
 
<style type="text/css">
 
          [hidden], template
              {
                  display:block !important;
              }
</style>
 

All Answers

TintuBabuTintuBabu
Hi Aman,

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.
Aman Singh ChhokarAman Singh Chhokar
Hi Tintu, Thanks for your reply.

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.User-added image

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).
 
Aman Singh ChhokarAman Singh Chhokar
I have manged to resolve the issue by adding the following style:
 
<style type="text/css">
 
          [hidden], template
              {
                  display:block !important;
              }
</style>
 
This was selected as the best answer