THE CHALLENGE
Salesforce provides a number of dashboards and reports,
which support a variety of business charts. These charts can be Simpler to
create and customize because they do not require programming in Visualforce or
Apex. But it doesn't provide much information or interaction, need manual
refresh to synchronize datas, limitations in axis selections.
SOLUTION:
Using Javascript with some custom componenets and
visualforce pages we can create an intuitive charts for our organization.It
offers variations on bar, line, area and pie charts commonly used in business
graphics. If you need different chart types, or want to add advanced user or
page interactions, you might want to investigate using a JavaScript charting
library instead.This is more work, but allows greater customization.
What is JavaScript Charting?
JavaScript charting gives you an easy way to create
customized business charts, based on data sets you create directly from SOQL
queries, or by building the data set in your own Apex code. By combining and
configuring individual data series, you can compose charts that display your
data in ways meaningful to your organization.
JavaScript charts are rendered client-side using JavaScript.
This allows charts to be animated and visually exciting, and chart data can
load and reload asynchronously, which can make the page feel more responsive.
Why Would You Use JavaScript Charting?
Use JavaScript charting when the standard Salesforce charts
and dashboards are insufficient, or when you wish to compose custom pages that
combine charts and data tables in ways that are more useful to your
organization.
Who Provides these?
There are many javascript code providers for the charting
with complete documentation and libraries, some of the providers like
HighCharts, extJs, GoogleCharts etc, provides various charts for different
purposes.
Sample Implementation Using
HighChart:
vISUALFORCE CODE:
1. <apex:page controller="HighStockControllerdemo">
2.
3. <apex:includeScript value="{!URLFOR($Resource.Highstock,
'/js/jquery.min.js')}"/>
4. <apex:includeScript value="{!URLFOR($Resource.Highstock,
'js/highstock.js')}"/>
5. <apex:includeScript value="{!URLFOR($Resource.Highstock,
'js/modules/exporting.js')}"/>
6. <script language="JavaScript1.2" src="/js/functions.js"></script>
7. <script src="/soap/ajax/9.0/connection.js" type="text/javascript"></script>
8.
9. <script type="text/javascript" language="javascript">
10. $(function () {
11. $('#container').highcharts({
12. chart: {
13.
plotBackgroundColor: null,
14.
plotBorderWidth: null,
15.
plotShadow: false
16. },
17. title: {
18.
text: 'Invoice Statuses Report'
19. },
20. tooltip: {
21.
pointFormat: '{series.name}:
<b>{point.percentage:.1f}%</b>'
22. },
23. plotOptions: {
24.
pie: {
25.
allowPointSelect: true,
26.
cursor: 'pointer',
27.
dataLabels: {
28.
enabled: true,
29.
color: '#000000',
30.
connectorColor: '#000000',
31.
format: '<b>{point.name}</b>:
{point.percentage:.1f} %'
32.
},showInLegend: true
33.
}
34. },
35. series: [{
36.
type: 'pie',
37.
name: 'Invoice Chart',
38.
data: [{!LeaveStringColumn}]
39.
}]
40. });
41. });
42.
43. </script>
44.
45. <div id="wrapper">
46. <div id="container"></div>
47. </div>
48. </apex:page>
APEX CLASS:
1. public class HighStockControllerDemo{
2.
3. public List<Invoice__c> invList;
4. public HighStockControllerdemo() {
5. invList=[SELECT id,Status__c,Invoice_Total__c from Invoice__c];
6. }
7.
8. public String getLeaveStringColumn()
9. {
10. Map<String,Decimal> invMap = new Map<String, Decimal> {};
11. for(Invoice__c invLoop:invList)
12. {
13. invMap.put(invLoop.Status__c, invLoop.Invoice_Total__c);
14. }
15. return coloumnclass.getColumn(invMap);
16.
17. }
18. }
APEX CLASS:
1. global class coloumnclass
2. {
3. global static String getColumn(Map<String,Decimal> mapIn) {
4.
5. String mapString = '';
6. for (String fieldName : mapIn.keySet())
7. {
8. if (mapString != '')
9. mapString += ',';
10. mapString += '['+'\''+fieldName+'\''+','+mapIn.get(fieldName)+']';
11. }
12. return mapString;
13.
14. }
15. }
SCREENSHOT
.....
