[SalesForce] Grouping in Visualforce Charts

I have created a visualforce charting barSeries and it renders the results that I want aside from products with values of zero for the month.

The chart is a repeat business report that is meant to show how many quantities were sold during a particular month. Its intended to also show where products were not sold during a month so sales reps will know which products to target to customers.

The two things that this chart doesn't do yet that I would like it to are:

Group bars by product codes so legend shows product code's bar color.
show products with values of zero in addition to those with positive
values.

What do I need to change in my code to achieve this?

Apex Class:

public with sharing class VFChartVolReportController {

    public VFChartVolReportController() {

    }


public Account acc {get;set;}   

 public VFChartVolReportController(ApexPages.StandardController controller) {

        // Get information about the Account being worked on
           acc = [select Id, Name, CustomerMasterId__c, ShippingStreet, ShippingCity, ShippingState, Status_Flag__c, (select name, Tier_Code__c from Account_GPOs__r) from Account where Id = :controller.getRecord().Id limit 1];  
           }
// Data class 
public class Data {   
public String name { get; set; }  
public Integer data1 { get; set; }     
public Data(String name, Integer data1) {       
this.name = name;       
this.data1 = data1;

} 
}   

public List<Data> getChartData(){       

List<AggregateResult> arList = [SELECT COUNT(Id) inv, Product__r.Name, CALENDAR_MONTH(Actual_Ship_Date__c) monthKey, Sum(Quantity__c) quantityCount  from Invoice_History__c  where Account__c=:acc.Id AND (Product__r.Name like '%Filter%' OR Product__r.Name like '%Rapicide%' OR Product__r.Name like '%Intercept%')  AND Actual_Ship_Date__c >= :Date.newInstance(2013,1,1) group by Product__r.Name, CALENDAR_MONTH(Actual_Ship_Date__c) ORDER BY CALENDAR_MONTH(Actual_Ship_Date__c) asc];   
List<Data> dataList = new List<Data>();       
for (AggregateResult ar : arList){        
Integer monthInt = Integer.valueOf(ar.get('monthKey'));
String monthName = monthFromInteger(monthInt); 
Integer quantities = Integer.valueOf(ar.get('quantityCount'));   
dataList.add(new Data(monthName, quantities)); 
}   
return dataList; 
}   
// helper method to translate integer month to month string 
public String monthFromInteger(Integer month){ 
String s; 
s = month == 1 ? 'Jan' : s; 
s = month == 2 ? 'Feb' : s; 
s = month == 3 ? 'Mar' : s; 
s = month == 4 ? 'Apr' : s; 
s = month == 5 ? 'May' : s; 
s = month == 6 ? 'Jun' : s; 
s = month == 7 ? 'Jul' : s; 
s = month == 8 ? 'Aug' : s; 
s = month == 9 ? 'Sep' : s; 
s = month == 10 ? 'Oct' : s; 
s = month == 11 ? 'Nov' : s; 
s = month == 12 ? 'Dec' : s;   

return s; 

}   

}

Portion of the VF Page:

<apex:page standardcontroller="Account" extensions="AccountSnapShot2,VFChartVolReportController" tabStyle="Account" sidebar="false" showHeader="false"> 
<apex:pageBlock >
  <apex:pageBlockSection >
  <td align="left">
        <table width="10" align="left">
        <tr><td align="right"><apex:chart height="240px" width="600" data="{!chartdata}" animate="true">
<apex:axis type="Category" position="bottom" fields="inv,name">
<apex:chartLabel orientation="vertical"/> </apex:axis>
<apex:axis type="Numeric" position="left" steps="5" fields="data1"/>

<apex:barSeries colorsProgressWithinSeries="false" tips="true" gutter="75" axis="left" orientation="vertical" xField="inv,name" yField="data1" stacked="true">
<apex:chartTips valueField="inv,name" height="50" width="120"/>
</apex:barSeries>

<apex:legend position="bottom"/>
</apex:chart>
</td>
</tr>
</table>
</td>
  </apex:pageBlockSection>
  </apex:pageBlock>
</apex:page>

This is what it looks like now:
enter image description here

This is what I want it to look like:
enter image description here

Best Answer

The answer is going to be long so please allow me to post another one.

If the data need to be obtained dynamically, then you should look into "Providing Chart Data via a JavaScript Array" which allows you to get the data via controller and process it before you pass it to chart function.

Create a map in controller.

private static Map<String, Map<String,Integer>> data;

Assuming you retrieve month name and each product and its quantity from database one by one, put all data into the map. Please note that you will need sorting or some modification of the code to show the graph sorted by month.

public static Map<String, Map<String,Integer>> getChartData() {
    data = new Map<String, Map<String,Integer>>();
    //use a loop and edit the code below to putData(retrieved month name, retrieved quantity, retrieved product code);
    for (AggregateResult  ar: HERE IS YOUR QUERY ) {
            data.putData(monthFromInteger(monthInt), Integer.valueOf(ar.get('quantityCount')), yourProductName);
    }
    return data;
}

