+ Start a Discussion
DSLDSL 

Google Visualization

I was trying the google viz code and could make a pie chart. But I couldn't figure out how to generate the corrent json string to make a Gauge.

 

Has anyone made a gauge before and could share a snippet of how to define the googleviz rows and cells to make it draw? I'm trying to put 2 or 3 together.

 

Thanks!

DSL

Best Answer chosen by Admin (Salesforce Developers) 
jlojlo

The data format for the gauge is very straightforward: http://code.google.com/apis/visualization/documentation/gallery/gauge.html

 

Your table should contain two columns: A string label value and a number value. 

 

Here's some sample controller code:

 

public String getAverageCostPerCustomer(){
GoogleViz2 gv = new GoogleViz2();

gv.cols = new list<GoogleViz2.col> {
new GoogleViz2.Col('A','Label','string'),
new GoogleViz2.Col('B','Value','number')
};

Map<Id, Decimal> costsByCustomerMap = new Map<Id, Decimal>();

for(Account a : accounts){
Decimal accountCost = 0;
for(Cost_Information__c c : a.Cost_Information__r){
accountCost += c.Amount__c;
}

costsByCustomerMap.put(a.Id, accountCost);
}

Decimal totalCost = 0;
for (Id key : costsByCustomerMap.keySet()) {
Decimal accountCost = costsByCustomerMap.get(key);

totalCost += accountCost;
}

Decimal avgCost = totalCost / accounts.size();

GoogleViz2.row row = new GoogleViz2.row();
row.cells.add ( new GoogleViz2.cell( 'Cost' ) );
row.cells.add ( new GoogleViz2.cell( avgCost ) );
gv.addRow( row );

string results = gv.toJsonString();

system.debug('\n\n\ngv.toJsonString() = ' + results);

return results;
}

 

 The markup to include the Gauge component is:

 

<c:Gauge jsondata="{!AverageCostPerCustomer}"

title="Average Cost per Customer"

min="200000" max="300000"

redFrom="275000" redTo="300000"

yellowFrom="250000" yellowTo="275000"

greenFrom="200000" greenTo="250000"/>

 

 

 

Message Edited by jlo on 04-09-2009 11:05 AM
Message Edited by jlo on 05-28-2009 02:02 PM

All Answers

jlojlo

Are you using these Google Visualization components? http://wiki.developerforce.com/index.php/Google_Visualizations

 

There is a gauge component that should be pretty easy to use: http://code.google.com/p/apex-google-visualization/source/browse/trunk/GoogleVisualizations/src/components/Gauge.component

 

Also, Google's AJAX API Playground has a number of good samples that you can experiment on: http://code.google.com/apis/ajax/playground/

DSLDSL

That's the one. It can make bar charts fine, but when I try to write the apex code like on the sample page:

 

http://wiki.developerforce.com/index.php/Google_Visualizations

 

Nothing shows up. So I figured I didn't have the arguments right. We create a new googleviz, then define columns and give it rows. It's what to put in the columns and rows that I am assuming is the problem. Does anyone have a sample gauge apex code that works? Something just like the demo salescontroller?

 

Thanks,

DSL

jlojlo

The data format for the gauge is very straightforward: http://code.google.com/apis/visualization/documentation/gallery/gauge.html

 

Your table should contain two columns: A string label value and a number value. 

 

Here's some sample controller code:

 

public String getAverageCostPerCustomer(){
GoogleViz2 gv = new GoogleViz2();

gv.cols = new list<GoogleViz2.col> {
new GoogleViz2.Col('A','Label','string'),
new GoogleViz2.Col('B','Value','number')
};

Map<Id, Decimal> costsByCustomerMap = new Map<Id, Decimal>();

for(Account a : accounts){
Decimal accountCost = 0;
for(Cost_Information__c c : a.Cost_Information__r){
accountCost += c.Amount__c;
}

costsByCustomerMap.put(a.Id, accountCost);
}

Decimal totalCost = 0;
for (Id key : costsByCustomerMap.keySet()) {
Decimal accountCost = costsByCustomerMap.get(key);

totalCost += accountCost;
}

Decimal avgCost = totalCost / accounts.size();

GoogleViz2.row row = new GoogleViz2.row();
row.cells.add ( new GoogleViz2.cell( 'Cost' ) );
row.cells.add ( new GoogleViz2.cell( avgCost ) );
gv.addRow( row );

string results = gv.toJsonString();

system.debug('\n\n\ngv.toJsonString() = ' + results);

return results;
}

 

 The markup to include the Gauge component is:

 

<c:Gauge jsondata="{!AverageCostPerCustomer}"

title="Average Cost per Customer"

min="200000" max="300000"

redFrom="275000" redTo="300000"

yellowFrom="250000" yellowTo="275000"

greenFrom="200000" greenTo="250000"/>

 

 

 

Message Edited by jlo on 04-09-2009 11:05 AM
Message Edited by jlo on 05-28-2009 02:02 PM
This was selected as the best answer
jlojlo

If that doesn't help, please post the JSON that you're generating. The format of the JSON string can be a bit tempermental.

 

Outputting the JSON and visually inspecting it is one of the most effective debugging strategies that I've found when working with the Google Visualization API.

NikiVNikiV
I've been playing with this as well and am looking to roll a pie chart page out to Prod.  The Test coverage on both JSONObject and GoogleViz class is not up to 75% - anyone out there added enough test methods to pass the grade?  It would be great to update the classes in the Code Share with this so we don't each have to do it.
jlojlo

NikiV wrote:
I've been playing with this as well and am looking to roll a pie chart page out to Prod.  The Test coverage on both JSONObject and GoogleViz class is not up to 75% - anyone out there added enough test methods to pass the grade?  It would be great to update the classes in the Code Share with this so we don't each have to do it.

Both classes should have >75% code coverage now.