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!
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/ed7f98c3-e985-4078-915e-2e91711dd1e9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
