Visualforce Charts with Javascript

Hi All,

This post talks about creating CUSTOM CHARTS in visualforce pages with javascript.

There are multiple ways to show charts in visualforce pages, such as we could create a report, dashboard and map the image to visualforce page, or use google charts api, or we can use charts tag which is direct and dynamic.

Requirement: Embed a chart which shows the salesrep the quarterly Targets and Booked.

Solution: It is assumed that we already have the data with the following fields.

Q1_Target__cQ2_Target__c
Q3_Target__c
Q4_Target__c

Q1_Booked__cQ2_Booked__c
Q3_Booked__c
Q4_Booked__c

Targets are set by the managers, and Booked are calculated using Rollup summaries on Opportunities.

Now that we have the data, lets create a visualforce page with charts.

There is this tag <apex:chart> to render data as charts.
Please read this link for more information.

create a VF page and run the following code.

<apex:page standardController="Account" >
 <apex:pageBlock title="Quarterly Performance">
         
         <script> 
         
            var dataArray = new Array();
           // the data in this array will be referred in the tags 
            dataArray.push({'data1':{!account.Q1_Target__c},'data2':{!account.Q1_Booked__c}, 'name':'Q1'});
            dataArray.push({'data1':{!account.Q2_Target__c},'data2':{!account.Q2_Booked__c}, 'name':'Q2'});
            dataArray.push({'data1':{!account.Q3_Target__c},'data2':{!account.Q3_Booked__c}, 'name':'Q3'});
            dataArray.push({'data1':{!account.Q4_Target__c},'data2':{!account.Q4_Booked__c}, 'name':'Q4'});
             
          </script>
        

<apex:chart height="400" width="800" data="dataArray">
    <apex:axis type="Numeric" position="left" fields="data1" minimum="2"
        title="In Millions"/> 
    <apex:axis type="Category" position="bottom" fields="name"
        title="Quarters"/>
        
    <apex:barSeries title="Quarterly Distributions" orientation="vertical" axis="left"
        xField="name" yField="data1,data2" colorSet="#F0F,#F00" groupGutter="1">
        
        <apex:chartTips height="20" width="120"/>
        
    </apex:barSeries> 
    
</apex:chart>

                  
         </apex:pageBlock>
</apex:page>

Point it to an account and see the chart.



\\,,//







Notes:
1 - Array() function is a dynamic array, u can push multi dimensional data into it. 
2 - groupGutter attribute in barseries tag specifies the gap between the twi bars.
3 - colorSet is used to assign the custom colors. we could use a legend tag and show the pattern.

This can be used in PE, this solution doesnt have apex. 


HTH
Prabhan

Comments

Post a Comment

Popular posts from this blog

Lightning spinner inside Button

I just came across this idea when I looked at some of the standard components by salesforce, for some reason they look way cooler. I thought of sharing this with you... We many a times try to use the spinner different ways, like, on the entire component, by blurring the whole area out, when I compare salesforce's components, they don't ALWAYS do that, they just show the spinner somewhere at the bottom/ top or just next to the button or disabling / replacing the button etc... Well, when I cracked it, it looked amazing. here is a simple component: <aura:component > <aura:attribute name="boooo" type="boolean" default="false"/> <lightning:buttonGroup> <lightning:buttonIcon iconName="utility:email" variant="brand" disabled="{!v.boooo}" onclick="{! c.handleClick }" alternativeText="Click to send Email" /> <lightning:button variant="brand" title
Read more

Passing URL parameters to controller in Lightning components/ AURA

Image
The following example helps you understand how to pass parameters from URL to components. In AURA/ Salesforce1 platform, it is made easy to pass the parameters to the controllers. We know that we can create attributes in the components as variables and they are meant for the scope of the components. So we create application attributes for the entire scope of application. So when we need to get the values from the URL, it is easy to pass them to application attributes, in other words, application attributes can take the values from URL directly. Here is a simple example: 1. Create an application - 'URLApp' 2. Create an attribute in the application XML. <aura:application> <aura:attribute name="fromURL" type="String" default="this is default value"/> Value in Attribute: {!v.fromURL}! </aura:application> Save the XML and run it, your output should be: Now, If you just pass a value to the url the
Read more

Nested AURA:IFs in Lightning Components Salesforce

Image
You can use use the nested IFs on the framework. Go to Developer Console>>New>>Lightning Application Give it a name, Submit Here is a sample code: <aura:application >  <aura:iteration items="1,2,3,4,5" var="item">  Iteration {!item} -  <aura:if isTrue="{!item=='1'}"> <b>In The First IF </b> <br/> <aura:set attribute="else"> <aura:if isTrue="{!item=='2'}"> <b>In The Second IF </b> <br/> <aura:set attribute="else"> <aura:if isTrue="{!item=='3'}"> <b>In The Third IF </b> <br/> <aura:set attribute="else"> <aura:if isTrue="{!item=='4'}">
Read more