VisualForce Charting in Salesforce

As salesforce has given us the functionality of report and dashboard to create chart then what is the use of visualforce charting?.

In some situations existing functionality of salesforce can not meet our requirement properly . Suppose there is a requirement to compose custom pages that combine charts and data tables in ways that are more useful to our organization.In that case visual force charting is useful.There are also other way to meet this requirement. We can use Google chart Api for this.In my previous post I have explained.

Visualforce 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 Apexcode. By combining and configuring individual data series, you can compose charts that display your data in ways meaningful to your organization.

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

This is the my page and controller. 

<apex:page controller="OppsControllernew" tabStyle="Account">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection title="Chart With Table">
                <apex:outputPanel style="float:left;">
                    <apex:chart data="{!Opportunities}" width="500" height="250">
                        <apex:axis type="Numeric" position="left" fields="Amount" title="Amount"/>
                        <apex:axis type="Category" position="bottom" fields="Name" title="Name"/>
                            
                        <apex:barSeries orientation="horizontal" axis="left" xField="Amount" yField="Name"/>
                        <!--<apex:pieSeries dataField="amount" labelField="name"/>-->
                        <apex:legend position="right"/>
                    </apex:chart>
                
                    <apex:chart data="{!Opportunities}" width="500" height="250">
                        <apex:axis type="Category" position="bottom" fields="Name" title="Name" />
                        <apex:axis type="Numeric" position="left" fields="Amount" title="Amount" grid="true"/>
                        <apex:lineSeries axis="left" fill="true"  xField="Name" yField="Amount"  markerType="cross" markerSize="4" markerFill="#FF0000"/>
                  </apex:chart>
                </apex:outputPanel>
              
               <apex:outputPanel style="float:right;margin-right:4cm;height:600px;width:400px;" >
                 <p><b> Opportunity Table</b></p><br/>
                 <apex:pageBlockTable value="{!Opportunities}" var="opp">
                    <apex:column headerValue="Opportunity" value="{!opp.Name}"/>
                    <apex:column headerValue="Amount" value="{!opp.amount}"/>
                    <apex:column headerValue="Created Date" value="{!opp.createddate}" style="width:80px"/>
                </apex:pageBlockTable>
            </apex:outputPanel>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

My controller is 

public class OppsControllernew {
    
    // Get a set of Opportunities 
    
    public ApexPages.StandardSetController setCon {
        get {
            if(setCon == null) {
                setCon = new ApexPages.StandardSetController(Database.getQueryLocator(
                      [SELECT Name, Type,createddate, Amount, Closedate FROM Opportunity]));
                setCon.setPageSize(5);
            }
            return setCon;
        }
        set;
    }
    
    public List<Opportunity> getOpportunities() {
         return (List<Opportunity>) setCon.getRecords();
    }

}

A Visualforce chart binds to the source of its data through the data attribute on the <apex:chart> component.
Here data source is sObjects that is Opportunity.
Data can be 

• Name of java script function
•  Non-Salesforce data sources by building a JavaScript array
• Apex wrapper objects

The object field names used as data attributes are case-sensitive in JavaScript while field names in Apex and Visualforce are case-insensitive. Be careful to use the precise field name in the fields, xField, and yField attributes of axes and data series components, or your chart will silently fail.Make sure all the name perfectly equal between fields , xFields and yFields.

Limitations Of Visualforce Charting 

• Visualforce charts only render in browsers which support scalable vector graphics (SVG).
• Visualforce charts won’t display in pages rendered as PDFs
• Dynamic (Apex-generated) charting components are not supported at this time

Now the final out put will be like this 

Exploring all chart in Visualforce page by using JavaScript Remoting & Google Charts API.

This post is all about how to draw a chart in Visual force page by using JavaScript Remoting & Google Charts API.

I had faced some requirement to draw a different types of chart in a visualforce page and also to display number of  distinct record for further reference. I had done some work around and finally I had reached to the final destination. Here I have created one object ChartObject__c and two field Name and Amount.

Here I am sharing some code snippet for your reference. 

<apex:page controller="GoogleChartsController" sidebar="false">

    <!-- Google API inclusion -->
    <apex:includeScript id="a" value="https://www.google.com/jsapi" />
    <apex:sectionHeader title="Google Charts + Javascript Remoting" subtitle="Demoing - Opportunities by Exepected Revenue"/> 
    
    <!-- Google Charts will be drawn in this DIV -->
    <div id="chartBlock"/>
    <div id="chartBlockpie"/>
    <div id="chartBlockline"/>
    <div id="chartBlockbar" />
    <div id="chartBlockgauge" />
     
    <script type="text/javascript">
     
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(initCharts);

