search

google / google-visualization-issues

288 stars 35 forks source link

Annotation on scatter chart #1371

Open orwant opened 9 years ago

orwant commented 9 years ago 
What would you like to see us add to this API?
Adding a label next to a point on a scatter chart should be possible.
Visiting all the tooltips to find a particular point is not practical.
On the tooltip I can add more info but on the label I would like to add a short indication
of what that point represents. Example: 'August'

I tried d.addColumn({type: 'string', role: 'annotation'});
but it does not work on a scatter chart.

What component is this issue related to (PieChart, LineChart, DataTable,
Query, etc)?
Scatter Chart

*********************************************************
For developers viewing this issue: please click the 'star' icon to be
notified of future changes, and to let us know how many of you are
interested in seeing it resolved.
*********************************************************

Original issue reported on code.google.com by csantos.pti on 2013-11-26 10:08:43

orwant commented 9 years ago 
This is driving me nuts. Is it possible at all or is it a dead end?

The docs on annotations.boxStyle say "For charts that support annotations" and in the
same box "This option is currently supported for area, bar, column, combo, line, and
scatter charts". So scatter plot explicitly supports the styling of annotations but
not annotations themselves?

Original issue reported on code.google.com by kallumburgin on 2014-03-15 21:00:45

orwant commented 9 years ago 
I have the same problem. It seems like one can style and add some annotations, but they
aren't visible in Scatter Charts

Original issue reported on code.google.com by nemethalkor on 2014-04-14 23:05:59

orwant commented 9 years ago 
The workaround is to use a Line Chart with no line and big points:

var chartOptions = {
  annotation: { 0: {style: 'letter'}},
  annotations: {
    textStyle: {
      auraColor: '#ccc',
      bold: true,
      color: '#000',
      fontSize: 10,
      opacity: 0.3
    }
  },
  displayAnnotations: true,
  legend: 'none',
  lineWidth: 0,
  pointSize: 5,

};
var chart = new google.visualization.LineChart(document.getElementById('chartWrapper'));
chart.draw(data, chartOptions);

I hope that helps, it's really silly that this workaround needs to be done, but there
it is :/

Original issue reported on code.google.com by kallumburgin on 2014-04-15 16:45:21

orwant commented 9 years ago 
Hey, thank you for the workaround.But, I'm not sure whether this workaround would be
helpful for me. Is it right that I must have up to 31 columns in my data for 30 different
lines/points? Because each line need an own colum for the Y-Axis,right?

At the moment I am using Bubblechart as a workaround but that looks terrible.

Original issue reported on code.google.com by nemethalkor on 2014-04-15 17:20:32

orwant commented 9 years ago 
I think it depends how you define your DataTable. While trying to use the Scatter Chart
I was building the DataTable as a JS array and then converting it.

But an easier way is to just build the DataTable:

$data = new google.visualization.DataTable();
$data.addColumn('number', 'SomeLabelX');
$data.addColumn('number', 'SomeLabelY');
$data.addColumn({type:'string', role:'annotation'});
// $data.addColumn({type:'string', role:'annotationText', p:{html:true}});
// Add more columns for tooltips and stuff
$.each(someData, function(key, value) {
  $row = [];
  $row.push(value.theX);
  $row.push(value.theY);
  $row.push(value.theAnnoation);
  // $row.push(value.ThePopupAnnotationText);
  // Any extra data can go here
  $data.addRow($row);
}
var chartOptions = {...}
var chart = new google.visualization.LineChart(document.getElementById('chartWrapper'));
chart.draw($data, chartOptions);

So there are the x and y columns, as well as two to make the annotation, but there
can be as many rows as you want

Original issue reported on code.google.com by kallumburgin on 2014-04-15 17:29:12

orwant commented 9 years ago 
Thank you for the explanation. Nomw I get it.

Original issue reported on code.google.com by nemethalkor on 2014-04-15 19:08:02