Stacked multi series bar chart

[Vishal Madhvani]

Hey all,

I need a stacked multi series bar chart for a project i'm working on and I can't seem to figure out if its possible using Google Charts.

The project use Material Design styling and Google Charts is awesome, so this would be ideal over a custom solution.

Here's a JSFiddle of the Material Design example from the google docs. https://jsfiddle.net/gvm0p62d/

It has 3 bars (series) per year; sales, expenses and profit.

I would like to add another dimension and make these bars to be stackable.

The data format from the example is :

var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

The data format i'm thinking would look something like:

var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', [1000, 1000, 1000], [400, 400, 400], [200, 200, 200]],
          ['2015', [1170, 1170, 1170], [460, 460, 460], [250, 250, 250]],
          ['2016', [660, 660, 660], [1120, 1120, 1120], [300, 300, 300]],
          ['2017', [1030, 1030, 1030], [540, 540, 540], [350, 350, 350]]
        ]);

I guess the main question is, is this possible with the current api's?

I'm thinking not, so I may need to build a new chart type. Can I build on top of the existing chart? Or do I need to start from scratch?

Any ideas or advice would really be appreciated.

Thanks

[Daniel LaLiberte]

There was another question about this recently:  https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/google-visualization-api/X6Mad7NCCPU/GKD-kQ3LGAAJ

I made this example to show how it can be done:  http://jsfiddle.net/dlaliberte/f7r3odo7/

--
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/65417b31-5c0b-41e0-b0ef-4107460bb5b6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Vishal Madhvani]

Awesome Daniel LaLiberte! I couldn't figure out why but it worked! Thank you.

Well, if you don't mind, there is another blocking issue.

The series need to be unordered and it should be possible to display it multiple times.

I forked your fiddle to try explain this. http://jsfiddle.net/x6bL48ro/

var data = google.visualization.arrayToDataTable([

          ['Year', 'Sales 1', 'Sales 2', 'Sales 3', 'Sales 4', 'Profit 1', 'Profit 2', 'Profit 3', 'Profit 4'],

          ['2014', 4 (Sales 2), 2 (Sales 4), 4 (Sales 1), 2 (Sales 3), 0 (Profit 4), 4(Profit 2), 2(Profit 3), 6(Profit 2)],

          ['2015', 4, 2, 4, 2, 2, 4, 2, 4],

          ['2016', 4, 2, 4, 2, 2, 4, 2, 4],

          ['2017', 4, 2, 4, 2, 2, 4, 2, 4]

        ]);

So as you can see from the 2014 sales data, the values are in a different order then specified on the titles row.

And from the 2014 profit data, the series can be repeated with different values.

On the surface of it, what i'm trying to build, looks like a bar chart, but really isn't.

I'm thinking I need to build my own chart type here, but i'm unsure how easy it is, and being that its similar to a bar chart, can I reuse any code?

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.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/65417b31-5c0b-41e0-b0ef-4107460bb5b6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

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

[Daniel LaLiberte]

Hi Vishal,

The example you linked to looks identical to mine.  You have to click the Update button to save your changes, and then you'll get a new URL.

I'm not sure what you are getting at with your unordered data, but why is it not possible to rewrite your data so it is ordered properly?

It may be possible to use the bar chart to draw your chart, but I'm not clear what you are trying to do that is different.  Perhaps you could draw a picture of what you would like it to look like. 

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/65417b31-5c0b-41e0-b0ef-4107460bb5b6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

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

--

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/2910fc7f-fa6d-442b-8f8c-9bf894be2c03%40googlegroups.com.

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

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA