overlap vs stacked possible with javascript charts?

2,611 views
Skip to first unread message

dugbug

unread,
Aug 13, 2011, 9:23:00 PM8/13/11
to Google Visualization API
Hi,

Is there a way to create an overlapped chart (bars in front of each
other rather than atop one another)? With image charts, chart type
cht=bvo for example.

Im new to the javascript charts so I may be missing something!

MC Get Vizzy

unread,
Aug 14, 2011, 7:07:32 AM8/14/11
to google-visua...@googlegroups.com
Wow, I'd never heard of bvo.

I don't think you can do that with the interactive charts...


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.


asgallant

unread,
Aug 15, 2011, 9:24:48 AM8/15/11
to google-visua...@googlegroups.com
It isn't supported, but you can sort-of work around it, if conditions are right: given series A and B, if B should be behind A, then you can make this work.  Fill in your dataTable object, but set series B values = B-A, set the formatted values for series B to the (string) value of B, and draw the chart as a stacked chart.  Ex:

function drawChart() {
   var data = new google.visualization.DataTable();
   data.addColumn("string", "Foobar");
   data.addColumn("number", "A");
   data.addColumn("number", "B");
   data.addRows([
      ["foo", 5, {v: 1, f: '6'}],
      ["bar", 6, {v: 3, f: '9'}],
      ["baz", 5, {v: 2, f: '7'}]
   ]);

   var chart = new google.visualization.BarChart(document.getElementById("chart"));
   chart.draw(data, {
      width:600,
      height:400,
      isStacked: true
   });
}

asgallant

unread,
Aug 15, 2011, 9:26:59 AM8/15/11
to google-visua...@googlegroups.com
Forgot the second part of the condition: if B should be behind A, then B must be strictly larger than A.  If B-A <= 0, this won't work.

dugbug

unread,
Aug 15, 2011, 8:22:12 PM8/15/11
to Google Visualization API
thanks! I understand. You are using the format to code a false
value, correct? I was looking to do something like that but was
worried about an inability to tailor the value axis. I was assuming
by reading the docs that I would have to go through building an
artificial set of haxis (assuming horizontal bars) entries to control
the values displayed. Looking at the haxis examples not totally sure
I understand how I would go about it.

regards
-d

asgallant

unread,
Aug 16, 2011, 9:04:16 AM8/16/11
to google-visua...@googlegroups.com
I set the formatted value so it would show up as the correct value when you hover over the bars, but the chart itself is drawn with the derived value.  As far as the axis goes, you don't need to set all the options.  Each one has a default value, so you only need to set the ones that you want to be different from the default.

Amanda M

unread,
Feb 5, 2018, 4:48:22 PM2/5/18
to Google Visualization API
It would be very similar to this:  http://stephanieevergreen.com/overlapping-bars/

I am working on a project where I want to show Sales on the background bar and profit on the bar in front.


On Sunday, August 14, 2011 at 6:07:32 AM UTC-5, MC Get Vizzy wrote:
Wow, I'd never heard of bvo.

I don't think you can do that with the interactive charts...

On Sun, Aug 14, 2011 at 4:23 AM, dugbug <doug...@yahoo.com> wrote:
Hi,

Is there a way to create an overlapped chart (bars in front of each
other rather than atop one another)?  With image charts, chart type
cht=bvo for example.

Im new to the javascript charts so I may be missing something!

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

Daniel LaLiberte

unread,
Feb 5, 2018, 4:54:31 PM2/5/18
to Google Visualization API

On Mon, Feb 5, 2018 at 4:48 PM, Amanda M <amanda...@gmail.com> wrote:
It would be very similar to this:  http://stephanieevergreen.com/overlapping-bars/

I am working on a project where I want to show Sales on the background bar and profit on the bar in front.

On Sunday, August 14, 2011 at 6:07:32 AM UTC-5, MC Get Vizzy wrote:
Wow, I'd never heard of bvo.

I don't think you can do that with the interactive charts...

On Sun, Aug 14, 2011 at 4:23 AM, dugbug <doug...@yahoo.com> wrote:
Hi,

Is there a way to create an overlapped chart (bars in front of each
other rather than atop one another)?  With image charts, chart type
cht=bvo for example.

Im new to the javascript charts so I may be missing something!

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
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-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/5a5308ce-90bb-404c-8928-5a7a78376209%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Amanda M

unread,
Feb 7, 2018, 9:14:40 AM2/7/18
to Google Visualization API
This is great!  Thank you!!!!!

Currently my chart is a combo chart.  Line and Bar.  Can the diff be used with Combo?

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));


On Monday, February 5, 2018 at 3:54:31 PM UTC-6, Daniel LaLiberte wrote:
On Mon, Feb 5, 2018 at 4:48 PM, Amanda M <amanda...@gmail.com> wrote:
It would be very similar to this:  http://stephanieevergreen.com/overlapping-bars/

I am working on a project where I want to show Sales on the background bar and profit on the bar in front.

On Sunday, August 14, 2011 at 6:07:32 AM UTC-5, MC Get Vizzy wrote:
Wow, I'd never heard of bvo.

I don't think you can do that with the interactive charts...

On Sun, Aug 14, 2011 at 4:23 AM, dugbug <doug...@yahoo.com> wrote:
Hi,

Is there a way to create an overlapped chart (bars in front of each
other rather than atop one another)?  With image charts, chart type
cht=bvo for example.

Im new to the javascript charts so I may be missing something!

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

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



--

Daniel LaLiberte

unread,
Feb 7, 2018, 9:52:44 AM2/7/18
to Google Visualization API
Unfortunately, the diff charts cannot be used in combo with other charts.  We would need to implement the overlapping bars quite differently for that.

You may be able to figure out how to use the bars using the 'box' intervals. See   https://developers.google.com/chart/interactive/docs/gallery/intervals#bar-intervals


On Wed, Feb 7, 2018 at 9:14 AM, Amanda M <amanda...@gmail.com> wrote:
This is great!  Thank you!!!!!

Currently my chart is a combo chart.  Line and Bar.  Can the diff be used with Combo?

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));


On Monday, February 5, 2018 at 3:54:31 PM UTC-6, Daniel LaLiberte wrote:
On Mon, Feb 5, 2018 at 4:48 PM, Amanda M <amanda...@gmail.com> wrote:
It would be very similar to this:  http://stephanieevergreen.com/overlapping-bars/

I am working on a project where I want to show Sales on the background bar and profit on the bar in front.

On Sunday, August 14, 2011 at 6:07:32 AM UTC-5, MC Get Vizzy wrote:
Wow, I'd never heard of bvo.

I don't think you can do that with the interactive charts...

On Sun, Aug 14, 2011 at 4:23 AM, dugbug <doug...@yahoo.com> wrote:
Hi,

Is there a way to create an overlapped chart (bars in front of each
other rather than atop one another)?  With image charts, chart type
cht=bvo for example.

Im new to the javascript charts so I may be missing something!

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
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+unsubscr...@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-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/2d244472-2276-47e3-a686-301551036397%40googlegroups.com.

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



--
Reply all
Reply to author
Forward
0 new messages