private static void putData(String name, Integer quantity, String productCode){
    Map<String,Integer> productGroup = new Map<String,Integer>();
    if (data.containsKey(name)){
        productGroup = data.get(name);
    }
    productGroup.put(productCode, quantity);
    data.put(name, productGroup);
}

Once you have your data in a map, you can pass the values to javascript array using the method below.

<script>
    // Build the chart data array in JavaScript
    var data = new Array();
</script>

<apex:repeat value="{!data}" var="monthList">
<script type="text/javascript">
var product = {};
</script>
<apex:repeat value="{!data[monthList]}" var="productList">
    {!monthList} {!productList} {!data[monthList][productList]}<br/>
    <script type="text/javascript">
        product['{!productList}'] = {!data[monthList][productList]};
        product['name'] = '{!monthList}';
    </script>
</apex:repeat>
<script type="text/javascript">
data.push(product);
</script>
</apex:repeat>

And pass the array to apex chart.

<apex:chart data="data" height="400" width="500">
    <apex:legend position="left"/>
    <apex:axis type="Numeric" position="left" title="title" grid="true"
        fields="{!yfield}" dashSize="2">
        <apex:chartLabel />
    </apex:axis>
    <apex:axis type="Category" position="bottom" fields="name">
        <apex:chartLabel rotate="315"/>
    </apex:axis>
    <apex:barSeries orientation="vertical" axis="left" 
        xField="name" yField="{!yfield}" title="{!title}"/>
</apex:chart>

Hope this help!

Related Solutions

[SalesForce] Visualforce chart value

The easy way to get the values to display in the actual chart would be to set the value you want into the labelField values that are passed into the chart data.

Let's say I use a wrapper class for my data set. It might normally look like this:

public class ChartWrapper {

  public String label {get;set;}
  public Integer value {get;set;}

  public ChartWrapper(String lab, Integer val){
    this.label = lab;
    this.value = val;
  }
}

Instead of just that, concatenate the value into the label.

public class ChartWrapper {

  public String label {get;set;}
  public Integer value {get;set;}

  public ChartWrapper(String lab, Integer val){
    this.label = lab + ' [' + val + ']'; //<--this is the critical bit that appends your value into the label for the chart
    this.value = val;
  }
}

In your controller, you'll query and populate the list of wrapper classes and create a method or property to bind to in the page (here, your mileage may vary greatly...often VF charting is using aggregate SOQL, or even external data...but I'm keeping this simple for the example):

List<ChartWrapper> chartData = new List<ChartWrapper>();

public List<ChartWrapper> getChartData() {
  for (Some_Obj__c o : [...some query...]) {
    ChartWrapper aRow = new ChartWrapper(Name, Some_Number_Field__c);
    chartData.add(aRow);
  }
  return chartData;
}

Then in your chart, you'll bind to it and pass it in as normal:

<apex:chart height="450" width="450" data="{!chartData}" >
<apex:pieSeries dataField="value" labelField="label" /> 
</apex:chart>

There is a downside to this that the labels in the legend will also have the values on them...which just makes for a less pretty presentation. But I suppose worst case you could remove the legend.

There is another more difficult option that would require you to use the rendererFn attribute in the apex:pieSeries and execute some client-side JS. This might give you more fine grained control, and depending on your skills with JS might be more comfortable, but looking at the rendered HTML, there aren't any easy element Ids to pick out in the chart to guide you in manipulating the HTML of the labels but not the pie segments themselves, and then you'd have to pass the formed labels to the page for access by Javascript so you could perform the manipulation. That seems clunky and inelegant to me.

[SalesForce] Image Charts in Visualforce / PDF

You can get standard report charts, via a dashboard, into a pdf - I have this working for a client so I know this works.

What you need to do add the report +chart to a dashboard and then view the dashboard. Right click on a chart and open in new tab.

enter image description here

Copy the image url and paste into your pdf page into an img html component. This is an example I have working (ids changed to protect identity):-

<apex:page showheader="false" renderAs="pdf">
  <img src="https://cs8.salesforce.com/servlet/servlet.ChartServer?rsid=0FLL00000009XXX&ruid=00580000003BXXX&did=01ZC00000013SP0&s=8&fs=12&tfg=12&tfs=-16777216&explode=0&c=bar&cs=0&title=Top+10+Users+-+%23+of+Followers&eh=yes&compo=yes&fg=-16777216&bg1=-1&bg2=-1&bgdir=2&dl1=Full+Name&dl2=&l=2&sax=yes&Yman=no&nc=10&actUrl=%2F00OC0000004nUGU%3Fdbw%3D1&sd=4&scv=no&sct=no&spt=no&cu=USD&ab=X&u=0&vt=0&ab2=Y&u2=0&vt2=0&vl0=Record+Count&spoc=no&topn=no&gc0=-1&gc1=-1&gc2=-1&sona=0&refreshts=1389629381000"/>

  </apex:page>

Whats really interesting is that when the dashboard is refreshed, the chart is also refreshed and so although this is a static url, the chart is 'dynamic'.

Best Answer

Related Solutions

[SalesForce] Visualforce chart value

[SalesForce] Image Charts in Visualforce / PDF

Related Topic