开发者

How to change tooltip text for google chart api?

http://code.google.com/apis/chart/

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table, 
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

  // Create our data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'date');
  data.addColumn('number', 'Views');
  data.addColumn('number', 'People');
  data.addRows([
    <?php echo $analytics; ?>
  ]);
  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.AreaChart(document.getElementById('Analytics-Visualization'));
  chart.draw开发者_开发知识库(data, {lineWidth:3, pointSize:8, width: 745, height: 240,chartArea:{left:20,top:20,width:640}});
}
</script>

lets say when we do this it does this

How to change tooltip text for google chart api?

to

How to change tooltip text for google chart api?

maybe using the listener stuff ?


For custom tooltips, add the tooltip as an extra column:

function drawVisualization() {
    data = new google.visualization.DataTable()
    data.addColumn('string', 'Date');
    data.addColumn('number');
    data.addColumn({type:'string',role:'tooltip'});
    data.addRow();
    base = 10;
    data.setValue(0, 0, 'Datapoint1');
    data.setValue(0, 1, base++);
    data.setValue(0, 2, " This is my tooltip1 ");

    data.addRow();
    data.setValue(1, 0, 'Datapoint2');
    data.setValue(1, 1, base++);
    data.setValue(1, 2, "This is my second tooltip2");

    // Draw the chart.
    var chart = new google.visualization.BarChart(document.getElementById('visualization'));
    chart.draw(data, {legend:'none', width:600, height:400});
}


@Adam; If you want to edit text then check this http://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

you can change your code from here

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task');
  data.addColumn('number', 'Hours per Day');
  data.addRows(5);
  data.setValue(0, 0, 'Work');
  data.setValue(0, 1, 11);
  data.setValue(1, 0, 'Eat');
  data.setValue(1, 1, 2);
  data.setValue(2, 0, 'Commute');
  data.setValue(2, 1, 2);
  data.setValue(3, 0, 'Watch TV');
  data.setValue(3, 1, 2);
  data.setValue(4, 0, 'Sleep');
  data.setValue(4, 1, 7);

and if you want your custom tooltip you have to use javascript for these

http://code.google.com/p/gvtooltip/

http://informationandvisualization.de/blog/tooltips-google-chart-api

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