How to grow stacked bar?

47 views
Skip to first unread message

Kok How Teh

unread,
Mar 8, 2016, 4:19:44 AM3/8/16
to Google Visualization API
Hi;

   I need a horizontal stacked bar which would grow horizontally with new data added to the data table and being explorable.

   How do I grow the stacked bar with new data? I expect it to behave like stacked column chart with addrow(). However, in the case of stacked bar, it's not row but column instead. Any advice and insight is appreciated. Thanks.

Regards,
KH

Daniel LaLiberte

unread,
Mar 8, 2016, 9:28:20 AM3/8/16
to Google Visualization API
Hi Kok,

First, just to be clear, what we are calling a BarChart is the same as a ColumnChart reoriented so the domain axis is vertical.  They both have the very same data table structure.  If you add rows to the table for a ColumnChart, additional stacked columns would show up on the right.  And if you add rows to the table for the BarChart, additional stacked columns would show up on the bottom. (depending on where you add the rows, and whether you change the 'direction' option).

Either chart should work with the 'explorer' option, but the explorer mode does not yet work with discrete (string value) axes.  If your domain values (column 0) are discrete, you could still do some hacking to change your values to integers, and provide formatted values for each.  You would also want to use the explicit 'ticks' option to change how the tick values are displayed.

--
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/7d638d0e-d3fa-4bb5-8fe0-f3ba892d8e4b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Kok How Teh

unread,
Mar 8, 2016, 8:22:04 PM3/8/16
to Google Visualization API
Hi Daniel;

    Is there any chart that I could use which would stack on the same bar when new values are added? I am trying to visualize the states of a state machine and the hAxis / X-Axis is time, Y-Axis is domain and every time the state machine changes, a new state (with predefined color for each state) is stacked on the same domain bar and people could zoom in / out on the bar, imagine that the bar stretches over days / weeks / months.

Regards,
KH


On Tuesday, March 8, 2016 at 10:28:20 PM UTC+8, Daniel LaLiberte wrote:
Hi Kok,

First, just to be clear, what we are calling a BarChart is the same as a ColumnChart reoriented so the domain axis is vertical.  They both have the very same data table structure.  If you add rows to the table for a ColumnChart, additional stacked columns would show up on the right.  And if you add rows to the table for the BarChart, additional stacked columns would show up on the bottom. (depending on where you add the rows, and whether you change the 'direction' option).

Either chart should work with the 'explorer' option, but the explorer mode does not yet work with discrete (string value) axes.  If your domain values (column 0) are discrete, you could still do some hacking to change your values to integers, and provide formatted values for each.  You would also want to use the explicit 'ticks' option to change how the tick values are displayed.
On Tue, Mar 8, 2016 at 4:19 AM, Kok How Teh <funco...@gmail.com> wrote:
Hi;

   I need a horizontal stacked bar which would grow horizontally with new data added to the data table and being explorable.

   How do I grow the stacked bar with new data? I expect it to behave like stacked column chart with addrow(). However, in the case of stacked bar, it's not row but column instead. Any advice and insight is appreciated. Thanks.

Regards,
KH

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



--

Daniel LaLiberte

unread,
Mar 9, 2016, 9:37:04 AM3/9/16
to Google Visualization API
To add more items to a stack, you would add more series to your data, which means you should add the new data series as a new column.

But you may want to check out the timeline chart which sounds closer to the kind of use case you describe:  https://developers.google.com/chart/interactive/docs/gallery/timeline

On Tue, Mar 8, 2016 at 8:22 PM, Kok How Teh <funco...@gmail.com> wrote:
Hi Daniel;

    Is there any chart that I could use which would stack on the same bar when new values are added? I am trying to visualize the states of a state machine and the hAxis / X-Axis is time, Y-Axis is domain and every time the state machine changes, a new state (with predefined color for each state) is stacked on the same domain bar and people could zoom in / out on the bar, imagine that the bar stretches over days / weeks / months.

Regards,
KH

On Tuesday, March 8, 2016 at 10:28:20 PM UTC+8, Daniel LaLiberte wrote:
Hi Kok,

First, just to be clear, what we are calling a BarChart is the same as a ColumnChart reoriented so the domain axis is vertical.  They both have the very same data table structure.  If you add rows to the table for a ColumnChart, additional stacked columns would show up on the right.  And if you add rows to the table for the BarChart, additional stacked columns would show up on the bottom. (depending on where you add the rows, and whether you change the 'direction' option).

Either chart should work with the 'explorer' option, but the explorer mode does not yet work with discrete (string value) axes.  If your domain values (column 0) are discrete, you could still do some hacking to change your values to integers, and provide formatted values for each.  You would also want to use the explicit 'ticks' option to change how the tick values are displayed.
On Tue, Mar 8, 2016 at 4:19 AM, Kok How Teh <funco...@gmail.com> wrote:
Hi;

   I need a horizontal stacked bar which would grow horizontally with new data added to the data table and being explorable.

   How do I grow the stacked bar with new data? I expect it to behave like stacked column chart with addrow(). However, in the case of stacked bar, it's not row but column instead. Any advice and insight is appreciated. Thanks.

Regards,
KH

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



--

--
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/061f62a1-4638-4a43-87b0-e434e09e8ba5%40googlegroups.com.

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



--

Kok How Teh

unread,
Mar 9, 2016, 10:56:54 PM3/9/16
to Google Visualization API
I have tried and observed 2 issues with timeline chart:

(1) When new data are added to the DataTable and the column fills up the HTML page, it wraps and fills the next line. It would be nice to have the following so that the whole data set could fit and show on the same line:

    (i) The horizontal axis moves to the right (data moves to the left) showing the latest data / bars

   (ii) The earlier data / bars are briefed / compressed (cosmetic-wise).

(2) There is no "explore" option for timeline chart :-(


On Wednesday, March 9, 2016 at 10:37:04 PM UTC+8, Daniel LaLiberte wrote:
To add more items to a stack, you would add more series to your data, which means you should add the new data series as a new column.

But you may want to check out the timeline chart which sounds closer to the kind of use case you describe:  https://developers.google.com/chart/interactive/docs/gallery/timeline
On Tue, Mar 8, 2016 at 8:22 PM, Kok How Teh <funco...@gmail.com> wrote:
Hi Daniel;

    Is there any chart that I could use which would stack on the same bar when new values are added? I am trying to visualize the states of a state machine and the hAxis / X-Axis is time, Y-Axis is domain and every time the state machine changes, a new state (with predefined color for each state) is stacked on the same domain bar and people could zoom in / out on the bar, imagine that the bar stretches over days / weeks / months.

Regards,
KH

On Tuesday, March 8, 2016 at 10:28:20 PM UTC+8, Daniel LaLiberte wrote:
Hi Kok,

First, just to be clear, what we are calling a BarChart is the same as a ColumnChart reoriented so the domain axis is vertical.  They both have the very same data table structure.  If you add rows to the table for a ColumnChart, additional stacked columns would show up on the right.  And if you add rows to the table for the BarChart, additional stacked columns would show up on the bottom. (depending on where you add the rows, and whether you change the 'direction' option).

Either chart should work with the 'explorer' option, but the explorer mode does not yet work with discrete (string value) axes.  If your domain values (column 0) are discrete, you could still do some hacking to change your values to integers, and provide formatted values for each.  You would also want to use the explicit 'ticks' option to change how the tick values are displayed.
On Tue, Mar 8, 2016 at 4:19 AM, Kok How Teh <funco...@gmail.com> wrote:
Hi;

   I need a horizontal stacked bar which would grow horizontally with new data added to the data table and being explorable.

   How do I grow the stacked bar with new data? I expect it to behave like stacked column chart with addrow(). However, in the case of stacked bar, it's not row but column instead. Any advice and insight is appreciated. Thanks.

Regards,
KH

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



--

Kok How Teh

unread,
Mar 10, 2016, 4:35:38 AM3/10/16
to Google Visualization API
Hi;

   I think I made some mistakes. The (1) seems to work. Now I have the following questions / wish-list:

(1) Explorable

(2) Customizable colors for the bars. I am aware of the "colors" configuration option. However, the question is how to map this array of strings to predefined list of bars' "id" ?

   Thanks.

Regards,
KH

On Wednesday, March 9, 2016 at 10:37:04 PM UTC+8, Daniel LaLiberte wrote:
To add more items to a stack, you would add more series to your data, which means you should add the new data series as a new column.

But you may want to check out the timeline chart which sounds closer to the kind of use case you describe:  https://developers.google.com/chart/interactive/docs/gallery/timeline
On Tue, Mar 8, 2016 at 8:22 PM, Kok How Teh <funco...@gmail.com> wrote:
Hi Daniel;

    Is there any chart that I could use which would stack on the same bar when new values are added? I am trying to visualize the states of a state machine and the hAxis / X-Axis is time, Y-Axis is domain and every time the state machine changes, a new state (with predefined color for each state) is stacked on the same domain bar and people could zoom in / out on the bar, imagine that the bar stretches over days / weeks / months.

Regards,
KH

On Tuesday, March 8, 2016 at 10:28:20 PM UTC+8, Daniel LaLiberte wrote:
Hi Kok,

First, just to be clear, what we are calling a BarChart is the same as a ColumnChart reoriented so the domain axis is vertical.  They both have the very same data table structure.  If you add rows to the table for a ColumnChart, additional stacked columns would show up on the right.  And if you add rows to the table for the BarChart, additional stacked columns would show up on the bottom. (depending on where you add the rows, and whether you change the 'direction' option).

Either chart should work with the 'explorer' option, but the explorer mode does not yet work with discrete (string value) axes.  If your domain values (column 0) are discrete, you could still do some hacking to change your values to integers, and provide formatted values for each.  You would also want to use the explicit 'ticks' option to change how the tick values are displayed.
On Tue, Mar 8, 2016 at 4:19 AM, Kok How Teh <funco...@gmail.com> wrote:
Hi;

   I need a horizontal stacked bar which would grow horizontally with new data added to the data table and being explorable.

   How do I grow the stacked bar with new data? I expect it to behave like stacked column chart with addrow(). However, in the case of stacked bar, it's not row but column instead. Any advice and insight is appreciated. Thanks.

Regards,
KH

--
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,
Mar 10, 2016, 10:00:42 AM3/10/16
to Google Visualization API
Hi Kok,

We don't have support for the explorer mode in the Timeline chart.  To get something similar, you might look into wrapping the chart with a scrollable div.

Check out the 'style' role to specify a color for each item.  Not sure it will work, but worth a try.  https://developers.google.com/chart/interactive/docs/roles#what-are-roles

Hi;
Hi Daniel;
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@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-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/cedad71f-fa21-4a12-b893-478b4af55c0a%40googlegroups.com.

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



--
Reply all
Reply to author
Forward
0 new messages