+ Start a Discussion

VF Charting and Line Charts w/Dates

Hello.  I am trying to change (to VF charts) some of my charts that are currently displayed on a VF page via Google charts.

I understand the basics of how to create a chart via VF charting.  However, I am having a bit of trouble creating a line chart over a date range.  Specifically, I have 10 records spanning a six month period.  Each of these records has a corresponding dollar amount.  My goal is to create a line graph with the dollar amount as the Y axis...and the date as the X axis.  Unfortunately the date intervals are not uniform for these ten records (seven of them occur during the first three months).

So, does anyone have an examples of how line charts are created depicting date intervals (via the new VF charting capability)?  I had tried to look for some examples and could not find anything.

Thanks in advance.
You'll want to aggregate the values together by calendar year and calendar month, and extrapolate the missing in-between dates so that the chart correctly displays the months with no data.

Here's a design that I used in a project for this purpose:

Integer firstMonth = 120000, lastMonth = 0, tempMonth;
Map<Integer, Decimal> values = new Map<Integer, Decimal>();
for(AggregateResult result:[SELECT CALENDAR_YEAR(CloseDate) year, CALENDAR_MONTH(CloseDate) month, SUM(Amount) total
            FROM Opportunity
            GROUP BY CALENDAR_YEAR(CloseDate), CALENDAR_MONTH(CloseDate)]) {
    Integer thisMonth = Integer.valueOf(result.get('year'))*12+Integer.valueOf(result.get('month')-1;
    firstMonth = Math.min(thisMonth, firstMonth);
    lastMonth = Math.max(thisMonth, lastMonth);
    values.put(thisMonth, Decimal.valueOf(result.get('total'));
// chartData is an array of ChartItem, a wrapper class with a date and decimal value
tempMonth = firstMonth;
while(tempMonth <= lastMonth) {
    chartData.add(new ChartItem(tempMonth, values.get(tempMonth++));

The ChartItem class converts the data as appropriate:

public class ChartItem {
    public Date chartDate;
    public Decimal chartValue;
    public ChartItem(Integer m, Decimal v) {
        if(v == null) v = 0;
        chartValue = v;
        chartDate = Date.newInstance(Math.floor(m/12), Math.mod(m, 12)+1, 1);