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.
After suggestion of adding Output Panel, I have tried everything but it's still not working for me. The full code of the page is as follows where I have used the two Graphs as Components - CaseGraph1 & 2. I have tried removing the from the Header where I can see the graphs working as expected but then everything else on the page gets messed up. Your help will be deeply appreciated:
<apex:page docType="html-5.0" showHeader="false" sidebar="false" cache="false" controller="AWSHomeControllerNew" standardStylesheets="false" action="{!forwardToAuthPage}" >
<head>
<!-- Insert global site header css and meta tags-->
<c:AWSHeader />
</head>
<body>
<!-- container section start -->
<section id="container" class="">
<!-- Header Bar -->
<c:AWSHeaderBar />
<!--header end-->
<!--sidebar start-->
<c:AWSSidebar />
<!--sidebar end-->
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!--overview start-->
<div class="row">
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="info-box blue-bg">
<i class="fa fa-suitcase"></i>
<div class="count"><apex:outputText value="{!openCases}"/></div>
<div class="title" >Open Cases</div>
<a href="/apex/CaseList?fcf=00B20000008TqAh" class="alert-link">View Details</a>
</div><!--/.info-box-->
</div><!--/.col-->
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="info-box red-bg">
<i class="fa fa-exclamation-triangle"></i>
<div class="count">4</div>
<div class="title">Operational Incidents</div>
<a href="#" class="alert-link">View Details</a>
</div><!--/.info-box-->
</div><!--/.col-->
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="info-box dark-bg">
<i class="fa fa-flask"></i>
<div class="count"><apex:outputText value="{!SampleResultList}"/></div>
<div class="title">Sample Results</div>
<a href="/apex/TESampleResultList" class="alert-link">View Details</a>
</div><!--/.info-box-->
</div><!--/.col-->
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="info-box green-bg">
<i class="fa fa-exchange"></i>
<div class="count"><apex:outputText value="{!DisplayQueryList}"/></div>
<div class="title">MDD Increase Notifications</div>
<a href="/apex/CaseList?fcf=00B21000000UI3M" class="alert-link">View Details</a>
</div><!--/.info-box-->
</div><!--/.col-->
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="info-box brown-bg">
<i class="fa fa-wrench"></i>
<div class="count"><apex:outputText value="{!PlannedWorksList}"></apex:outputText></div>
<div class="title"> Planned Works</div>
<a href="/apex/CaseList?fcf=00B21000000UI5S" class="alert-link">View Details</a>
</div><!--/.info-box-->
</div><!--/.col-->
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="info-box orange-bg">
<i class="fa fa-gbp"></i>
<div class="count"><apex:outputText value="{!ChargesforApprovalList}"></apex:outputText></div>
<div class="title" >Charges for Approval</div>
<a href="/apex/CaseList?fcf=00B21000000UI5I" class="alert-link">View Details</a>
</div><!--/.info-box-->
</div><!--/.col-->
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<img id="liveagent_button_online_57321000000001J" style="display: none; border: 0px none; cursor: pointer" onclick="liveagent.startChat('57321000000001J')"
src="https://dev1-awsc.cs26.force.com/resource/1467712448000/Support_Online" /><img id="liveagent_button_offline_57321000000001J"
style="display: none; border: 0px none; " src="https://dev1-awsc.cs26.force.com/resource/1467712461000/Support_Offline" />
<script type="text/javascript">
if (!window._laq) { window._laq = []; }
window._laq.push(function(){liveagent.showWhenOnline('57321000000001J', document.getElementById('liveagent_button_online_57321000000001J'));
liveagent.showWhenOffline('57321000000001J', document.getElementById('liveagent_button_offline_57321000000001J'));
});</script>
<script type='text/javascript' src='https://c.la3-c1cs-was.salesforceliveagent.com/content/g/js/37.0/deployment.js'></script>
<script type='text/javascript'>
liveagent.init('https://d.la3-c1cs-was.salesforceliveagent.com/chat', '57221000000001E', '00D210000000SOc');
</script>
<p />
<p />
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<!--Project Activity start-->
<section class="panel">
<div class="panel-body progress-panel">
<div class="row">
<div class="col-lg-8 task-progress pull-left">
<h1>My Recent Case Updates</h1>
</div>
</div>
</div>
<table class="table table-hover personal-task">
<tbody>
<apex:pageBlock >
<apex:pageBlockTable value="{!RecentCaseUpdates}" var="cu" styleClass="table table-striped" id="recentCaseUpdateList">
<tr>
<td><apex:column HeaderValue="Case Number" width="10%"> <apex:outputLink value="/apex/CaseDetail?id={!cu.Id}">{!cu.CaseNumber}</apex:outputLink> </apex:column></td>
<td><apex:column HeaderValue="Subject" value="{!cu.Subject}" width="80%"/></td>
<td><apex:column HeaderValue="Status" value="{!cu.Status}" width="10%"/></td>
</tr>
</apex:pageBlockTable>
</apex:pageBlock>
</tbody>
</table>
<!-- <div class="row">
<div class="col-lg-8 task-progress pull-left">
<apex:outputPanel id="MissingAttRpt" >
<apex:iframe src="/00O21000000LWLV" scrolling="true" height="400px" width="100%"/>
</apex:outputPanel>
</div>
<div class="col-lg-4">
<span class="profile-ava pull-right">
<a href="#" class="alert-link">View All</a>
</span>
</div>
</div>
</div>-->
<!-- <table class="table table-hover personal-task">
<tbody>
<tr>
<td>Today</td>
<td>
<a>New Connection Completed</a>
</td>
<td>
<span class="badge bg-success">Completed</span>
</td>
</tr>
<tr>
<td>Yesterday</td>
<td>
<a>Disconnection Request Submitted</a>
</td>
<td>
<span class="badge bg-primary">In Progress</span>
</td>
</tr>
<tr>
<td>Yesterday</td>
<td>
<a>Sampling Results Completed</a>
</td>
<td>
<span class="badge bg-success">Completed</span>
</td>
</tr>
<tr>
<td>01-11-15</td>
<td>
<a>New Meter Exchange Submitted</a>
</td>
<td>
<span class="badge bg-primary">In Progress</span>
</td>
</tr>
<tr>
<td>28-10-15</td>
<td>
<a>Meter Repair Request Submitted</a>
</td>
<td>
<span class="badge bg-primary">In Progress</span>
</td>
</tr>
</tbody>
</table> -->
</section>
</div>
</div><!--/.row-->
<outputpanel>
<outputPanel class="col-md-8">
<outputPanel>
<outputPanel style="float: left; padding: 15px; background-color: white">
<c:CaseGraph1 />
</outputPanel>
<outputPanel style="float: right; padding: 15px; background-color: white" >
<c:CaseGraph2 />
</outputPanel>
<!-- <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div style="padding: 10px;">
<label>Non Primary Charges Estimate</label>
<canvas id="nonPrimaryCharges" width="200" height="200"></canvas>
<div id="nonPrimaryCharges-legend" class="chart-legend"></div>
</div>
</div><!--/.col-->
<!-- <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div style="padding: 10px;">
<label>This Years Raised Cases</label>
<canvas id="raisedCases" width="200" height="200"></canvas>
</div>
</div><!--/.col-->
</outputPanel>
</outputPanel>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<!--Project Activity start-->
<section class="panel">
<div class="panel-body progress-panel">
<div class="row">
<div class="col-lg-8 task-progress pull-left">
<h1>Wholesale Updates</h1>
</div>
</div>
</div>
<table class="table table-hover personal-task">
<tbody>
<apex:pageBlock >
<apex:pageBlockTable value="{!RecentUpdates}" var="c" styleClass="table table-striped" id="recentUpdateList">
<tr>
<td><apex:column HeaderValue="Date" value="{!c.Date_of_Update__c}" width="10%"/></td>
<td><apex:column HeaderValue="Update" value="{!c.Update_Text__c}" width="90%"/></td>
</tr>
</apex:pageBlockTable>
</apex:pageBlock>
</tbody>
</table>
<!-- <tbody>
<tr>
<td>12-12-15</td>
<td>
<a>Due to snow metering jobs have been postponed until further notice in Lincoln area.</a>
</td>
</tr>
<tr>
<td>31-11-15</td>
<td>
<a>System Maintenance</a>
</td>
</tr>
<tr>
<td>10-11-15</td>
<td>
<a>Our charges have changed please see our website for more details.</a>
</td>
</tr>
<tr>
<td>01-11-15</td>
<td>
<a>Our CEO Peter Simpson speaks about Anglian Water's experience of competition.</a>
</td>
</tr>
<tr>
<td>26-10-15</td>
<td>
<a>System Maintenance</a>
</td>
</tr>
</tbody>
</table> -->
</section>
</div>
</outputpanel><!--/.row-->
</section>
</section>
<!--main content end-->
<!-- Javascripts -->
<c:AWSFooter />
<!-- custom script for this page-->
<script src="{!URLFOR($Resource.ThemeAssets, 'js/Chart.js')}"></script>
<script src="{!URLFOR($Resource.ThemeAssets, 'js/jquery.autosize.min.js')}"></script>
<script src="{!URLFOR($Resource.ThemeAssets, 'js/jquery.placeholder.min.js')}"></script>
<script src="{!URLFOR($Resource.ThemeAssets, 'js/jquery.slimscroll.min.js')}"></script>
</body>
I have tried using the outputPanel in many different ways possible but it still doesn't work as expected. It only works when I remove the AWSHeader component from the Header where it messes everything else on the page.
