2

I need to change the dashboard called “Sales Team Dashboard”. The first top left dashboard needs to show as a percentage of goal. The graph should look similar to the below. One thing to note is that each person has a different goal… so we need to be able to specify by user.

Sales Team Dashboard

There is a Number field on User object named Goals which need to be utilized on this chart.

I am new to Visualforce charting, but if it is to be utilized, how can we group the records on axis based on the dates available.

See below is the controller code I may want to use. But I am not able to figure out how to write the visualforce code in order display in grouping. Please suggest.

////// Controller code
public class ChartController2 {
// Return a list of data points for a chart
public List<Data> getData() {
    return ChartController2.getChartData();
}

// Make the chart data available via JavaScript remoting
@RemoteAction
public static List<Data> getRemoteData() {
    return ChartController2.getChartData();
}

// The actual chart data; needs to be static to be
// called by a @RemoteAction method
public static List<Data> getChartData() {
    List<Data> data = new List<Data>();
    data.add(new Data('User1', 30, '25 Apr'));
    data.add(new Data('User2', 44, '25 Apr'));
    data.add(new Data('User3', 25, '25 Apr'));
    data.add(new Data('User4', 74, '26 Apr'));
    data.add(new Data('User5', 65, '26 Apr'));
    data.add(new Data('User6', 33, '26 Apr'));
    data.add(new Data('User7', 92, 27 Apr'));
    data.add(new Data('User8', 87, '27 Apr'));
    data.add(new Data('User9', 34, '27 Apr'));
    data.add(new Data('User10', 78, '27 Apr'));
    data.add(new Data('User11', 80, '28 Apr'));
    data.add(new Data('User12', 17, '28 Apr'));
    return data;
}

// Wrapper class
public class Data {
    public String name { get; set; }
    public Integer rating { get; set; }

    public String ratingDate {get;set;}
    public Data(String name, Integer rating, String ratingDate) {
        this.name = name;
        this.rating = rating;

        this.ratingDate = ratingDate;
    }
}
 }



<!-- Visualforce page: -->

<apex:page controller="ChartController2">
<apex:form >
<apex:pageBlock >
    <apex:pageBlockSection columns="1">
        <apex:chart height="400" width="700" data="{!data}" >
            <apex:legend position="left"/>
            <!-- <apex:axis type="Numeric" position="right" fields="data1"  title="Revenue (millions)" grid="true"/> -->
            <apex:axis type="Category" position="left" fields="ratingDate"  title="Day of the Week">
                <apex:chartLabel rotate="315"/>
            </apex:axis>
            <apex:barSeries title="name" orientation="horizontal" axis="left"  xField="name" yField="ratingDate" colorSet="red"/>
            <!-- <apex:barSeries title="Data1" orientation="vertical" axis="right"  xField="name" yField="data1" colorSet="red" stacked="false">
                <apex:chartTips height="20" width="120"/>
            </apex:barSeries>
            <apex:barSeries title="Data2" orientation="vertical" axis="right"  xField="name" yField="data2" colorSet="green" stacked="false">
                <apex:chartTips height="20" width="120"/>
            </apex:barSeries>
            <apex:barSeries title="Data3" orientation="vertical" axis="right"  xField="name" yField="data3" stacked="false">
                <apex:chartTips height="20" width="120" />
            </apex:barSeries> -->
            <!-- <apex:barSeries title="Data1" orientation="vertical" axis="right"  xField="name" yField="data1,data2,data3" colorSet="red"/> -->
        </apex:chart>
    </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

As you can see the output below, the date is not grouping here. Please suggest.

enter image description here

Improve this question

2 Answers 2

Reset to default
1

Full Result Below...

Here's a partial result. Still need to work on the grouping.

Add a bottom axis for Rating. And in the bar series make the xfield="rating" and yField="ratingDate".

<apex:page controller="ChartController2">
    <apex:pageBlock >
        <apex:pageBlockSection columns="1">
            <apex:chart height="400" width="700" data="{!data}">
                <apex:legend position="left"></apex:legend>
                <apex:axis 
                    type="Category" 
                    position="left" 
                    fields="ratingDate" 
                    title="Day of the Week"
                >
                    <apex:chartLabel rotate="315"></apex:chartLabel>
                </apex:axis>
                <apex:axis 
                    type="Numeric" 
                    position="bottom" 
                    fields="rating" 
                    title="Rating"
                >
                    <apex:chartLabel rotate="315"></apex:chartLabel>
                </apex:axis>
                <apex:barSeries 
                    title="name" 
                    orientation="horizontal" 
                    axis="left"  
                    xField="rating" 
                    yField="ratingDate" 
                    colorSet="red"
                ></apex:barSeries>
            </apex:chart>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

Chart 1

Success with some limitation

enter image description here

Successfully groups User's Rating per Rating Date. However, I had to ensure each Rating Date has a Rating for each User. If I didn't do that, I'd get a VisualforceChartException.

The Visualforce Page, ExampleChart, constructs the Chart Data, data, via JavaScript into the format described here. I also used this other example as a guide.

apex:barSeries has a property renderFn. It's not very well documented how to use it, but it takes in 5 arguments. But I kept getting errors trying to explore it. See Step 5 in the other example.

Class

/**====================================
 *    ExampleChartor - Version 1.0.0
 * ====================================
 * Dependencies: --None--
 *
 * Unit Test:   ExampleChartor_test
 *
 * Version 1.0.0:
 *      2016-05-11 by Scott Pelak.
 *      Created.  Used in ExampleChart VFP to demonstrate groupings in a Bar Series.
 */
public class ExampleChartor {
    // Version 1.0.0: Created.
    Map<String, Map<String, Integer>> dateRatings = new Map<String, Map<String, Integer>>();
    Set<String> names = new Set<String>();

    public ExampleChartor() {
        /**
         * Version 1.0.0:
         *      Created.  For each data in Data:
         *          - Sets ratings as dateRatings for data's ratingDate.
         *          - If ratings is null, sets ratings as a new Map: User Name --> Rating.
         *          - Puts (data's name, data's rating) into ratings.
         *          - Puts (data's ratingDate, ratings) into dateRatings.
         *          - Adds data's name to names.
         *      Makes sure each "ratings" Map has every User Name.  For each ratingDate in dateRating's Key Set:
         *          - For each name in names:
         *              ~ If dateRatings for ratingDate for name is null, puts (name, 0) into dateRatings for ratingDate.
         */
        for(Data data : getData()){
            Map<String, Integer> ratings = this.dateRatings.get(data.ratingDate);
            ratings = ratings == null ? new Map<String, Integer>() : ratings;
            ratings.put(data.name, data.rating);
            this.dateRatings.put(data.ratingDate, ratings);

            this.names.add(data.name);
        }

        // Make sure each "ratings" Map has every User Name.
        for(String ratingDate : this.dateRatings.keySet()){
            for(String name : this.names){
                Object putResult = this.dateRatings.get(ratingDate).get(name) == null ? this.dateRatings.get(ratingDate).put(name, 0) : null;
            }
        }
    }

    public Map<String, Map<String, Integer>> getDateRatings(){
        /**
         * Version 1.0.0:
         *      Created.  Returns dateRatings.
         */
        return this.dateRatings;
    }

    public String getXFields(){
        /**
         * Version 1.0.0:
         *      Created.  Sets names a new list of String for names.
         *      Sorts names.
         *      Returns names joined by ','.
         */
        String[] names = new List<String>(this.names);
        names.sort();
        return String.join(names, ',');
    }

    // -------------------------------------------  Original Methods  -------------------------------------------
    public List<Data> getData(){
        /**
         * Version 1.0.0:
         *      Created.  Returns Chart Data.
         */
        return getChartData();
    }

    @RemoteAction
    public static List<Data> getRemoteData(){
        /**
         * Version 1.0.0:
         *      Created.  Make the chart data available via JavaScript remoting
         *      Returns Chart Data.
         */
        return getChartData();
    }

    // -------------------------------------------  Data + getChartData()  -------------------------------------------
    public class Data {
        /**==========================
         *    Data - Version 1.0.0
         * ==========================
         * Dependencies: --None--
         * 
         * Version 1.0.0:
         *      Created.  Wrapper Class.
         */
        // Version 1.0.0: Created.
        public String name {get; set;}
        public Integer rating {get; set;}
        public String ratingDate {get;set;}

        public Data(String name, Integer rating, String ratingDate) {
            /**
             * Version 1.0.0:
             *      Created.  Sets name, rating, and ratingDate.
             */
            this.name = name;
            this.rating = rating;
            this.ratingDate = ratingDate;
        }
    }

    public static List<Data> getChartData() {
        /**
         * Version 1.0.0:
         *      Created.  The actual chart data; needs to be static to be called by a @RemoteAction method.
         *      Returns a new list of Data containing sample Data for User1, User2, User3, and User4.
         */
        return new List<Data>{
            new Data('User1', 30, '25 Apr'),
            new Data('User2', 44, '25 Apr'),
            new Data('User3', 25, '25 Apr'),
            new Data('User1', 74, '26 Apr'),
            new Data('User2', 65, '26 Apr'),
            new Data('User3', 33, '26 Apr'),
            new Data('User1', 92, '27 Apr'),
            new Data('User3', 34, '27 Apr'),
            new Data('User1', 78, '28 Apr'),
            new Data('User2', 80, '28 Apr'),
            new Data('User3', 17, '28 Apr'),
            new Data('User4', 17, '28 Apr')
        };
    }
}

Visualforce Page

<apex:page 
    controller="ExampleChartor"
    sidebar="false"
>
    <script>
        var data = new Array();

        <apex:repeat value="{!dateRatings}" var="ratingDate">
            var ratings = {};
            ratings['ratingDate'] = '{!ratingDate}';
            <apex:repeat value="{!dateRatings[ratingDate]}" var="name">
                ratings['{!name}'] = {!dateRatings[ratingDate][name]};
            </apex:repeat>  
            data.push(ratings);
        </apex:repeat>

        console.log(data);
    </script>
    <apex:pageBlock >
        <apex:pageBlockSection columns="1">
            <apex:chart 
                height="400" 
                width="700" 
                data="data"
            >
                <apex:legend position="left"></apex:legend>
                <apex:axis 
                    type="Category" 
                    position="left" 
                    fields="ratingDate" 
                    title="Day of the Week"
                >
                    <apex:chartLabel rotate="315"></apex:chartLabel>
                </apex:axis>
                <apex:axis 
                    type="Numeric" 
                    position="bottom" 
                    fields="{!xFields}" 
                    title="Rating"
                >
                    <apex:chartLabel rotate="315"></apex:chartLabel>
                </apex:axis>
                <apex:barSeries 
                    title="{!xFields}" 
                    orientation="horizontal" 
                    axis="left"  
                    xField="{!xFields}" 
                    yField="ratingDate" 
                    colorSet="#FFB100,#F15D15,#359A2C,#009BBD,#17C3B5,#9E62B7,#A2D760,#8DD7E8"
                ></apex:barSeries>
            </apex:chart>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
Improve this answer
0
2

I managed to group them by putting a member in the data class for each user. It shows bars with 0 and I am having trouble hiding those bars.

Visualforce Page 

    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection columns="1">

                <apex:chart height="400" width="700" data="{!data}" >
                    <apex:legend position="left"/>
                    <!-- <apex:axis type="Numeric" position="right" fields="data1"  title="Revenue (millions)" grid="true"/> -->
                    <apex:axis type="Category" position="left" fields="ratingDate" minimum="1" title="Day of the Week">
                        <apex:chartLabel rotate="315"/>
                    </apex:axis>
                    <apex:axis type="Numeric" position="bottom" fields="{!XFields}" title="Revenue (millions)" />

                    <apex:barSeries title="name" orientation="horizontal" axis="left" xField="{!XFields}" yField="ratingDate" colorSet="{!colors}"/>
                </apex:chart>
            </apex:pageBlockSection>

        </apex:pageBlock>
    </apex:form>
</apex:page>

Controller

////// Controller code
public class ExampleClass {
// Return a list of data points for a chart
    public List<Data> getData() {
        return ExampleClass.getChartData();
    }

    // Make the chart data available via JavaScript remoting
    @RemoteAction
        public static List<Data> getRemoteData() {
        return ExampleClass.getChartData();
    }

    // The actual chart data; needs to be static to be
    // called by a @RemoteAction method
    public static List<Data> getChartData() {
        List<Data> data = new List<Data>();

        data.add(new Data('25 Apr', 30, 44, 25, null, null, null, null, null, null, null, null, null));
        data.add(new Data('26 Apr', null, null, null, 74, 65, 33, null, null, null, null, null, null));
        data.add(new Data('27 Apr', null, null, null, null, null, null, 92, 87, 34, 78, null, null));
        data.add(new Data('28 Apr', null, null, null, null, null, null, null, null, null, null, 80, 17));
        return data;
    }

    public String getXFields() {
        return 'user1,user2,user3,user4,user5,user6,user7,user8,user9,user10,user11,user12';
    }

    public String getColors() {
        return 'red,cyan,blue,darkblue,lightblue,purple,yellow,lime,magenta,silver,orange,brown';
    }

// Wrapper class
public class Data {

    public String ratingDate {get;set;}
    public Integer user1 {get;set;}
    public Integer user2 {get;set;}
    public Integer user3 {get;set;}
    public Integer user4 {get;set;}
    public Integer user5 {get;set;}
    public Integer user6 {get;set;}
    public Integer user7 {get;set;}
    public Integer user8 {get;set;}
    public Integer user9 {get;set;}
    public Integer user10 {get;set;}
    public Integer user11 {get;set;}
    public Integer user12 {get;set;}

    public Data(
        String ratingDate, 
        Integer user1, 
        Integer user2, 
        Integer user3, 
        Integer user4, 
        Integer user5, 
        Integer user6, 
        Integer user7, 
        Integer user8, 
        Integer user9, 
        Integer user10, 
        Integer user11, 
        Integer user12
        ) {
            this.ratingDate = ratingDate;
            this.user1 = user1 == null ? 0 : user1;
            this.user2 = user2 == null ? 0 : user2;
            this.user3 = user3 == null ? 0 : user3;
            this.user4 = user4 == null ? 0 : user4;
            this.user5 = user5 == null ? 0 : user5;
            this.user6 = user6 == null ? 0 : user6;
            this.user7 = user7 == null ? 0 : user7;
            this.user8 = user8 == null ? 0 : user8;
            this.user9 = user9 == null ? 0 : user9;
            this.user10 = user10 == null ? 0 : user10;
            this.user11 = user11 == null ? 0 : user11;
            this.user12 = user12 == null ? 0 : user12;
        }

    }
}
Improve this answer
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .