Line Chart Legends are switch

[Jeffrey Heredia]

I'm having issues with my legends while using the Line Chart Visualization tool. I'm able to successfully create the chart and legends however, the labels on the legends are reversed. I checked the documentation page and didn't see options on how to change the labels of a legend. I may just be blind but any assistance on how to do this would be helpful. I'm currently using a PHP function that populates a script for all the information that goes into the chart. If it makes it easier, to assist the code for the function is below:

function printChart($div, $data, $type, $chartTitle = null, $height, $hTitle, $vTitle){

$output = '';

// load jsapi

$output .= '<script type="text/javascript" src="https://www.google.com/jsapi"></script>' . "\n";

// start a code block

$output .= '<script type="text/javascript">' . "\n";

$output .= 'var chart = "notSet";' . "\n";

// load corechart packages

$output .= 'google.load(\'visualization\', \'1.0\', {\'packages\':[\'corechart\']});' . "\n";

// set callback function

$output .= 'google.setOnLoadCallback(setGoogleData);' . "\n";

$output .= 'google.setOnLoadCallback(drawChart);' . "\n";

// Initialize for Animation

$output .= 'newValue = 0;' . "\n";

$i=0;

$output .= 'var data = [];' . "\n";

$output .= 'function setGoogleData(){' . "\n";

foreach($data as $dataPart){

$output .= 'data['.$i.'] = new google.visualization.DataTable('.json_encode($dataPart).');' . "\n";

$i++;

}

$output .= 'var chart = new google.visualization.' . $type . '(document.getElementById(\'' . $div . '\'));' . "\n";

$output .= '}' . "\n";

// create callback function

$output .= 'function drawChart() {' . "\n";

$output .= 'if(chart == "notSet"){' . "\n";

$output .= 'chart = new google.visualization.' . $type . '(document.getElementById(\'' . $div . '\'));' . "\n";

$output .= '}' . "\n";

// set the options

//$output .= 'var options = ' . json_encode($options) . ';' . "\n";

$output .= 'var options = {' . "\n";

$output .= 'title: "'.$chartTitle.'",' . "\n";

$output .= 'titlePosition: "out",' . "\n";

$output .= 'legend: {position:"bottom"},' . "\n";

//$output .= 'width: "'.$width.'",' . "\n";

$output .= 'height: "'.$height.'",' . "\n";

//$output .= 'hAxis: {position:"out", slantedTextAngle:90, title:"Stops"},' . "\n";

$output .= 'hAxis: {position:"out", slantedTextAngle:60, title:"'.$hTitle.'"},' . "\n";

//kmm - added line below

//$output .= 'hAxis.textStyle: {color:"black", fontName:"arial", fontSize:8},' . "\n";

//$output .= 'vAxis: {position:"in", title:"Average Passengers"},' . "\n";

$output .= 'vAxis: {position:"in", title:"'.$vTitle.'"},' . "\n";

$output .= 'pointSize: 5,' . "\n";

//kmm - added line below

$output .= 'fontSize: 12,' . "\n";

//$output .= 'chartArea: {top:30, width:"90%"},' . "\n"; //original SS setting

//kmm - test setting

$output .= 'chartArea: {top:20, width:"90%", height:350},' . "\n";

$output .= 'animation: {duration: 200},' . "\n";

$output .= '};' . "\n";

// create and draw the chart

$output .= 'chart.draw(data[newValue], options);' . "\n";

$output .= '}' . "\n";

// Animation Function

$output .= 'function changeChart(){' . "\n";

$output .= 'newValue = document.getElementById("chartNumber").value;' . "\n";

$output .= 'drawChart();' . "\n";

$output .= '}' . "\n";

$output .= '</script>' . "\n";

return $output;

}

Thank you in advance for any assistance you provide!