Visualforce Charting: Line Chart Intervals with Dates

Question

I have a custom object, MrCustomObject__c, which I am making into an apex:chart.

Mr_Custom_Object__c has a Date field, Date__c, and a Number field, Number__c.

The Dates should go along the x-axis and the numbers along the y-axis.

I have a wrapper class, AxisDataWrapper, that controls the data in the chart.

public class AxisDataWrapper{

    public String date {get;set;}
    public Integer number {get;set;}

    public AxisDataWrapper(String date, Integer number){

        this.date = date;
        this.number= number;        
    }   
}

So let's say I create three AxisDataWrappers, [2012-11-01, 1], [2012-11-03, 2], [2012-12-25, 3].

Ideally I would want the x-axis to be a proper scale. I.e., AxisDataWrapper1 and 2 should be close to each other, and AxisDataWrapper3 further away.

Unfortunately, as this is a String, Visualforce obviously has no way of knowing what the intervals should be. I tried creating new empty AxisDataWrapper, [2012-11-02, null] but it complained it did not find a Number.

Here's the Chart VF code:

<apex:chart height="400" width="700" data="{!axisData}">
    <apex:axis type="Numeric" position="left" fields="number" minimum="-2" maximum="2"
        steps="7" grid="true"/>
    <apex:axis type="Category" position="bottom" fields="date"/>
    <apex:lineSeries axis="left" fill="true" xField="date" yField="number"
        markerType="circle" markerSize="3" markerFill="#FF0000"/>
</apex:chart>

As you can see, the x-axis type is Category because it's a String. But I thought, what if I made it Numeric and instead of a String in the AxisDataWrapper, I used a Date? Then I would get the appropriate x-axis scale.

This is what happened:

So, I'm kind of caught in the middle here, wanting my Dates to have a scale, but wanting that scale to make sense. Is there any way out?

Answer 1

When we looked at apex:chart before it went GA in Winter '12, we weren't able to find a way to do date-based charts. As a result, we ended up using the Google Visualization API instead.

Here's a Developerforce page on integrating with Visualforce.

I highly recommend this route -- we've been able to create great line graphs that are scaled as you'd expect.

Answer 2

You can try playing with <apex:chartLabel> - you'd use your numerics to make sure you have gaps but another field (possibly this date formatted to string) as the labels visible on the axis. I believe all of these have to be real fields in your wrapper, trick with String getLabel() { return dt.format(); } throws errors to the JS console.

I'm upvoting Tom's answer by the way - Visualforce charts are generally available but I cant exactly call them production quality... Using Google charts sounds safer for now.

Or you can patiently generate your gaps /spacers with records that have date filled in but null values ;)

Answer 3

I used the following JS function to convert Milliseconds to Dates when the chart had loaded

$('span[id$="myChartInner"] tspan').each(function(){

     var text = $(this).text();

         var milli = parseInt($(this).text());
         var d = new Date(milli);
         var month = d.getUTCMonth()+1;
         var day = d.getUTCDate();
         var year = d.getYear().toString().slice(1);

         var newdate = month + "/" + day + "/" + year;                      
         $(this).text(newdate);

         $(this).attr('x', parseInt($(this).attr('x')) + 30);



});