SalesforceVenkat81215

HighCharts in Visualforce Page

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:

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:

<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>

view rawHighChartDemo.vf hosted with ❤ by GitHub

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>();
            
        }
    }
}

view rawhighChartDemoController.cls hosted with ❤ by GitHub

Chart Snapshot:

HighCharts gives option to download chart in PNG, JPEG, PDF and SVG vector image.

SalesforceVenkat81215

Thursday, July 6, 2017

HighCharts in Visualforce Page

No comments:

Post a Comment

	<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>

	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>();

	}
	}
	}