Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
ShowAll Questionssorted byDate Posted
bozotheclown

# 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.

sfdcfox
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:

<pre>
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) {
}
</pre>

The ChartItem class converts the data as appropriate:

<pre>
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);
}
}
</pre>