├── _config.yml ├── example ├── barchart.png ├── piechart.png └── linechart.png ├── ChartMakerExample.aia ├── edu.mills.appinventor.ChartMaker.aix ├── edu.mills.appinventor.ChartMaker_src.zip ├── .gitignore ├── LICENSE ├── README.md └── edu └── mills └── appinventor └── ChartMaker.java /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /example/barchart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MillsCS215AppInventorProj/chartmaker/HEAD/example/barchart.png -------------------------------------------------------------------------------- /example/piechart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MillsCS215AppInventorProj/chartmaker/HEAD/example/piechart.png -------------------------------------------------------------------------------- /ChartMakerExample.aia: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MillsCS215AppInventorProj/chartmaker/HEAD/ChartMakerExample.aia -------------------------------------------------------------------------------- /example/linechart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MillsCS215AppInventorProj/chartmaker/HEAD/example/linechart.png -------------------------------------------------------------------------------- /edu.mills.appinventor.ChartMaker.aix: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MillsCS215AppInventorProj/chartmaker/HEAD/edu.mills.appinventor.ChartMaker.aix -------------------------------------------------------------------------------- /edu.mills.appinventor.ChartMaker_src.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MillsCS215AppInventorProj/chartmaker/HEAD/edu.mills.appinventor.ChartMaker_src.zip -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.class 2 | 3 | # Mobile Tools for Java (J2ME) 4 | .mtj.tmp/ 5 | 6 | # Package Files # 7 | *.jar 8 | *.war 9 | *.ear 10 | 11 | # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml 12 | hs_err_pid* 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 MillsCS215AppInventorProj 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ChartMaker 2 | An extension for MIT App Inventor that adds graphing capability (for pie, bar, and line graphs) through Google Charts. Created by Kate Manning and Emily Kager to fulfill a graduate requirement for CS215 at Mills College. 3 | 4 | ## How to Use the Extension 5 | 6 | Download the extension file (ChartMaker.aix) and import it into your project. 7 |
8 |

We have also created an example App Inventor project (ChartMakerExample.aia) for you to import and take a look at the blocks and how they can be used.

9 | 10 |

Example Blocks

11 | 12 |

You can see the designated types for each parameter here. To display your chart you will need a WebViewer, which you must pass to the blocks.

13 |

Pie Chart Block

14 |

Bar Chart Block

15 |

Line Chart Block

