Clark Hochgraf has a blog post on using button controls as a simple way to draw a column chart. This is a clever idea. I created a sample program to illustrate the idea in a bit more depth, with multiple columns.

User Interface View

Let us look at our sample program’s user interface. The screen displays a colorful column chart – but those columns are actually buttons stretched vertically.

Our demo app displays two kinds of column chart features. The first is that columns 1 through 5 are drawn based on the data values (separated by spaces) entered in the text box, at top, followed by pressing the Draw Chart With Data button.

 

The sixth column (labeled imaginatively “6”!) is controlled by the Slider control. Adjust the control to the left, and column 6 becomes shorter; adjust to the right and column 6 becomes taller. That idea was shown in Clark Hochgraf’s example too.

Designer View

We set up our app by creating a horizontal layout, at top, for a label (“Data (5 values):”) and a text box for data entry. Next, we add a button and label it “Draw Chart With Data”.

For the column chart, we add a horizontal layout and then put six button components inside the horizontal layout. Rename each button to btnBar1, btnBar2 and so on, from left to right. Also change the Text on each button to “1”, “2”, “3”, and so on, as shown.

At the bottom of the screen, drag a Slider control – this appears as the tiny orange and gray widget at the lower left.

When done, our components list looks like this:

We need to set aside space on the screen for columns. We do this by selecting the horizontal layout that contains the buttons and set its Height property to 50%. Just above that setting, set the AlignVertical property to “Bottom : 3” as shown. This causes the buttons to be aligned at the bottom so that they grow upwards to display a column chart.

Select the Slider and set its maximum input property value to about 250.

Blocks View

To draw a column chart, we fetch the content of txtDataEntry (a list of 5 numbers, separated by spaces) and use the split at spaces function to convert this into a 5 element list.

Then, we set the Height property of each button to the corresponding list value. The first list value is assigned to btnBar1, the second list value to btnBar2 and so forth. We also adjust the background color property of each button to create the colorful column chart display.

The above sets up and draws the first 5 columns in the chart.

The sixth column is set by using the Slider control. Moving the slider left or right adjusts the height of the 6th column.

Summary

The above demonstrates a simple way to “fake” a column chart in MIT App Inventor coding. Clark’s version sets the HeightPercent property instead of the Height property; the latter is in terms of pixels while the former ensures the entered values are scaled to fit in the percentage range.

More could be done to this app to, for example, ensure that all data values entered are valid, and to scale very large (or negative values) to fit on the chart. The current app will not work properly if out of bounds data is entered in the program (try it!)

Try This!

Since each column in the column chart is actually a button, you can add an event handler to process a Click on the button.  What might you do with that? You change the color of the column each time it is clicked, or depending on your app, you link to a screen showing the data used to generate the column chart. What ever you want!

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. Based on sales, 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: Column_Charts_With_Buttons

Download here: Column_Chart_With_Buttons.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.