How can I show/create simple Bar Graph on a Salesforce Visualforce Page?

Hi Pranav,

Please refer to the code below :-

<apex:page controller=”AccountRec_Barchart” docType=”html-5.0″ title=”Bar chart” >
<apex:form >

<apex:outputText value=”from Date”>
</apex:outputText>
<apex:input type=”date” value=”{!fromdate}”/>
<apex:outputText value=”ToDate”></apex:outputText>
<apex:input type=”date” value=”{!todate}” />
<apex:commandButton value=”submit” action=”{!submit}” reRender=”chartid” />

</apex:form>

<apex:chart id=”chartid” height=”300″ width=”650″ data=”{!data}” colorSet=”2A98DC” resizable=”true” >

<apex:axis type=”Numeric” position=”left” fields=”count” title=”Recordcount” minimum=”0″ grid=”false” />
<apex:axis type=”Category” position=”bottom” fields=”billingcityname” title=”billingcity” />
<apex:barSeries orientation=”vertical” axis=”left” xField=”billingcityname” yField=”count”>

</apex:barSeries>

</apex:chart>

<apex:chart height=”300″ width=”650″ data=”{!data}” resizable=”true”>
<apex:pieSeries tips=”true” dataField=”count” labelField=”billingcityname”></apex:pieSeries>
<apex:legend position=”right”/>
</apex:chart>

</apex:page>

public class AccountRec_Barchart
{
public date fromDate{set;get;}
public date todate{set;get;}
public list<aggregateresult> listaggregate= new list<aggregateresult>();
public list<barchartdata> lb = new list<barchartdata>();

public void submit()
{
listaggregate = [select billingcity, COUNT(Id) n
from Account
where createddate > : fromDate and createddate <:todate
group by billingcity
HAVING billingcity like ‘%’];
}

public barchartdata[] getdata()
{
system.debug(‘getdata’);
barchartdata[] datachart = new barchartdata[]{};

for(aggregateresult a :listaggregate)
{
datachart.add(new barchartdata(a));
}
return datachart;
}

// wrapper class
public class barchartdata
{
public string city {set;get;}
public integer count{set;get;}
public string billingcityname{set;get;}
barchartdata(aggregateresult result)
{
this.count = (Integer) result.get(‘n’);
this.city = (string) result.get(‘billingcity’);
this.billingcityname = city+”;
}
}
}

I hope this helps.