2

I am using the HighCharts.js scatter graph with Salesforce in a Visualforce page.

I wish to have the date of the 'Football Contract Signed' field display correctly on the x-axis, such that it would read 1st January, 2nd January, etc. How can I change the xAxis variable in the Visualforce page to display the date correctly? I have tried many, many different formats by reading the documentation but nothing is output correctly because at the moment, the x-axis outputs an integer which reads the index of the opportunity in the list (5, 10, 15 etc).

enter image description here

The visualforce page I have is:

   <apex:page controller="ScatterPlotHC">


    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>    
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>


   <script>


    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: 'Closed Won Football Contracts YTD by Sales Regions'
            },
            subtitle: {
                text: 'Source: All closed won New Business and Repeat football contract opportunities YTD'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'Date/Time Order'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Amount (GBP)'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top', 
                x: 100,
                y: 70,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                borderWidth: 1
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: 'x',
                        pointFormat: 'y'
                    }
                }
            },
            series: [{ name: 'APAC', 
                     color: 'rgba(255,0,0,.5)', 
                     data: {!oppListAPAC} }, 
                     { name: 'EMEA',
                      color: 'rgba(0,255,0,.5)',
                      data: {!oppListEMEA} },
                     { name: 'US',
                      color: 'rgba(255,255,0,.5)',
                      data: {!oppListUS} }
                     ]



           });
    });
    </script>

    </apex:page>

And the code is (have omitted the last 2 methods to make it more concise):

public class ScatterPlotHC {

    public static final Id oppNBRecordTypeId = Schema.SObjectType.Opportunity.getRecordTypeInfosByName().get('New Business - Read Only').getRecordTypeId();
    public static final Set<String> stages = new Set<String>{'Closed Won', 'Completed'};

    public static List<Opportunity> oppListAPAC = [SELECT convertCurrency(Amount), Football_Contract_Signed__c FROM Opportunity WHERE RecordTypeId =:oppNBRecordTypeId AND StageName =:stages AND Footballer_Region__c = 'APAC'];   


    public String getOppListAPAC() {
    List<List<Object>> results = new List<List<Object>>();
    for(Opportunity record: oppListAPAC) {
        List<Object> result = new List<Object>(2); 
        result[0] = record.Football_Contract_Signed__c;
        result[1] = record.Amount;
        results.add(result);
        System.debug(results);
    }
    return JSON.serialize(results);
} 

}
0

Take a look at this link, hope it helps, I would like to write the comment, but still not get enough reputation.^^

Scatter with x-axis (datetime)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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