App Inventor Graph

I have come up with a way to graph your own graph using the canvas. This example takes in two lists but can work with any number. However the more you put in the more difficult it will become to make out data on the screen. The loop that creates the graph is large so it is split over two screen shots. You start by building the interface. Drag out two buttons and a canvas. I have mine position with a button at the top canvas in the middle and the last bottom at the bottom. You can have them in any position. However make sure you set the canvas to fill the width and to set the height to about 300 so that it takes up most of the screen. You can also have a background image with a line for X & Y. If you do you can leave the sizing to be automatic however the image will have to be the excat size of the width and height minus the buttons or else it will not fit correctly into the canvas and you will have the X and Y lines missing.

On the interface side the top button creates the graph and the bottom button clears it.

Here are the methods and variables used in the app inventor.

As you can see where I have a number of variables declared. The x,y coordinate for the start and end of the line. These are also used to mark the start and end of the line with dots. There is a variable that is used to count how many times you have gone through the loop. In this example the graph is showing data for seven days. However if you want a graph that shows data for a longer period you should have the loop check that the loop counter, called "loop" is not greater that the length of the list that is providing the data. The loop counter is also used to get the data from the lists as this is what is used to show you where you are in the loop. Be careful as list start at one and not zero. The Top button called button1, when click will create the graph. As you can see I am calling the createLine method twice as I want two line in the graph, and passing in a different line colour and list each time. The bottom called button2, clears the canvas and also resets the variables used so that we can recreate the graph again later. The reason that the resetting of variables is done inside a method is that after the loop inside the createLine is done and has finished create the first line, the variables are reset again incase we are creating more that one line in the graph. In this way it is better to have the variables reset in the one place and having it called from multiply locations. The same theory goes for the lineSetter method. Each time we draw a section of the line we want to mark where it is starting and where it is finishing. To do this we change the size of the line and the colour twice, once for each dot at the start and end of the line. The steps we take are draw the start dot and write the value, draw the line, draw the end dot and write the next value. This means that we are changing the colour and width of the line three time for each section. Again it is good practice to do this in only one location and pass the values to that location. In this way if we change the way the line colour is set we only have to make that change in one place and not three places.

As you can see here I am passing in the list that will be used to create the graph and the colour I want for the line. Getting the Y coordinate was tricky, the x,y coordinates 0,0 of the canvas is at the the top right hand corner. While a graphs x,y 0,0 normally starts in the bottom right right. Also a graph goes from 0 to 100, however the canvas which the graph is displayed takes its max x,y value from the size of the canvas which is over 300 pixels. So to map the percentages onto the graph we get the values from the list and make them a percentage of the canvas size and take it away from the canvas giving us the desired graph. We are also able to map dots and values to the graph. This graph is set for seven days. However it is better practice to use the length of the list instead of a set number as

above, because if the list is short that the set number the application will crash as it will look for a value from the list that is not there. The loop starts off by getting the first dot point, and then the next dot point. These will be the start and end points for this section of line. When drawing the start dot, call the linesetter so we can change the size of the dot and its colour so that is stands out, set the canvas to draw a dot at the first X,Y coordinate. Also it is helpful to write the value of the dot, remember to offset the text otherwise it will be writen directly ontop of the dot and will not be visible. I am offsetting the texts position by 20

The next step in the loop is to draw the line. Before we can do this we call the lineSetter again and reset the line to the colour we passed in when we first called the method. We also reduce the line width. The canvas draws the line from the starting X,Y coordinate to

the end X,Y coordinate for this section. Again we draw another dot and do the same before, call the lineSetter and change the colour and width for the dot. However when writing the text for the last dot we want to get the next value so we add one onto the loop counter so we dont get the same start and end value. Now that this section of line has been drawn we set the X,Y coordinate for the starting point to be the end points of this section. This is because when we move onto the next section the old end point will be the new starting point. We also move the end X coordinate along. When I am moving in by a set value of 40. In this way each point along the graph has an even and equal sized pace between each point. However another way to get this value would be to use the width of the canvas and the number of elements in the list. In this way if you used a long list you could reduce the size between each point and still keep the equal sized space between each point without having to go back and change your program at a later date when you are using a longer list. When the loop is finished we call the reset method. In this way the createLine method resets itself incase it will have to create another line when it is finished creating this one. And here is the end product.

If you have any questions or comments about this tutorial please email at androidsupport@daithisapps.com http://daithisapps.com/appinventorgraph.php