We can use interactive charts provided by HighCharts in Visualforce page. Here I am going to display line chart using highCharts.
For example, we will display the count of opportunity group by stage.
Download js files from below mentioned URL and store it in static resource:
Create VF page "HighChartDemo" and apex class "HighChartDemoController". Below is VF page and apex class code:
Chart Snapshot:
HighCharts gives option to download chart in PNG, JPEG, PDF and SVG vector image.For example, we will display the count of opportunity group by stage.
Download js files from below mentioned URL and store it in static resource:
- https://code.highcharts.com/highcharts.js
- https://code.highcharts.com/modules/exporting.js
- https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
Create VF page "HighChartDemo" and apex class "HighChartDemoController". Below is VF page and apex class code:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <apex:page controller="highChartDemoController" sidebar="false" id="pg"> | |
| <head> | |
| <apex:includeScript value="{!$Resource.jqueryjs}"/> | |
| <apex:includeScript value="{!$Resource.highChartsjs}"/> | |
| <apex:includeScript value="{!$Resource.exportingjs}"/> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| getDataForHighChart(); | |
| }); | |
| function getDataForHighChart() { | |
| Visualforce.remoting.Manager.invokeAction( | |
| '{!$RemoteAction.highChartDemoController.getDataForChart}', | |
| function(result, event){ | |
| if (event.status) { | |
| var clabels=result.chartLabels ; | |
| var cData=result.chartData ; | |
| //alert('---clabels:'+clabels+'----cData:'+cData); | |
| if(clabels.length>0){ | |
| GenerateChart(clabels,cData); | |
| } | |
| } | |
| }, | |
| {escape: true} | |
| ); | |
| } | |
| function GenerateChart(chartlabels,count){ | |
| $('#container').highcharts({ | |
| title: { | |
| text: 'No.of opportunities grouped by Stage', | |
| x: -20 //center | |
| }, | |
| subtitle: { | |
| text: 'Source: Opportunity Records', | |
| x: -20 | |
| }, | |
| xAxis: { | |
| categories: chartlabels | |
| }, | |
| yAxis: { | |
| title: { | |
| text: 'no.of opportunities' | |
| }, | |
| plotLines: [{ | |
| value: 0, | |
| width: 1, | |
| color: '#808080' | |
| }] | |
| }, | |
| tooltip: { | |
| valueSuffix: '' | |
| }, | |
| legend: { | |
| layout: 'vertical', | |
| align: 'right', | |
| verticalAlign: 'middle', | |
| borderWidth: 0 | |
| }, | |
| series: [{ | |
| name: 'Number of Opportunity', | |
| data: count | |
| }] | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |
| </body> | |
| </apex:page> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public class highChartDemoController{ | |
| @RemoteAction | |
| public static HighChartDataWrapper getDataForChart(){ | |
| AggregateResult[] groupedResults = [select stageName sn ,COUNT(id) st from Opportunity where stageName !=null Group By stageName]; //Log_Date__c, | |
| HighChartDataWrapper dataForChart = new HighChartDataWrapper(); | |
| for (AggregateResult ar : groupedResults){ | |
| system.debug('********ar:'+ar); | |
| integer count=integer.valueof((ar.get('st'))); | |
| string stage= (string)ar.get('sn'); | |
| dataForChart.chartLabels.add(stage); | |
| dataForChart.chartData.add(count); | |
| } | |
| system.debug('******dataForChart:'+dataForChart); | |
| return dataForChart ; | |
| } | |
| public class HighChartDataWrapper{ | |
| public List<String> chartLabels {get;set;} //this will opportunity stage | |
| public List<Integer> chartData {get;set;} //no.of opportunities | |
| public HighChartDataWrapper(){ | |
| chartLabels = new List<String>(); | |
| chartData = new List<Integer>(); | |
| } | |
| } | |
| } |
Chart Snapshot:
Hi, do I need to buy a highchart license if I am using it for my client project?
ReplyDeleteI tried this code but no chart appeared on the screen. Please suggest!
ReplyDelete