[Free] πŸ“Š ChartMakerPlus - an extension to make google charts

1. Introduction

The original and popular Chartmaker extension has been in use by AI2 developers for years, and has provided a quick method to generate simple charts for pie, bar or line.

This extension is a complete rewrite of the original, builds on what was there, and offers many new features:

  • two new charts: column and table
  • a boolean to turn zoom on and off
  • exposes the ability to add other options
  • simplifies data compilation - straightforward and user-friendly lists of lists
  • returns selected data to the app through the webviewstring
  • works with the custom webview extension
  • multi bar and column charts now possible
  • under the hood, deletes the chart html once chart is rendered

The extension uses "classic" google charts, the material charts on offer are less featureful.

  • Latest Version: 1.0
  • Tested: This has been tested on App Inventor 2 using Android 10 and 11 devices, companion 2.60, and compiled apk. It may work on other derivatives....
  • Released: 2021-07-02T23:00:00Z
  • Last Updated:2021-07-02T23:00:00Z
  • Built: Using the Rush Extension Builder by @Shreyash

2. Blocks

cmp-02

cmp-03

cmp-04

cmp-01

cmp-05

3. Usage
I could write a book about how you might use this, the configuration options for google charts appear to be endless (which is why Mills College did such a good job of keeping it simple!). In essence all chart blocks require a webviewer, a data table, and a selection for whether the user wants the chart to zoom on the screen when dragged (the plus and minus zoom buttons). After that it is about configuration. For each chart I have shown a few ideas of what can be done, and provided a link to the specific documentation for each chart. Syntax is important.

  • Pie Chart


https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options

  • Table Chart


https://developers.google.com/chart/interactive/docs/gallery/table#configuration-options

  • Bar Chart


If you test the aia, you will see that this chart is also animated. The data blocks are for the second chart, and show how to set the colour of the bars for a single row of data.


https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options

  • Column Chart


https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options

  • Line Chart


https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options

  • Using Custom Webview
    You will need to bring in the custom webview extension, Below are the blocks required to show a pie chart (you will also need the custom webview webviewstring change block to get data feedback):


The order of the blocks is important...

4. Files

AIX: uk.co.metricrat.chartmakerplus.V1.aix (8.4 KB)
AIA: ChartMakerPlusDemoV1.aia (43.9 KB)
JAVA: ChartMakerPlus.java.txt (18.8 KB)

5. Changelog

6. Credits
My thanks to Mills College for the original extension, to @vknow360 for his help on getting the custom webview to work, and to @Shreyash for Rush

7. Bits and Bobs

  • Also see Strings and Numbers further down for information about handling numbers as strings in the arrayTables.

Enjoy :D, and all feedback and comments welcome.

Available for use in any MIT AppInventor projects or competitions

28 Likes

Wow :+1: :+1: nice extension @TIMAI2

1 Like

Great job @TIMAI2 :+1::+1::+1:

1 Like

This is really excellent and especially for your first extension. :clap:

1 Like

second ;), and thank you :slight_smile:

4 Likes

Oh, I missed it. :upside_down_face: :wink:

1 Like

Your second extension really rocked the world @TIMAI2 :star_struck:
Five Star for your extension :

Nice extension :star_struck: :star_struck: @TIMAI2 sir

1 Like

Davvero una bellissima estensione, ti faccio i miei complimenti @TIMAI2
Saluti
Nicola

1 Like

:raised_hands: :raised_hands:

1 Like

Wow ! Superb extension ! Keep it up @TIMAI2 ! :clap: :clap: :clap:

For your extension - :star2: :star2: :star2: :star2: :star2:
For you - :star2: :star2: :star2: :star2: :star2:
Your marks - :100: / :100:
Your extension's marks - :100: / :100:

1 Like

(added to FAQ)

3 Likes

Great chart extension!!! Maybe can just help me with something please on this extension.

Attached find my blocks and photos of pie chart not working correctly and working correctly.

The pie chart will be reading the number in the textbox which it is doing but not using my whole pie chart, only uses the amount %.

If I use the blue math block instead of text box then it works perfect.

I need the full pie please with text boxes

1 Like

It is a good point.

The extension is expecting numbers AS numbers, therefore you have to convert the textbox item (which is a string) to a number. You do this like this:

image
or
image

AppInventor doesn't mind if a number is presented as a text(string), it handles the conversion, java/javascript is less forgiving. You can see the difference in these two lists:

Numbers as numbers:

[
["Cars", "Number"], 
["MG", 7], 
["Jaguar", 4], 
["Triumph", 3]
]

Numbers as texts (strings):

[
["Cars", "Number"], 
["MG", "7"], 
["Jaguar", "4"], 
["Triumph", "3"]
]

to make the pie chart:

Also, in the first list of lists in your blocks you have "string" and "number". In this extension the first list does not define the type, it defines the headers as you can see in the two above examples ["Cars","Number"]. The type (string or number) is defined by what is presented in the rows. A pie chart expects the first item in the row to be a string, and the second to be a number.

I hope that helps to explain how it works.

2 Likes

the x1 worked perfectly!!! Thank you so much
note on the "string" part as well.
:raised_hands:

1 Like

Nice extension @TIMAI2 :blush:

1 Like

Nice extension! @TIMAI2

2 Likes

Thank you for the great extension!

Can I also know how do I write the block so that I can have the left bar chart shown earlier?

1 Like

Hi @TIMAI2 thank you for the blocks.

Was wondering if I could incorporate this with TinyDB to show info (e.g highest score), displaying the latest 10 scores using the bar chart?