Using buttons to simulate a bar chart in App Inventor Code

Our prior post showed how to use user interface button components to simulate a column chart.

We can apply the same trick to create a bar chart. In a bar chart, the data is represented as horizontal bars, whereas in the column chart, the data appears in vertical columns.

Implementing the bar chart requires just a few minimal changes to the original column chart app.

User Interface

This screen shows the basic output, with the data represented as horizontal bars in the chart. To simplify, the slider control and column #6 that appeared in the original column chart version, have been removed.

Screenshot_20161011-134517

A new feature has been added, as an example illustration. Since each bar in the chart is actually a button, you can press on the bar. For fun, a Click event handler has been added to bar #1 in the chart. Pressing bar #1 causes the bar to change to a randomly selected color. This feature has been implemented only for bar #1, but if you wish, you can add Click event handlers for the other buttons.

Screenshot_20161011-134522

(Ad)

For your information, Amazon Fire HD tablets are priced as low as US $49.99 to $119 for this 32 GB Kindle HD tablet or up to US$289 for a 10 inch tablet with 64 GB of memory. Online reports say they run App Inventor apps just fine and you can download Google Play apps by visiting the Google Play store in the Internet browser (you do have to select the Fire option to allow installation of non Amazon apps – but note I have not personally tested these with App Inventor apps and cannot vouch for the claims yet).

At these prices, these look very interesting – especially the new (September 2016) Fire HD 8. While these tablets have only 720p HD displays, they cost far less than many others, especially the newest models from other vendors.

Designer View

The layout of the user interface is similar to the column chart. Except that the horizontal layout arrangement is replaced with a vertical layout. I created this app by copying the column chart, adding a vertical layout and then dragging the buttons into the vertical arrangement. Then I deleted the original horizontal layout.

Voila_Capture 2016-10-11_02-26-50_PM

Here you can see how the buttons have been placed into the VerticalArrangement layout component.

Components

Blocks View

The blocks code is similar to the column chart except the references to the Height property are changed to the Width property. A reminder: the text data entry is separated into a 5 element list using “split at spaces”. The first value is then assigned to the width of button #1, the second value to the width of button #2, and so on.

Blocks1

In this version, we add an event handler for button #1’s Click event.  When button #1 (bar #1 on the chart) is pressed, we change its BackgroundColor property to a random color!

We do this using the “make color” block which combines separate values for the amount of red, green and blue. By mixing different shades of red, green and blue, we create any color we wish. Each color value in App Inventor has a value of 0 to 255. Low end values are very dark and high end values are very bright. To avoid producing some bad colors, we select a random color value between 20 and 240, rather than using the full range of 0 to 255.

Blocks2

Summary

This tutorial, together with the prior tutorial on creating column charts, shows how to apply a clever idea (originally from Clark Hochgraf) to implementing app features in a non-traditional way.

In this tutorial, we converted the column chart app into a bar chart app, and added a feature to demonstrate how the bar chart values can be treated as “live” elements in the chart.

Would you like to learn how to draw all kinds of Charts, Graphics and Animation?

My e-book, App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book) describes another, more typical way of creating column charts (and line charts and other types of graphics); Volume 4 also includes video tutorials for each chapter.

To learn more about my e-books, please visit my App Inventor Books page where you can see a detailed Table of Contents, and for some e-books, download sample chapters.

  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts
    Buy e-book from: Amazon, Google Books, Kobo Books
    Price: US$5.99 , 227 pages

UPDATE: Sales of the print version of Volume 4 are being discontinued as of October 18, 2016, due to rampant copyright theft. There are more used copies for sale than the total number of printed books actually sold – which was not many as readers prefer the e-book version – therefore I am in process of discontinuing sales of the print version. The e-book continues to be available.

Source Code

MIT App Inventor Gallery Link: ButtonsAsRows

Download here: ButtonsAsRows.aia

If you use the Download option (instead of the Gallery), use your browser’s “Save file as…” feature to save to your hard disk. Then in App Inventor, use the Project’s menu, Import project (.aia) from my computer… to load in to App Inventor.

Advertisements

3 thoughts on “Using buttons to simulate a bar chart in App Inventor Code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s