annotation overlap the next or previous bar annotation

954 views
Skip to first unread message

Shahid Majeed

unread,
Jan 23, 2016, 4:30:45 PM1/23/16
to Google Visualization API
Hi,

I tried to produce sales bar chart with google chart api. everything working fine except annotation are overlaping each other that make very hard to user to read. Could please suggest me how to handle this problem. 

Picture of my graph is attached and my script is here.

                <script type='text/javascript'>  
                    google.load('visualization', '1', {packages: ['corechart', 'bar'],'language': 'sv'});
                    google.setOnLoadCallback(drawAntalChart);
                     
                    function drawAntalChart() {        
                    var data = google.visualization.arrayToDataTable([  
                    ['Projektledare','försäljning','Antal','Avg.försäljning/Antal'],['Martinez',479440,589,813.9898],['Andersson ',233351,691,337.7004],['Kercevic',34700,57,608.7719]]);var view = new google.visualization.DataView(data);view.setColumns([0, 1,{calc: "stringify",sourceColumn: 1,type: "string",role: "annotation"},2, {calc: "stringify",sourceColumn: 2,type: "string",role: "annotation"},3,{calc: "stringify",sourceColumn: 3,type: "string",role: "annotation"}]);var formatter = new google.visualization.NumberFormat({suffix: ' kr.', negativeColor: 'red',
                               negativeParens: true, decimalSymbol: ',',groupingSymbol: ' '});formatter.format(data, 1);formatter.format(data, 3); var options = {title: 'Projektledare statistik försäljning/Antal',vAxis: {format: 'currency', gridlines: { count: 10 }} };var chart = new google.visualization.ColumnChart(document.getElementById('div_chart'));chart.draw(view, options); }</script>


Daniel LaLiberte

unread,
Jan 23, 2016, 6:39:08 PM1/23/16
to Google Visualization API
Currently, the only way to deal with overlapping annotations is to add another series of invisible points that you would position where you want and attach the annotations to them.  We plan to deal with overlapping annotations by moving them automatically until they fit, but it will be a few months before that is 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 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/c216a7dd-0f83-446a-867a-4f7a575cd6e2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Fede

unread,
Dec 18, 2017, 8:00:21 AM12/18/17
to Google Visualization API
hi, any update on this?


On Saturday, January 23, 2016 at 8:39:08 PM UTC-3, Daniel LaLiberte wrote:
Currently, the only way to deal with overlapping annotations is to add another series of invisible points that you would position where you want and attach the annotations to them.  We plan to deal with overlapping annotations by moving them automatically until they fit, but it will be a few months before that is available.
On Sat, Jan 23, 2016 at 4:30 PM, Shahid Majeed <shahid...@gmail.com> wrote:
Hi,

I tried to produce sales bar chart with google chart api. everything working fine except annotation are overlaping each other that make very hard to user to read. Could please suggest me how to handle this problem. 

Picture of my graph is attached and my script is here.

                <script type='text/javascript'>  
                    google.load('visualization', '1', {packages: ['corechart', 'bar'],'language': 'sv'});
                    google.setOnLoadCallback(drawAntalChart);
                     
                    function drawAntalChart() {        
                    var data = google.visualization.arrayToDataTable([  
                    ['Projektledare','försäljning','Antal','Avg.försäljning/Antal'],['Martinez',479440,589,813.9898],['Andersson ',233351,691,337.7004],['Kercevic',34700,57,608.7719]]);var view = new google.visualization.DataView(data);view.setColumns([0, 1,{calc: "stringify",sourceColumn: 1,type: "string",role: "annotation"},2, {calc: "stringify",sourceColumn: 2,type: "string",role: "annotation"},3,{calc: "stringify",sourceColumn: 3,type: "string",role: "annotation"}]);var formatter = new google.visualization.NumberFormat({suffix: ' kr.', negativeColor: 'red',
                               negativeParens: true, decimalSymbol: ',',groupingSymbol: ' '});formatter.format(data, 1);formatter.format(data, 3); var options = {title: 'Projektledare statistik försäljning/Antal',vAxis: {format: 'currency', gridlines: { count: 10 }} };var chart = new google.visualization.ColumnChart(document.getElementById('div_chart'));chart.draw(view, options); }</script>


--
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+unsub...@googlegroups.com.



--

Kenta Fukuyama

unread,
May 29, 2020, 5:11:27 AM5/29/20
to Google Visualization API
any update?

