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 about data aggregation. They are also platform dependent, have browser compatibility issues, have limited Axis Selection, Exporting Options, and need manual refresh to synchronize data.
SOLUTION: Using Javascript with some custom components 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 consider using a JavaScript charting library instead. This involves 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 open/paid vendors who provide Javascript charting with complete documentation and libraries. Some of the vendors like HighCharts, extJs, GoogleCharts, FusionCharts etc, provides various charts for different purposes.
WHAT IS HIGHCHARTS? Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, area spline, column, bar, pie, scatter, angular gauges, area range, area splinerange, column range, bubble, box plot, error bars, funnel, waterfall and polar chart types.
WHY HIGHCHARTS?
Open Source One of the key features of Highcharts is that under any of the licenses, free or not, you are allowed to download the source code and make your own edits. This allows for customization and greater flexibility.
Compatibility It works in all modern mobile and desktop browsers including the iPhone/iPad and Internet Explorer from version 6. On iOS and Android, multitouch support provides a seamless user experience. Standard browsers use SVG for graphics rendering. In legacy Internet Explorer, graphics are drawn using VML.
Simple Configuration Syntax Setting the Highcharts configuration options require no special programming skills. The options are given in a JavaScript object notation structure, which is basically a set of key/value pairs connected by colons, separated by commas and grouped by curly brackets.
Dynamic Through a full API you can add, remove and modify series and points or modify axes at any time after chart creation. Numerous events supply hooks for programming against the chart. In combination with jQuery, MooTools or Prototype’s Ajax API, this openup solutions like live charts constantly updating with values from the server, user supplied data and more.
Multiple Axes Sometimes you want to compare variables that are not the same scale – for example temperature versus rainfall and air pressure. Highcharts let you assign a y-axis for each series – or an x-axis if you want to compare data sets of different categories. Each axis can be placed to the right or left, top or bottom of the chart. All options can be set individually, including reversing, styling and position.
Export and print With the exporting module enabled, your users can export the chart to PNG, JPG, PDF or SVG format at the click of a button or print the chart directly from the web page.
Zooming By zooming in on a chart you can examine an interesting part of the data more closely. Zooming can be in the X or Y dimension or both.
External Data Loading Highcharts take the data in a JavaScript array, which can be defined in the local configuration object, in a separate file or even on a different site. Furthermore, the data can be handed over to Highcharts in any form, and a callback function is used to parse the data into an array.
FEATURES SAMPLE SNAPSHOTS:
1. With Symbols
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. }
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; } }
SCREENSHOT 1: SAMPLE OUTPUTSCREENSHOT 2: SAMPLE OUTPUTREFERENCE DOCUMENTATION:http://api.highcharts.com/highcharts, http://api.highcharts.com/highstock
