4

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:

sample chart

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?

2
  • I have this similar issue. Did you found a workaround for this? Dec 17, 2014 at 8:38
  • Yes, I did the conversion in Javascript. See my new answer
    – George S.
    Dec 17, 2014 at 16:35

3 Answers 3

4

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.

1

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 ;)

0

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);



});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.