2016年1月24日日曜日 7時39分08秒 UTC+8 Daniel LaLiberte:
Currently, the only way to deal with overlapping annotations is to add another series of invisible points that you would position where you want and attach the annotations to them.  We plan to deal with overlapping annotations by moving them automatically until they fit, but it will be a few months before that is available.
On Sat, Jan 23, 2016 at 4:30 PM, Shahid Majeed <shahid...@gmail.com> wrote:
Hi,

I tried to produce sales bar chart with google chart api. everything working fine except annotation are overlaping each other that make very hard to user to read. Could please suggest me how to handle this problem. 

Picture of my graph is attached and my script is here.

                <script type='text/javascript'>  
                    google.load('visualization', '1', {packages: ['corechart', 'bar'],'language': 'sv'});
                    google.setOnLoadCallback(drawAntalChart);
                     
                    function drawAntalChart() {        
                    var data = google.visualization.arrayToDataTable([  
                    ['Projektledare','försäljning','Antal','Avg.försäljning/Antal'],['Martinez',479440,589,813.9898],['Andersson ',233351,691,337.7004],['Kercevic',34700,57,608.7719]]);var view = new google.visualization.DataView(data);view.setColumns([0, 1,{calc: "stringify",sourceColumn: 1,type: "string",role: "annotation"},2, {calc: "stringify",sourceColumn: 2,type: "string",role: "annotation"},3,{calc: "stringify",sourceColumn: 3,type: "string",role: "annotation"}]);var formatter = new google.visualization.NumberFormat({suffix: ' kr.', negativeColor: 'red',
                               negativeParens: true, decimalSymbol: ',',groupingSymbol: ' '});formatter.format(data, 1);formatter.format(data, 3); var options = {title: 'Projektledare statistik försäljning/Antal',vAxis: {format: 'currency', gridlines: { count: 10 }} };var chart = new google.visualization.ColumnChart(document.getElementById('div_chart'));chart.draw(view, options); }</script>


--
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+unsub...@googlegroups.com.



--

Carl Castillo

unread,
May 29, 2020, 11:36:46 AM5/29/20
to google-visua...@googlegroups.com
Yup! Sorry about that. I went ahead and just loaded the packages in one line! Thanks!!

On Fri, May 29, 2020 at 2:11 AM Kenta Fukuyama <smb.k.f...@gmail.com> wrote:
any update?

2016年1月24日日曜日 7時39分08秒 UTC+8 Daniel LaLiberte:
Currently, the only way to deal with overlapping annotations is to add another series of invisible points that you would position where you want and attach the annotations to them.  We plan to deal with overlapping annotations by moving them automatically until they fit, but it will be a few months before that is available.
On Sat, Jan 23, 2016 at 4:30 PM, Shahid Majeed <shahid...@gmail.com> wrote:
Hi,

I tried to produce sales bar chart with google chart api. everything working fine except annotation are overlaping each other that make very hard to user to read. Could please suggest me how to handle this problem. 

Picture of my graph is attached and my script is here.

                <script type='text/javascript'>  
                    google.load('visualization', '1', {packages: ['corechart', 'bar'],'language': 'sv'});
                    google.setOnLoadCallback(drawAntalChart);
                     
                    function drawAntalChart() {        
                    var data = google.visualization.arrayToDataTable([  
                    ['Projektledare','försäljning','Antal','Avg.försäljning/Antal'],['Martinez',479440,589,813.9898],['Andersson ',233351,691,337.7004],['Kercevic',34700,57,608.7719]]);var view = new google.visualization.DataView(data);view.setColumns([0, 1,{calc: "stringify",sourceColumn: 1,type: "string",role: "annotation"},2, {calc: "stringify",sourceColumn: 2,type: "string",role: "annotation"},3,{calc: "stringify",sourceColumn: 3,type: "string",role: "annotation"}]);var formatter = new google.visualization.NumberFormat({suffix: ' kr.', negativeColor: 'red',
                               negativeParens: true, decimalSymbol: ',',groupingSymbol: ' '});formatter.format(data, 1);formatter.format(data, 3); var options = {title: 'Projektledare statistik försäljning/Antal',vAxis: {format: 'currency', gridlines: { count: 10 }} };var chart = new google.visualization.ColumnChart(document.getElementById('div_chart'));chart.draw(view, options); }</script>


--
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.

--

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/235473c3-a804-4101-92a4-8f1a9e1b58c9%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages