How to add sales value inside the bar of google bar chart

66 views
Skip to first unread message

Shahid Majeed

unread,
Jan 20, 2016, 12:57:16 PM1/20/16
to Google Visualization API
Hi,
I am trying to add sales values inside the bar of the google bar chart. But did not succeed. Please can someone help me. I have following markup.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type='text/javascript'>
        google.load('visualization', '1', { packages: ['bar'] });
        google.setOnLoadCallback(drawAntalChart);
        function drawAntalChart() {
            var data = google.visualization.arrayToDataTable([
            ['Projektledare', 'Sale', 'Avg Sale'],
            ['Wiberg', 26030, 13015],
            ['Andersson ', 461690, 19237.08],
            ['Ranheimer', 304045, 33782.78]]);

            var options = { chart: { title: 'Projektledning: Sales' } };
            var chart = new google.charts.Bar(document.getElementById('div_chart')); chart.draw(data, options);
        } </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div id="div_chart" style="height: 400px; text-align: left;"></div>
</asp:Content>


Picture attached how the graph look.

Thanks in advance
chart.JPG

Sergey Grabkovsky

unread,
Jan 20, 2016, 1:19:21 PM1/20/16
to Google Visualization API
Hi Shahid,

It looks like you're using the Material Bar Chart, and are attempting to use annotations. This will not work as lots of options (including annotations) are not yet supported for Material Charts. Your best bet would probably be to use a Classic Chart (from the 'corechart' package).

--
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/5d68bf0e-eb70-46ab-8ff1-823b1663e48a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
--

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.com


Shahid Majeed

unread,
Jan 20, 2016, 3:00:03 PM1/20/16
to Google Visualization API
Hi sergey,
I have change package setting like this 
google.load('visualization', '1', { packages: ['corechart', 'bar'] });

But it does not effect on it.
Do you have any sample code how i can achieve my requirement.

What exactly i want to acheive is that i have to compare the all project leaders. How much they sale and avg sale. As you see in my picture attached. I have project leaders and their sale and avg sale values on the graph.

I want to show sale and avg sale values in the bars. so that it is visible we dont need to take the mouse curse to see the actually value.
second is it possible to show the graph in 3D.

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

Daniel LaLiberte

unread,
Jan 20, 2016, 3:07:45 PM1/20/16
to Google Visualization API
Hi Shahid,

The 'bar' package is for the material chart.  So use google.visualization.BarChart instead, and by the way, you can add the option theme: 'material' if you want the material colors and fonts.  You only need to load the 'corechart' package to get BarChart.

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

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

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



--

Shahid Majeed

unread,
Jan 20, 2016, 3:14:19 PM1/20/16
to Google Visualization API
Hi Daniel,
Thanks for your quick response. I am very new to google chart. It would be very helpful if you just give me any sample. I really appreciate your help thanks alot.

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

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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-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,
Jan 20, 2016, 3:18:42 PM1/20/16
to Google Visualization API
Looking at your image again, what you really want is what we call a 'column' chart.  There are several examples on the ColumnChart documentation page (https://developers.google.com/chart/interactive/docs/gallery/columnchart), but you can see one running that has two series (like your data) in jsfiddle here: https://jsfiddle.net/api/post/library/pure/


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

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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 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.

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



--

Shahid Majeed

unread,
Jan 20, 2016, 3:21:26 PM1/20/16
to Google Visualization API
Hi Daniel,
I have change the visualization of the chart now bars render horizontally instead vertical. 


On Wednesday, January 20, 2016 at 9:07:45 PM UTC+1, Daniel LaLiberte wrote:
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
--

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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-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.



--
chart.JPG

Shahid Majeed

unread,
Jan 20, 2016, 3:25:16 PM1/20/16
to Google Visualization API
Nothing in jsfiddle.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
--

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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-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.



--

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

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,
Jan 20, 2016, 3:26:54 PM1/20/16
to Google Visualization API
Oops.. sorry, forgot to Save it:  https://jsfiddle.net/dlaliberte/vz3byoec/

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

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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 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.



--

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

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



--

Shahid Majeed

unread,
Jan 20, 2016, 3:38:47 PM1/20/16
to Google Visualization API
Thanks fiddle is working now. But i am trying to produce the graph look like attached picture. Only problem is that i dont know how i can insert sales values inside bars in the graph.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
--

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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-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.



--

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

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



--
chart.JPG

Shahid Majeed

unread,
Jan 20, 2016, 4:04:33 PM1/20/16
to Google Visualization API
Hi Daniel,
I have prepare my jsfiddle https://jsfiddle.net/shahidmajeed/dqxL2Lh2/. what setting i have to do to sale values in side the bars.

Daniel LaLiberte

unread,
Jan 20, 2016, 4:16:27 PM1/20/16
to Google Visualization API
Sergey mentioned Annotations.  You would need to add 'annotation' role columns to your chart.  See https://developers.google.com/chart/interactive/docs/roles

Hi Daniel,
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
--

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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 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.



--

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



--

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

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



--

Shahid Majeed

unread,
Jan 20, 2016, 4:21:51 PM1/20/16
to Google Visualization API
I have added the dataview in my jsfiddle https://jsfiddle.net/shahidmajeed/y72yzgsy/4/
Now i am able to see the sales value for each bar. 

But i did not see the avg sales value.

I havent understand the setcolum setting. I think its have to do with this setting to show the avg sales value as well on the graph.

could you just check what to do for my avg. sales value.

Thanks alot.

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

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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-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.



--

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

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



--

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

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,
Jan 20, 2016, 4:31:29 PM1/20/16
to Google Visualization API
You need another annotation column for the second series.  I made the change here: https://jsfiddle.net/dlaliberte/y72yzgsy/5/

Thanks alot.

Hi Daniel,
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
--

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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 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.



--

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



--

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



--

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

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



--

Daniel LaLiberte

unread,
Jan 20, 2016, 4:32:01 PM1/20/16
to Google Visualization API
Sorry.. forgot to change the sourceColumn:  https://jsfiddle.net/dlaliberte/y72yzgsy/6/

Shahid Majeed

unread,
Jan 20, 2016, 4:38:56 PM1/20/16
to Google Visualization API
I am really appreciate your help, Its look very good. Only one thing is left is it possible i can show the number in the form of currency. i have tried to set type: "string" to type:"currency" but its show Type mismatch. Value 26030 does not match type currency.
Thanks alot.

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

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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-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.



--

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

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



--

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

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-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,
Jan 20, 2016, 4:51:11 PM1/20/16
to Google Visualization API
Currently, you'll need to apply a NumberFormat to each value:  

Thanks alot.

Hi Daniel,
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
--

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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 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.



--

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



--

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



--

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



--

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

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



--

Shahid Majeed

unread,
Jan 20, 2016, 5:07:14 PM1/20/16
to Google Visualization API
Perfect thank you Daniel. my graph look excellent and its all because of your support. Thanks Alot https://jsfiddle.net/shahidmajeed/y72yzgsy/7/
Thanks alot.

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

unnamed.gif

Sergey Grabkovsky

Software Engineer

Google, Inc

gra...@google.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-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.



--

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

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



--

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

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



--

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

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--
Reply all
Reply to author
Forward
0 new messages