function initCharts() {   
  
// Following the usual Remoting syntax
// [<namespace>.]<controller>.<method>([params...,] 
//<callbackFunction>(result, event) {...}
// namespace : 
// controller : GoogleChartsController
// method : loadOpps
 
GoogleChartsController.loadOpps(
function(result, event){ 
 
// load Column chart
var visualization = new google.visualization.ColumnChart(document.getElementById('chartBlock'));

// Prepare table model for chart with columns
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Amount');  
 
// add rows from the remoting results
for(var i =0; i<result.length;i++){
var r = result[i];
data.addRow([r.Name, r.Amount__c]);
}
var chart = new google.visualization.PieChart(document.getElementById('chartBlockpie'));
chart.draw(data, result);
 
var chart = new google.visualization.LineChart(document.getElementById('chartBlockline'));
chart.draw(data, result);
 
var chart = new google.visualization.BarChart(document.getElementById('chartBlockbar'));
chart.draw(data, result);
 
/*var chart = new google.visualization.ScatterChart(document.getElementById('chartBlockscater'));
chart.draw(data, result);*/
 
var chart = new google.visualization.GaugeChart(document.getElementById('chartBlockgauge'));
chart.draw(data, result);
 
// all done, lets draw the chart with some options to make it look nice.
visualization.draw(data, {legend : {position: 'top', textStyle: {color: 'blue', fontSize: 10}}, width:window.innerWidth,vAxis:
{textStyle:{fontSize: 10}},hAxis:{textStyle:{fontSize: 10},showTextEvery:1,slantedText:false}});


  },{escape:true});
 }
       </script>
    <p>Total Different Kind Of Production:<apex:outputText value="{!totalvalue}"/></p>
</apex:page>

My controller

global with sharing class GoogleChartsController {

public Integer totalvalue{get;set;}

    public GoogleChartsController() {

   

// Integer totalvalue;

list<AggregateResult>  Namecount=new List<AggregateResult>();

Namecount= [select  COUNT_DISTINCT(Amount__c) ctr from ChartObject__c];

        for(AggregateResult sobj:Namecount){

          

totalvalue=Integer.valueOf(sobj.get('ctr'));

        }

        System.debug('################asish####################'+totalvalue);

   } 

    

    /**

      Loads most recent 10 Opportunities

    */

    @RemoteAction   

    global static ChartObject__c[] loadOpps() {

       

        return  [select Id, Name, Amount__c from ChartObject__c  order by CreatedDate DESC limit 10];

       

    }  

}

Here I am sharing some image regarding chart.

Uses Of Apex Repeat

An iteration component that allows you to display the contents of a collection according to a structure that you specify. The collection can include up to 1,000 items.

This component cannot be used as a direct child of the following components:
<apex:dataTable>
<apex:pageBlockTable>
<apex:panelBar>
<apex:selectCheckboxes>
<apex:selectList>
<apex:selectRadio>
<apex:tabPanel>

Suposse there is a requirement, you need to display Five accounts with thier Contacts in a visualforce page.Format should be like this image

How will you do it?
It is very simple, just use repeat in visualforce page.
Here is visualforce page and controller

<apex:page controller="UseofRepeatOnAccountController" sidebar="false" tabStyle="Account">
    <apex:form >
    <apex:pageBlock title="Accounts with assoicated Contacts">
        <apex:repeat value="{!accountList }" var="acc">
            <apex:pageBlockSection title="{!acc.name}">
                <apex:pageBlockTable value="{!acc.contacts}" var="con">
                    <apex:column value="{!con.Firstname}"/>
                    <apex:column value="{!con.Lastname}"/>
                </apex:pageBlockTable>
            </apex:pageBlockSection>
        </apex:repeat>
    </apex:pageBlock>
    </apex:form>
</apex:page>

Controller is..
public class UseofRepeatOnAccountController {
    public List<Account> accountList{get;set;}
   
    public UseofRepeatOnAccountController() {
        accountList = new List<Account>();
        accountList = [SELECT id, Name,(SELECT LastName ,FirstName From Contacts)From Account limit 5] ;
    }
}