don't get correct visualization displaying data

740 views
Skip to first unread message

Kimberly Segers

unread,
Dec 14, 2015, 10:57:36 AM12/14/15
to Google Visualization API
Hi

Im building a dashboard using google charts API. The thing is that when I try to add annotations to the graph it displays weird. 
I want to display the numbers inside the bars but sometimes I get these ... inside the bar.










 I tried to fix it using this :
view.setColumns([0, 1, {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },


But then the highest amount only is displayed inside the bar. I just want to have the amounts that doesn't fit the bar, displayed outside the bar. 

When i display all the values outside the bar, the negative values are displayed weird. like this:









Is there a fix for only displaying the numbers outside the bars when it doesn't fit?

Thanks in advance

Daniel LaLiberte

unread,
Dec 14, 2015, 11:05:46 AM12/14/15
to Google Visualization API
There is an option for annotations that forces all annotations to be outside the bars.    

annotations.alwaysOutside

In Bar and Column charts, if set to true, draws all annotations outside of the Bar/Column.

Type: boolean
Default: false


The annotations for the negative values appear to be attached to the wrong end of the bars, which is a bug.  It is drawing the annotation outside the negative part of the bar, but just drawing it incorrectly.

Kimberly Segers

unread,
Dec 14, 2015, 11:11:00 AM12/14/15
to Google Visualization API
Thanks for the fast response, but how can I fix the negative value? 

Op maandag 14 december 2015 17:05:46 UTC+1 schreef Daniel LaLiberte:

Daniel LaLiberte

unread,
Dec 14, 2015, 11:17:53 AM12/14/15
to Google Visualization API
Rereading your post, it seems your first image is showing a different problem.   By default, it *should* be displaying the annotations that don't fit outside the bar, but instead, it is reducing the font until it fits, to the point that the text is unreadable.  So I am not sure where that behavior is coming from, but it is a bug.   We talked about adding an auto-sizing option, but I am surprised to see it implemented, if that is what is going on.

The negative value display on the wrong end of the bar is a bug, so you'll have to wait until we can fix it.  I can't think of any workaround for this in the meantime.

Kimberly Segers

unread,
Dec 14, 2015, 12:08:01 PM12/14/15
to Google Visualization API
This is the code I use to implement the graph.

var header = ['Months', 'invoice amount', { role: 'annotation' },{ role: 'style' }, 'changed value', { role: 'annotation' },{ role: 'style' }];
var rawData = [
            ['mar', 25,'€25',"fill-color: #00729e;", 0,'', ""],
            ['apr', 0,'', "fill-color: #00729e;", 0,'', ""],
            ['mei', 30,'€30', "fill-color: #00729e;", 0,'', ""],
            ['jun', 40,'€40', "fill-color: #00729e;", 0,'', ""],
            ['jul', 30,'€30', "fill-color: #00729e;", 0,'', ""],
            ['Auth', 50,'€50', "fill-color: #00729e;", 0, '', ""],
            ['sep', 60,'€60', "fill-color: #00729e;", 0, '', ""],
            ['okt', 80,'€80', "fill-color: #00729e;", 0, '', ""],
            ['nov', 100,'€100', "fill-color: #00729e;", 0, '', ""],
            ['dec', 125,'€125', "fill-color: #00729e;", 0, '', ""],
            ['jan', 150,'€150', "fill-color: #00729e;", -300, '-300', ""],
            ['feb', 200,'€200', "fill-color: #00729e;", -50, '-50', ""],
        ];

rawData.unshift(header);
    var data = google.visualization.arrayToDataTable(rawData);

    var options = {
        legend: {position: 'none'},
        isStacked:true,
        backgroundColor: 'none',
        width:"1000px",
        bar: { groupWidth: '80%' },
        hAxis: {
            baselineColor: 'red',
           
        },
        vAxis: {
            baselineColor: '#666666',
            textPosition: 'none',
            gridlines: {
                color: '#DEDEDE',
                opacity:0.5
            },
            
        },
        annotations: {
            alwaysOutside:true,
            textStyle: {
              fontName: 'Helvetica',
              fontSize: 10,
              bold: false,
              fill:"white",
              color: '#ffffff',  // The color of the text.
              auraColor: 'none', // The color of the text outline.
              opacity: 1  
            }
        },
         enableInteractivity: false
         
        };
      var chart = new google.visualization.ColumnChart($j('#monthlyInvoiceGraph')[0]);
      chart.draw(data, options);



But now it doesn't show these values default on top when it doesn't fit

Op maandag 14 december 2015 17:17:53 UTC+1 schreef Daniel LaLiberte:

Daniel LaLiberte

unread,
Dec 14, 2015, 12:25:49 PM12/14/15
to Google Visualization API
Here is your example in a jsfiddle:  http://jsfiddle.net/dlaliberte/9ypf63re/   In this chart, I see the annotation values outside the bars, so this seems to be working as expected, though the negative values are on the wrong end of the bar, and thus inside the positive-side bar.

--
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/1fa97f85-0b74-4da2-bd45-a6a1a39a0958%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Kimberly Segers

unread,
Dec 15, 2015, 5:38:00 AM12/15/15
to Google Visualization API
Thanks, but i only get these values when I add the option isStacked:true,

Is this also a bug or can it be fixed?

Thanks in advance


Op maandag 14 december 2015 18:25:49 UTC+1 schreef Daniel LaLiberte:
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 https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
Dec 15, 2015, 8:39:28 AM12/15/15
to Google Visualization API
The misplaced annotations for negative values also happens with isStacked:false, so that is not a separate bug.  The only workaround at this time is probably not worth your time: you can use a combo chart with invisible scatter points placed where you want, and then attach your annotations to those scatter points.

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.



--

--
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/d4a4cbd4-46c6-40cc-9c97-459968922591%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Faizal Fahm

unread,
Mar 1, 2018, 2:47:37 AM3/1/18
to Google Visualization API
Using in google chart options:

annotations: {
    alwaysOutside: true
 },

Al Lemieux

unread,
Apr 10, 2018, 6:38:44 AM4/10/18
to Google Visualization API
Is this option available for Pie Charts?

Faizal Fahm

unread,
Apr 10, 2018, 6:50:25 AM4/10/18
to google-visua...@googlegroups.com
No

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/TvcD_SaxS8M/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/f10ec6fa-1a77-4fb3-bc3f-221520a7c0a2%40googlegroups.com.

Faizal Fahm

unread,
Apr 10, 2018, 6:50:55 AM4/10/18
to google-visua...@googlegroups.com
But this is working..

No

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

Al Lemieux

unread,
Apr 10, 2018, 6:53:35 AM4/10/18
to Google Visualization API
OK, thanks.

Faizal Fahm

unread,
Apr 10, 2018, 7:26:10 AM4/10/18
to google-visua...@googlegroups.com
Welcome

On Tue, Apr 10, 2018 at 4:23 PM, Al Lemieux <al.le...@nielsen.com> wrote:
OK, thanks.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/TvcD_SaxS8M/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@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/d389a1d6-daf2-487f-9c90-6c1c404fff53%40googlegroups.com.

Faizal Fahm

unread,
Apr 10, 2018, 7:32:19 AM4/10/18
to google-visua...@googlegroups.com
one more functionality is not available in any charts like barchart, piechart etc.

this is mouse hovor to blink issue.

this function using in css style.
i was solve this problem.

using

svg > g:last-child > g:last-child {
            pointer-events: none;
        }

On Tue, Apr 10, 2018 at 4:55 PM, Faizal Fahm <faiza...@gmail.com> wrote:
Welcome

On Tue, Apr 10, 2018 at 4:23 PM, Al Lemieux <al.le...@nielsen.com> wrote:
OK, thanks.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/TvcD_SaxS8M/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages