Re: How to specify the “line” style on a chart annotation using gwt-visualization api

[Rogelio Flores]

Ups, looks like I should have searched better. I just found this in this forum:

https://groups.google.com/forum/?fromgroups=#!searchin/google-visualization-api/annotation$20style$20letter$20line/google-visualization-api/ccLfHm-EhFU/2uMHoJT5TKkJ

I'm still not sure I can implement this using gwt-visualization, but hopefully from the javascript sample above I can figure it out even if I have to use javascript (JSNI). If any of you has already  done this on the GWT/Java side, please share your knowledge. Thanks.

On Saturday, January 5, 2013 4:13:08 PM UTC-5, Rogelio Flores wrote:

(Asked same question here: http://goo.gl/SScHN but since I haven't figured this out and nobody has responded, asking here)

Using gwt-visualization 1.1.2 on a GWT app, I was able to add annotation and annotationText columns to a LineChart thanks to: ComboChart with annotation text in gwt google-visualization

but instead of the "letter" annotation style, I really want the "line" style that the documentation refers to: "You can specify the line style by setting this chart option: annotation:

 {'column_id': {style: 'line'}}

(See https://developers.google.com/chart/interactive/docs/roles#annotationtextrole)

but I'm not sure how I can do this using the gwt wrapper. In fact, I'm not even able to set this property in the Code Playground (using javascript). I tried setting the property like this (and in some other variations):

data.addColumn({type: 'string', role: 'annotation', id:'TEST'});
annotation: {'TEST': {style: 'line'}} // inside chart options

but the style of the annotation doesn't change. As I said, interested in doing this on GWT/Java, but even if you know how to do it on javascript, I might be able to figure out a gwt solution.

[Rogelio Flores]

This is how it can be done using GWT (and JSNI):

// First create this JSNI method to create the Options object for your chart

private native Options createOptionsWithAnnotationStyle() /*-{

      options = {

         annotation: {1: { style : 'line'} } // this assumes the column with index 1 is {type: "string", role: "annotation"}

      };

      return options;

   }-*/;

// Then use it like this:

Options options = createOptionsWithAnnotationStyle();

options.setTitle(title); // etc

myChart = new LineChart(myDataTable, options);

Now if only somebody would tell me that the color of the annotation line CAN be changed, and how (question posted on thread linked below), I'll be a happy man. At least for today ;-)

[Abdullah Akram]

Can you please make a simple example at jsfiddle?

[Abdullah Akram]

Here is my function to draw chart. I need vertical annotation but syle: line is not working with column charts.

function drawChart() {

    // Create and populate the data table.

  var option = {

  width:175, height:500,

               animation: {duration: 2000, easing: 'linear',},

               vAxis: {minValue:0, maxValue:334000, 

gridlines: {

color: 'transparent'

},

baselineColor: 'transparent',

textStyle: {

color: 'transparent'

}

},

               hAxis: {gridlines: {

color: 'transparent'

},

textStyle: {

color: '#fff'

}

},

tooltip: {trigger: 'none'

},

legend: {position: 'none'},

axisTitlesPosition: 'none',

backgroundColor: '#026B56',

annotations: {

textStyle: {

fontSize: 12,

color: '#fff',     // The color of the text.

opacity: 1          // The transparency of the text.

},

enableInteractivity: false,

                                                1: {

style: 'line'

}

}

  };

  var data = new google.visualization.DataTable();    

  data.addColumn('string', 'N');

  data.addColumn('number', 'Value');

  data.addColumn({type: 'string', role: 'style'});

  data.addColumn({type: 'string', role: 'annotation'});

  data.addRow(['11', 0, 'color: #E5E0D7', '239,458']);

  data.addRow(['12', 0, 'color: #00BC6F', '273,530']);

  data.addRow(['13', 0, 'color: #82BC00', '300,000']);

  data.addRow(['14', 0, 'color: #5AB6B2', '333,000']);

  // Create and draw the visualization.

  var chart = new google.visualization.ColumnChart(document.getElementById('chart-6'));

  chart.draw(data, option);

  data.setValue(0, 1, 239458);

  data.setValue(1, 1, 273530);

  data.setValue(2, 1, 300000);

  data.setValue(3, 1, 333000);

  chart.draw(data, option);

  

}

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

google.setOnLoadCallback(drawChart);

[Daniel LaLiberte]

Hi Abdullah,

We are making many changes to the annotations feature which will show up in new releases.  Try loading "1.1" instead of "1" to get the latest experimental version to see it as soon as it becomes available.

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Abdullah Akram]

Dear Daniel LaLiberte! thanks for response.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA