whateveryourscriptis

How To Create A Chart With Salesforce

By admin February 5, 2014
Blog, Salesforce Development 0

Another question has been asked to our expert Salesforce development team. The question was “how to create a chart with Salesforce.” A chart is a combination of multiple sets of data on a single chart and each set of data based on different fields, so values are easy to compare. We will give you a simple example of how to create a chart with Salesforce using this simple example.

Step1:

Go to Setup in Salesforce → Build → Develop → Pages

Click on the “New Button” to create a new page

create a new page

Step2:

Create a Salesforce Visualforce page with the name “Chart”

Salesforce Visualforce page

Step3: 

Paste this code in the Salesforce Visualforce editor

<apex:page controller=”Chart”><apex:chart height=”400″ width=”1000″ data=”{!data}”><apex:legend position=”right”/><apex:axis type=”Numeric” position=”left”  fields=”data1″title=”Side- A” grid=”true”/>

<apex:axis type=”Numeric” position=”right” fields=”data3″

title=”Side- B”/>

<apex:axis type=”Category” position=”bottom” fields=”name”

title=”Side- C”>

<apex:chartLabel rotate=”320″/>

</apex:axis>

<apex:barSeries title=”A” orientation=”vertical” axis=”right”

xField=”name” yField=”data3″>

<apex:chartTips height=”20″ width=”120″/>

</apex:barSeries>

<apex:lineSeries title=”B” axis=”left” xField=”name” yField=”data1″

fill=”true” markerType=”cross” markerSize=”4″ markerFill=”red”/>

<apex:lineSeries title=”C” axis=”left” xField=”name” yField=”data2″

markerType=”circle” markerSize=”4″ markerFill=”yellow”/>

</apex:chart>

</apex:page>

Step4:

Go to Salesforce Setup → Build → Develop → Apex Classes

Click on the “New Button” to create a new class

create a new class

Step5:

Paste this code in the Class editor

public class Chart {// Return a list of data points for a chartpublic List<Data>getData() {List<Data> data = new List<Data>();data.add(new Data(‘A’, 31, 40, 44));

data.add(new Data(‘B’, 44, 58, 83));

data.add(new Data(‘C’, 38, 82, 25));

data.add(new Data(‘D’, 74, 48, 85));

data.add(new Data(‘E’, 39, 20, 93));

data.add(new Data(‘F’, 33, 57, 99));

data.add(new Data(‘G’, 92, 03, 60));

data.add(new Data(‘H’, 87, 73, 45));

data.add(new Data(‘I’, 34, 65, 28));

data.add(new Data(‘J’, 78, 66, 56));

data.add(new Data(‘K’, 85, 67, 83));

data.add(new Data(‘L’, 29, 57, 85));

data.add(new Data(‘M’, 74, 57, 85));

data.add(new Data(‘N’, 57, 85, 95));

data.add(new Data(‘O’, 77, 56, 74));

return data;

}

// Wrapper class

public class Data {

public String name { get; set; }

public Integer data1 { get; set; }

public Integer data2 { get; set; }

public Integer data3 { get; set; }

public Data(String name, Integer data1, Integer data2, Integer data3) {

this.name = name;

this.data1 = data1;

this.data2 = data2;

this.data3 = data3;

}

}

}

Step6: 

Open this Salesforce Visualfforce page in your browser you getting like this

Open this Salesforce Visualfforce in browser

We hope this simple walk through of how to create a chart with Salesforce has been helpful to you. If you need any Salesforce development assistance or anything else then please feel free to reach out to the team at Mind Digital anytime.

Related Posts