Google Charts. Is there support for Marimekko Chart?

3,219 views
Skip to first unread message

Nathalie Sicard

unread,
Oct 22, 2016, 2:20:52 PM10/22/16
to Google Visualization API
I was wondering if it's be possible to build a Marimekko Chart with this API.

Thank you!

Daniel LaLiberte

unread,
Oct 24, 2016, 11:47:04 AM10/24/16
to Google Visualization API
Hi Nathalie,

You can get close to the Marimekko style, using a combination of isStacked: 'percent' and bar: { variableWidth: true }.  Here is an example:  https://jsfiddle.net/dlaliberte/2h6etzkx/

On Sat, Oct 22, 2016 at 2:20 PM, Nathalie Sicard <nathali...@gmail.com> wrote:
I was wondering if it's be possible to build a Marimekko Chart with this API.

Thank you!

--
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/6a6c7394-606a-4d5c-b858-17c2b4e7f373%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Nick Dunbar

unread,
Oct 25, 2016, 11:03:26 AM10/25/16
to Google Visualization API
Hi Dan,

This is clever - I didn't know you could do that. I have a stacked column chart where the x axis is currently a string array and i would like to be able to vary the widths using a number column of my dataTable while keeping the string labels - I think it is called a 'cascade chart'. Do you know how I could do that? 

Thanks, 
Nick 


On Monday, October 24, 2016 at 4:47:04 PM UTC+1, Daniel LaLiberte wrote:
Hi Nathalie,

You can get close to the Marimekko style, using a combination of isStacked: 'percent' and bar: { variableWidth: true }.  Here is an example:  https://jsfiddle.net/dlaliberte/2h6etzkx/
On Sat, Oct 22, 2016 at 2:20 PM, Nathalie Sicard <nathali...@gmail.com> wrote:
I was wondering if it's be possible to build a Marimekko Chart with this API.

Thank you!

--
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,
Oct 25, 2016, 11:20:47 AM10/25/16
to Google Visualization API
You can use numeric values in your datatable and specify the formatted value of each.  E.g. 

  [['domain', 'some number'],
   [{v: 0, f: 'zero'}, 25], 
   [{v: 3, f: 'three'}, 30],  ...]

Since you are then using a domain of type number, you will want to format the ticks similarly, using the ticks option.

 {
   hAxis: {
     ticks: [{v: 0, f: 'zero'}, {v: 3, f: 'three'}, ...]
   }
 }




On Tue, Oct 25, 2016 at 11:03 AM, Nick Dunbar <dunba...@gmail.com> wrote:
Hi Dan,

This is clever - I didn't know you could do that. I have a stacked column chart where the x axis is currently a string array and i would like to be able to vary the widths using a number column of my dataTable while keeping the string labels - I think it is called a 'cascade chart'. Do you know how I could do that? 

Thanks, 
Nick 

On Monday, October 24, 2016 at 4:47:04 PM UTC+1, Daniel LaLiberte wrote:
Hi Nathalie,

You can get close to the Marimekko style, using a combination of isStacked: 'percent' and bar: { variableWidth: true }.  Here is an example:  https://jsfiddle.net/dlaliberte/2h6etzkx/
On Sat, Oct 22, 2016 at 2:20 PM, Nathalie Sicard <nathali...@gmail.com> wrote:
I was wondering if it's be possible to build a Marimekko Chart with this API.

Thank you!

--
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/1a3132d1-3b02-4fe2-b0b8-6b04132bcea3%40googlegroups.com.

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



--

Nick Dunbar

unread,
Oct 25, 2016, 12:08:02 PM10/25/16
to Google Visualization API
Hi Dan, 

Thanks for getting back to me so quickly. 

I admit that I am slightly confused by the object literal notation for datatables, so forgive this question. Are you saying that I have to spell out the value of each numeric value as a string? I have dozens of rows in the table so this is going to be quite time consuming. 

At present, I have rows in the table that look like this: 

CAMEROON 9.5 750000000 110.67208

I create the table using the addColumn / addRow method. 

I would want to use column 2 to specify the width of the relevant column in the chart, while column 1 and 3 are the height of the stacked column. 

Thank you again, 

Nick 


On Tuesday, October 25, 2016 at 4:20:47 PM UTC+1, Daniel LaLiberte wrote:
You can use numeric values in your datatable and specify the formatted value of each.  E.g. 

  [['domain', 'some number'],
   [{v: 0, f: 'zero'}, 25], 
   [{v: 3, f: 'three'}, 30],  ...]

Since you are then using a domain of type number, you will want to format the ticks similarly, using the ticks option.

 {
   hAxis: {
     ticks: [{v: 0, f: 'zero'}, {v: 3, f: 'three'}, ...]
   }
 }



On Tue, Oct 25, 2016 at 11:03 AM, Nick Dunbar <dunba...@gmail.com> wrote:
Hi Dan,

This is clever - I didn't know you could do that. I have a stacked column chart where the x axis is currently a string array and i would like to be able to vary the widths using a number column of my dataTable while keeping the string labels - I think it is called a 'cascade chart'. Do you know how I could do that? 

Thanks, 
Nick 

On Monday, October 24, 2016 at 4:47:04 PM UTC+1, Daniel LaLiberte wrote:
Hi Nathalie,

You can get close to the Marimekko style, using a combination of isStacked: 'percent' and bar: { variableWidth: true }.  Here is an example:  https://jsfiddle.net/dlaliberte/2h6etzkx/
On Sat, Oct 22, 2016 at 2:20 PM, Nathalie Sicard <nathali...@gmail.com> wrote:
I was wondering if it's be possible to build a Marimekko Chart with this API.

Thank you!

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



--

--
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,
Oct 25, 2016, 2:08:26 PM10/25/16
to Google Visualization API
We don't currently have a way to set the width of the columns from a separate data column, so you'll have to use the domain value for that.  You can either provide the formatted representation like I suggested, using addRows(), or arrayToDataTable(), or a couple other ways, or you can call setFormattedValue() for each value later.

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+unsubscr...@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-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/bec22d64-0488-4ff5-9a7e-ebd1b74133bf%40googlegroups.com.

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



--

James Howison

unread,
May 1, 2018, 10:13:26 PM5/1/18
to Google Visualization API
Sorry for old thread revival, but I was playing around with this and wondered if there was any documentation about how bar: { variableWidth: true } works?  I couldn't quite get the hang of it from  jsfiddling with the example and it doesn't seem to be mentioned on the documentation that I could find.

Seems to me that the most useable approach to this would be to allow a column to specify the width of the bar, or to do it as a calculated value as the stacked elements / grand total of all columns.

On Monday, October 24, 2016 at 10:47:04 AM UTC-5, Daniel LaLiberte wrote:
Hi Nathalie,

You can get close to the Marimekko style, using a combination of isStacked: 'percent' and bar: { variableWidth: true }.  Here is an example:  https://jsfiddle.net/dlaliberte/2h6etzkx/
On Sat, Oct 22, 2016 at 2:20 PM, Nathalie Sicard <nathali...@gmail.com> wrote:
I was wondering if it's be possible to build a Marimekko Chart with this API.

Thank you!

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



--
Reply all
Reply to author
Forward
0 new messages