Custom charts using visualforce page

To generate custom charts by using visualforce page, just go through this simple demo:

//Visualforce code:

<apex:page controller=”PieChartController” title=”Pie Chart”>
<apex:chart height=”350″ width=”450″ data=”{!pieData}”>
<apex:pieSeries dataField=”data” labelField=”name”/>
<apex:legend position=”right”/>
</apex:chart>
</apex:page>

// Apex controller code

public class PieChartController {
public List<PieChartData> getPieData() {
List<PieChartData> data = new List<PieChartData>();
data.add(new PieChartData(‘SUN’, 30));
data.add(new PieChartData(‘MON’, 15));
data.add(new PieChartData(‘TUE’, 10));
data.add(new PieChartData(‘WED’, 20));
data.add(new PieChartData(‘THU’, 18));
data.add(new PieChartData(‘FRI’, 8));
data.add(new PieChartData(‘SAT’, 10));
return data;
}
// Wrapper class
public class PieChartData {
public String name { get; set; }
public Integer data { get; set; }
public PieChartData(String name, Integer data) {
this.name = name;
this.data = data;
}
}
}
//Output for this demo
Chart Demo output

One Comments

Comments are closed.