You need to sign in to do that
Don't have an account?

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