vAxis formatting

[eoionline]

Hi,

I'm new to js, so please go easy. I'm trying to format my vAxis for
currency, but I cannot figure out why my current code does not work.
The extra code is for a custom popup that appears when the user mouses
over a certain column. Any help is greatly appreciated.

Thanks

Code -->

google.load('visualization', '1', {'packages': ['linechart']});

//set callback
google.setOnLoadCallback (createChart);

//callback function
function createChart() {

//create data table object
var dataTable = new
google.visualization.DataTable();

//define columns
dataTable.addColumn('string','Year');
dataTable.addColumn('number', 'Top 1%');
dataTable.addColumn('number', 'Highest 20%');
dataTable.addColumn('number', 'Fourth 20%');
dataTable.addColumn('number', 'Middle 20%');
dataTable.addColumn('number', 'Next 20%');
dataTable.addColumn('number', 'Bottom 20%');

//define rows of data
dataTable.addRows([['1979',
550000,140300,73200,54100,36100,16600],
['1980',518500,135700,71000,52300,34700,16000],
['1981',514900,134700,71400,51700,34300,15600]]);

//instantiate chart objects
var chart = new
google.visualization.LineChart(document.getElementById('chart'));

var formatter = new google.visualization.NumberFormat({prefix:
'$'});

formatter.format(dataTable, 1); // Apply formatter
formatter.format(dataTable, 2); // Apply formatter
formatter.format(dataTable, 3); // Apply formatter

//define options for visualization

//draw chart
chart.draw(dataTable, {width: 900, height: 400, title:
'Average Pre-tax U.S. Household Income, 1979 - 2007', vAxis: {format:
'$#,###', maxValue: 10}}
);

//register callbacks
google.visualization.events.addListener(chart,
'onmouseover', showDetails);
google.visualization.events.addListener(chart,
'onmouseout', hideDetails);
}

function showDetails(e) {
switch (e['column']) {
case 1:
document.getElementById('details5').style.visibility='visible';
break;
case 2:
document.getElementById('details4').style.visibility='visible';
break;
case 3:
document.getElementById('details3').style.visibility='visible';
break;
case 4:
document.getElementById('details2').style.visibility='visible';
break;
case 5:
document.getElementById('details1').style.visibility='visible';
break;
case 6:
document.getElementById('details0').style.visibility='visible';
break;
}
}

function hideDetails(e) {
switch (e['column']) {
case 1:
document.getElementById('details5').style.visibility='hidden';
break;
case 2:
document.getElementById('details4').style.visibility='hidden';
break;
case 3:
document.getElementById('details3').style.visibility='hidden';
break;
case 4:
document.getElementById('details2').style.visibility='hidden';
break;
case 5:
document.getElementById('details1').style.visibility='hidden';
break;
case 6:
document.getElementById('details0').style.visibility='hidden';
break;
}
}

[asgallant]

You've got almost everything right - you need to load the 'corechart' package, though - not the 'linechart' package:

google.load('visualization', '1', {'packages': ['corechart']});

and everything should work correctly.

[eoionline]

Thank you! You're a lifesaver