16 | -------------------------------------------------------------------------------- /edu/mills/appinventor/ChartMaker.java: -------------------------------------------------------------------------------- 1 | package edu.mills.appinventor; 2 | 3 | import android.util.Log; 4 | 5 | import com.google.appinventor.components.annotations.DesignerComponent; 6 | import com.google.appinventor.components.annotations.SimpleFunction; 7 | import com.google.appinventor.components.annotations.SimpleObject; 8 | import com.google.appinventor.components.common.ComponentCategory; 9 | import com.google.appinventor.components.runtime.AndroidNonvisibleComponent; 10 | import com.google.appinventor.components.runtime.Component; 11 | import com.google.appinventor.components.runtime.ComponentContainer; 12 | import com.google.appinventor.components.runtime.WebViewer; 13 | import com.google.appinventor.components.runtime.util.YailList; 14 | 15 | import java.io.File; 16 | import java.io.FileWriter; 17 | import java.io.IOException; 18 | 19 | import static org.acra.ACRA.LOG_TAG; 20 | 21 | 22 | @DesignerComponent(version = ChartMaker.VERSION, 23 | description = "An extension that provides chart-making capabilities. " + 24 | "Pie charts, bar graphs, and line charts can be displayed in a " + 25 | "WebViewer using the visualization API for Google Charts. " + 26 | "Data can be fed into each draw function in list form, " + 27 | "with strings for labels and titles.", 28 | category = ComponentCategory.EXTENSION, 29 | nonVisible = true, 30 | iconName = "images/extension.png") 31 | @SimpleObject(external = true) 32 | public class ChartMaker extends AndroidNonvisibleComponent implements Component { 33 | 34 | public static final int VERSION = 2; 35 | private ComponentContainer container; 36 | private String filePath; 37 | 38 | public ChartMaker(ComponentContainer container) { 39 | super(container.$form()); 40 | } 41 | 42 | private static String PreparePieLabels(YailList typeOfInput, YailList inputLabel) { 43 | StringBuilder pieLabels = new StringBuilder(); 44 | for (int i = 1; i < typeOfInput.size() + 1; i++) { 45 | pieLabels.append("data.addColumn('" + typeOfInput.get(i).toString() + "', '" + 46 | inputLabel.get(i).toString() + "');\n"); 47 | } 48 | return pieLabels.toString(); 49 | } 50 | 51 | private static String PreparePieValues(YailList itemList, YailList valueList){ 52 | StringBuilder parsedValues = new StringBuilder(); 53 | parsedValues.append("data.addRows(["); 54 | for (int i = 1; i < itemList.size() + 1; i++){ 55 | parsedValues.append("['" + itemList.get(i).toString() + "', " 56 | + valueList.get(i) + "]"); 57 | if (i == itemList.size()){ 58 | parsedValues.append("]);"); 59 | } 60 | else{ 61 | parsedValues.append(","); 62 | } 63 | } 64 | return parsedValues.toString(); 65 | } 66 | 67 | 68 | private static String PrepareLineLabels(YailList labelInput){ 69 | StringBuilder parsedLabels = new StringBuilder(); 70 | parsedLabels.append("data.addColumn('number', 'X');"); 71 | for (int i = 1; i < labelInput.size() + 1; i++) { 72 | parsedLabels.append("\ndata.addColumn('number', '").append(labelInput.get(i).toString() + "');"); 73 | } 74 | return parsedLabels.toString(); 75 | } 76 | 77 | private static String PrepareLineValues(YailList values){ 78 | int numRows = values.size(); 79 | YailList rowData = (YailList) values.get(1); 80 | int numDigits = rowData.size(); 81 | 82 | StringBuilder parsedLineValues = new StringBuilder(); 83 | parsedLineValues.append("data.addRows([\n"); 84 | 85 | for (int i = 1; i < numRows + 1; i++) { 86 | parsedLineValues.append("["); 87 | rowData = (YailList) values.get(i); 88 | for (int j = 1; j < numDigits + 1; j++) { 89 | parsedLineValues.append(rowData.get(j)); 90 | if (j == numDigits) { 91 | parsedLineValues.append("]"); 92 | } else { 93 | parsedLineValues.append(", "); 94 | } 95 | } 96 | if (i == numRows) { 97 | parsedLineValues.append("]);"); 98 | } else { 99 | parsedLineValues.append(", "); 100 | } 101 | } 102 | return parsedLineValues.toString(); 103 | } 104 | 105 | @SimpleFunction(description = "Creates a pie chart from a title string and input lists of data, " + 106 | "types, labels, items, and values and displays the chart in the WebViewer passed as the final argument. ") 107 | public void DrawPieChart(String title, YailList types, YailList labels, YailList items, 108 | YailList values, WebViewer webViewer){ 109 | String parsedTypes = PreparePieLabels(types, labels); 110 | String parsedValues = PreparePieValues(items, values); 111 | try { 112 | String htmlCode = "\n" + 113 | " \n" + 114 | " \n" + 115 | " \n" + 137 | " \n" + 138 | "\n" + 139 | " \n" + 140 | "
\n" + 141 | " \n" + 142 | ""; 143 | File file = File.createTempFile("display", ".html"); 144 | filePath = file.getAbsolutePath(); 145 | FileWriter filewriter = new FileWriter(file); 146 | filewriter.write(htmlCode); 147 | filewriter.close(); 148 | } catch (IOException e) { 149 | Log.e(LOG_TAG, "IOException", e); 150 | } 151 | webViewer.GoToUrl("file://" + filePath); 152 | } 153 | 154 | @SimpleFunction(description = "Creates a bar chart from a title string and input lists of data " + 155 | "types, labels, items, and values and displays the chart in the WebViewer passed as the final argument. ") 156 | public void DrawBarGraph(String title, YailList types, YailList labels, YailList items, 157 | YailList values, WebViewer webViewer){ 158 | String parsedTypes = PreparePieLabels(types, labels); 159 | String parsedValues = PreparePieValues(items, values); 160 | try { 161 | String htmlCode = "\n" + 162 | " \n" + 163 | " \n" + 164 | " \n" + 185 | " \n" + 186 | "\n" + 187 | " \n" + 188 | "
\n" + 189 | " \n" + 190 | ""; 191 | File file = File.createTempFile("display", ".html"); 192 | filePath = file.getAbsolutePath(); 193 | FileWriter filewriter = new FileWriter(file); 194 | filewriter.write(htmlCode); 195 | filewriter.close(); 196 | } catch (IOException e) { 197 | Log.e(LOG_TAG, "IOException", e); 198 | } 199 | webViewer.GoToUrl("file://" + filePath); 200 | } 201 | 202 | @SimpleFunction(description = "Creates a line graph from a main title string, x- and y-axis " + 203 | "title strings, and input lists of lists of labels and values, and displays the chart " + 204 | "in the WebViewer passed as the final argument. ") 205 | public void DrawLineGraph(String chartTitle, String hAxisTitle, String vAxisTitle, YailList labels, YailList values, WebViewer webViewer){ 206 | String parsedLabels = PrepareLineLabels(labels); 207 | String parsedValues = PrepareLineValues(values); 208 | try { 209 | String htmlCode = "\n" + 210 | " \n" + 211 | " \n" + 212 | " \n" + 242 | " \n" + 243 | "\n" + 244 | " \n" + 245 | "
\n" + 246 | " \n" + 247 | ""; 248 | File file = File.createTempFile("display", ".html"); 249 | filePath = file.getAbsolutePath(); 250 | FileWriter filewriter = new FileWriter(file); 251 | filewriter.write(htmlCode); 252 | filewriter.close(); 253 | } catch (IOException e) { 254 | Log.e(LOG_TAG, "IOException", e); 255 | } 256 | webViewer.GoToUrl("file://" + filePath); 257 | } 258 | 259 | } --------------------------------------------------------------------------------