Apex Code Development You need to sign in to do that
Don't have an account?
Merry S Question about formatting dates and currency using google charts
I am using a pretty basic line chart and I need to get the dates, currency and color of the lines formatted. I have researched this on here and stackexchange and I can find plenty of information about how to do it using outputtext, but nothing that has actually worked. I dont know CSS very well, and I have tried using the information on the google playground on how to format, but that has not worked for me either. I am sure it is something simple, but I thought I would ask.
The date comes out formatted like this:
2013-12-25 00:00:00
The currency numbers are just numbers (have not really tried much with this since I could not get the date to work)
And I just have no clue where to change the color of the line.
Any help would be much appreciated - articles, KB, anything.
Here is the controller -
public with sharing class Groupfor3RE4 {
// Data class
public class Data {
public Integer tre { get; set; }
public String time1 { get; set; }
public Data( Integer tre, String time1) {
this.tre = tre;
this.time1 = time1;
}
}
public List<Data> getChartData1(){
List<AggregateResult> arList = [SELECT AVG(X3RE__c) cThreeRE ,
Date__c Day
from X3RE_Snapshot_Data__c
group by Date__c];
List<Data> dataList = new List<Data>();
for (AggregateResult ar : arList){
Integer cThree_RE = Integer.valueOf(ar.get('cThreeRE'));
String Day = String.valueOf(ar.get('Day'));
dataList.add(new Data( cThree_RE, Day ));
}
return dataList;
}
public class DataRR {
public String time1 { get; set; }
public Integer rr { get; set; }
public DataRR( String time1, Integer rr) {
this.time1 = time1;
this.rr = rr;
}
}
public List<DataRR> getChartData2(){
List<AggregateResult> arList = [SELECT
AVG(Total_RR_Converted_to_USD__c) cRR ,
Date__c Day
from X3RE_Snapshot_Data__c
group by Date__c];
List<DataRR> dataList1 = new List<DataRR>();
for (AggregateResult ar : arList){
String Day = String.valueOf(ar.get('Day'));
Integer cRR = Integer.valueOf(ar.get('cRR'));
dataList1.add(new DataRR( Day, cRR ));
}
return dataList1;
}
public class DataRRR {
public String time1 { get; set; }
public Integer rrr { get; set; }
public DataRRR( String time1, Integer rrr) {
this.time1 = time1;
this.rrr = rrr;
}
}
public List<DataRRR> getChartData3(){
List<AggregateResult> arList = [SELECT
AVG(Referenceable_Recurring_Revenue_R_RR__c) cRRR ,
Date__c Day
from X3RE_Snapshot_Data__c
group by Date__c];
List<DataRRR> dataList2 = new List<DataRRR>();
for (AggregateResult ar : arList){
String Day = String.valueOf(ar.get('Day'));
Integer cRRR = Integer.valueOf(ar.get('cRRR'));
dataList2.add(new DataRRR( Day, cRRR ));
}
return dataList2;
}
}And the VF Page
<apex:page controller="Groupfor3RE4" sidebar="false" showheader="false">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
3RE Dashboard
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Date', '3RE'],
<apex:repeat value="{!ChartData1}" var="c">
['{!c.time1}',{!c.tre} ],
</apex:repeat>
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 600, height: 400,
vAxis: {maxValue: 10}}
);
var data1 = google.visualization.arrayToDataTable([
['Date', 'RR'],
<apex:repeat value="{!ChartData2}" var="c">
['{!c.time1}',{!c.rr} ],
</apex:repeat>
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization2')).
draw(data1, {curveType: "function",
width: 400, height: 400,
vAxis: {maxValue: 10}}
);
var data2 = google.visualization.arrayToDataTable([
['Date', 'RRR'],
<apex:repeat value="{!ChartData3}" var="c">
['{!c.time1}',{!c.rrr} ],
</apex:repeat>
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization3')).
draw(data2, {curveType: "function",
width: 400, height: 400,
vAxis: {maxValue: 10}}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<table>
<tr>
<td><div id="visualization" style="width: 400px; height: 400px;"></div></td>
<td><div id="visualization2" style="width: 400px; height: 400px;"></div></td>
<td><div id="visualization3" style="width: 400px; height: 400px;"></div></td>
</tr>
<tr>
</tr>
</table>
</body>
</apex:page>
For the date and date time format use Outputfield, this will definitely work or
put a spave in the value attribute before curly braces, same as for the currency field.
<apex:outputfield value=" {!datime}" />
Hope I am getting you right, otherwise let me know
Regards,
ABhi