📊 [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: 4.0
  • Tested: This has been tested on App Inventor 2 using Android 10 and 13 devices, companion 2.69, and compiled apk. It may work on other derivatives....
  • Released: 2021-07-02T23:00:00Z
  • Last Updated:2024-02-16T00:00:00Z
  • Built: Using the Rush Extension Builder by @shreyash

2. Blocks
Please note there was a small update with V3 with the addition of a css socket to all the chart types (there already was one for the Table Chart)

image

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

  • Table Chart

For adding css to the table, each of the cssClassNames, as shown in the Configuration Options, can be used. and example of this is shown in the blocks image above. The css classes have the same name as the listed class names with a custom in front. For example: `tableCell > customTableCell

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

  • Column Chart

  • Line Chart

  • 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: ChartMakerPlus v4

5. Changelog

  • V1 - initial release
  • V2k1 - updated to provide for file access in Kodular
  • V3 - small update to add a css socket to all chart types. See here for usage
    *V4 - small update, adding cssClassNames classes

6. Credits
My thanks to Mills College for the original extension, to @vknow360 for his help on getting the custom webview and file access 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.
  • ChartMakerPlus relies on json arrays (lists with square brackets) to send to Google Charts. Ensure that ShowListsAsJson is ticked in Screen1 properties in the designer (or convert your round bracket lists to square bracket lists)

Enjoy :D, and all feedback and comments welcome.

Available for use in any MIT AppInventor projects or competitions

#####################################################################
This work by TIMAI2 is licensed under an
MIT Licence.
#####################################################################

55 Likes

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

2 Likes

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

3 Likes

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

3 Likes

second ;), and thank you :slight_smile:

5 Likes

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

2 Likes

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

5 Likes

Nice extension :star_struck: :star_struck: @TIMAI2 sir

1 Like

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

2 Likes

:raised_hands: :raised_hands:

2 Likes

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:

4 Likes

(added to FAQ)

5 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

2 Likes

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.

5 Likes

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

2 Likes

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

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?