# Working with Different Types of Interactive Charts

## Silvina Paola Hillar

October 2013

(For more resources related to this topic, see here.)

This article explains how to create and embed 2D and 3D charts. They can also be interactive or static and we will insert them into our Moodle courses. We will mainly work with several spreadsheets in order to include diverse tools and techniques that are also present. The main idea is to display data in charts and provide students with the necessary information for their activities.

We will also work with a variety of charts and deal with statistics as a baseline topic in this article. We can either develop a chart or work with ready-to-use data. You can design these types of activities in your Moodle course, together with a math teacher.

When thinking of statistics, we generally have in mind a picture of a chart and some percentages representing the data of the chart. We can change that paradigm and create a different way to draw and read statistics in our Moodle course. We design charts with drawings, map charts, links to websites, and other interesting items.

We can also redesign the charts, comprising numbers, with different assets because we want not only to enrich, but also strengthen the diversity of the material for our Moodle course since some students are not keen on numbers and dislike activities with them. So, let's give another chance to statistics!

There are different types of graphics to show statistics. Therefore, we show a variety of tools available to display different results. No matter what our subject is, we can include these types of graphics in our Moodle course.

You can use these graphics to help your students give weight to their arguments and express themselves using key points clearly. We teach students to include graphics, read them, and use them as a tool of communication.

We can also work with puzzles related to statistics. That is to say, we can invent a graph and give tips or clues to our students so that they can sort out which percentages belong to the chart. In other words, we can create a listening comprehension activity, a reading comprehension activity, or a math problem. We can just upload or embed the chart, create an appealing activity, and give clues to our students so that they can think of the items belonging to the chart.

# Inserting column charts

In this activity, we work with the website http://populationaction.org/. We work with statistics about different topics that are related to each other. We can explore different countries and use several charts in order to draw conclusions. We can also embed the charts in our Moodle course.

We need to think of a country to work with. We can compare statistics of population, water, croplands, and forests of different countries in order to draw conclusions about their futures.

## How to do it...

We go to the website mentioned earlier and follow some steps in order to get the HTML code to embed it in our Moodle course. In this case, we choose Canada. These are the steps to follow:

1. Enter http://populationaction.org/ in the browser window.
2. Navigate to Publications | Data & Maps.
3. Click on People in the Balance.
4. Click on the down arrow next to the Country or Region Name search block and choose Canada, as shown in the following screenshot:

5. Go to the bottom of the page and click on Share.
6. Copy the HTML code, as shown in the following screenshot:

7. Click on Done.

## How it works...

It is time to embed the charts in our Moodle course. Another option is to draw the charts using a spreadsheet. So, we choose the weekly outline section where we want to add this activity and perform the following steps:

1. Click on Add an activity or resource.
2. Click on Forum | Add.
3. Complete the Forum name block.
4. Click on the down arrow in Forum type and choose Q and A forum.
5. Complete the Description block.
6. Click on the Edit HTML source icon.
7. Paste the HTML code that was copied.
8. Click on Update.
9. Click on the down arrow next to Subscription mode and choose Forced subscription.
10. Click on Save and display. The activity looks as shown in the following screenshot:

# Embedding a line chart

In this recipe, we will present the estimated number of people (in millions) using a particular language over the Internet. To do this, we may include images in our spreadsheet in accordance with the method being used to design the activity. Instead of writing the name of the languages, we insert the flags that represent the language used. We design the line chart taking into account the statistical operations carried out at http://www.internetworldstats.com/stats7.htm.

We carry out the activity using Google Docs. We have to sign in and follow the steps required to design a spreadsheet file. We have several options for working with the document. After you have an account to work with Google Drive, let's see how to make our line chart!

## How to do it...

We work with s spreadsheet because we need to make calculations and create a chart. First, we need to create a document in the spreadsheet. Therefore, we need to perform the following steps:

1. Click on Create | Spreadsheet, as shown in the following screenshot:

2. Write the name of the languages spoken in the A column.
3. Write the figures in the B column (from the http://www.internetworldstats.com/stats7.htm website).
4. Select the data from A1 up to the B11 column. Click on Insert | Chart.
5. Edit your chart using the Chart Editor, as shown in the following screenshot:

6. Click on Insert.
7. Add the images of the flags corresponding to the languages spoken. Position the cursor over C1 and click on Insert | Image....
8. Another pop-up window will appear. You have several ways to upload images, as shown in the following screenshot:

9. Click on Choose an image to upload and insert the image from your computer.
10. Click on Select.
11. Repeat the same process for all the languages. Steps 7 to 11 are optional.
12. Click on the chart.
13. Click on the down arrow in Share | Publish chart..., as shown in the following screenshot:

14. Click on the down arrow next to Select a public format and choose Image, as shown in the following screenshot:

15. Copy the HTML code that appears, as shown in the previous screenshot.
16. Click on Done.

## How it works...

We have just designed the chart that we want our students to work with. We are going to embed the chart in our Moodle course; another option is to share the spreadsheet and allow students to draw the chart. If you want to design a warm-up activity for students to guess or find out which the top languages used over the Internet are, you could add a chat, forum, or a question in the course.

In this recipe, we are going to create a wiki so that students can work together. So, select the weekly outline section where you want to add the activity and perform the following steps:

1. Click on Add an activity or resource.
2. Click on Wiki | Add.
3. Complete the Wiki name and Description blocks.
4. Click on the Edit HTML source icon and paste the HTML code that we have previously copied. Then click on Update.
5. Complete the First page name block.
6. Click on Save and return to course. The activity looks as shown in the following screenshot:

# Designing a graph out of a choice activity

In this recipe, we design a choice activity in Moodle and, after creating the choices, Moodle creates a graph. This graph is to be created after making a survey with our students' participation. Therefore, our first step is to design a survey in our Moodle course.

## How to do it...

We design an activity to ask our students to vote in order to create the chart. We create the activity as a choice so that students can choose their favorite type of computer games. Afterwards, the chart shows the results.

Choose the weekly outline section where you want to add the activity. The following are the steps that you are going to take:

1. Click on Add an activity or resource.
2. Click on Choice | Add.
3. Complete the Choice name and Description blocks.
4. Complete the Options block.
5. Complete the Restrict answering to this time period, Miscellaneous settings, and Common module settings blocks, as shown in the following screenshot:

## How it works...

Students must click on the activity and vote. The way that this activity was designed, it won't allow students to vote more than once, therefore the activity works, as shown in the following screenshot:

# Creating bar charts with hyperlinks

In this recipe, we perform a very simple activity. We use an OpenOffice spreadsheet, if you do not happen to have it you can download it from the website http://www.openoffice.org/download/.

Another option happens to be Microsoft Excel. You can download a free trial version from the website http://office.microsoft.com/en-us/try/try-office-2010-FX101868838.aspx?WT%2Emc%5Fid=MSCOM%5Fbnr%5Fenus%5Ftry.

We will design a database activity in our Moodle course to survey students on the sports they play. We'll just carry out simple statistics; we are not focusing on other factors, though a math teacher can help us. We'll design this activity in two parts: the first part is the survey of our students and the second part consists of gathering the data and designing a chart using an OpenOffice spreadsheet, creating the hyperlinks through a website, and uploading it to our Moodle course.

## How to do it...

We enter our Moodle course and design the database activity for gathering information about the sports students play. Select the weekly outline section and follow these steps in order to develop the activity:

1. Click on Add an activity or resource.
2. Click on Database | Add.
3. Complete the Name and Description blocks.
4. Click on Save and display.
5. Click on the down arrow in Create a new field and choose Textarea, as shown in the following screenshot:

6. Fill in the Textarea fields with categories of sports which our students are likely to play.
8. Repeat steps 5-7 as many times as required.
9. Go back to the course. The activity looks as shown in the following screenshot:

## How it works...

We have just designed the survey to be carried out in our class. Now, it is time to design the bar chart to insert into our Moodle course telling the rest of the class which sports their friends play. We are going to work with an OpenOffice spreadsheet; follow these steps so that you can design the activity:

1. Complete the spreadsheet using the information that you obtain from the database activity from the Moodle course after students have completed the activity.
2. Select the first group of columns with the figures, click on Insert | Chart, and choose a graph.
3. The chart appears and you may edit the chart.
4. Click on File | Save As….Write a name for the file and click on Save. The file may look as shown in the following screenshot:

## There's more...

We can insert hyperlinks in the chart that we have just created, though we must use another website because it isn't possible to do this in the OpenOffice spreadsheet. Therefore, we click on the graph, right-click on it, and click on Copy, as shown in the following screenshot:

Paste the image in either Paint or Inkscape (simple graphics software). Repeat the same process for the other chart.

### Inserting hyperlinks into the images

We have just saved the charts as images. Therefore, we can add hyperlinks to those images. We can do it using a web page, although there happens to be other options as well. Visit http://www.image-maps.com/ and perform the following steps in order to get the hyperlinks:

1. Click on Browse..., choose the image that you want to upload, and click on Open.
2. Click on Start Mapping Your Images as shown in the following screenshot:

3. Click on continue to next step.
4. Click on Rectangle. Drag-and-drop the rectangle that appears and form its shape such that it covers the size of the bar in the chart.
5. Complete the Link for this map and Title/Alt for this map blocks.
6. Click on Save.
7. Repeat steps 4-6 for each bar. When you finish adding the hyperlinks, click on Get Your Code.
8. Click on HTML Code.
9. Select the code and copy it, as shown in the following screenshot:

10. Copy the code.
11. Enter the Moodle course and create an activity for students to draw conclusions about sports played in the class.
12. Paste the code which will display the chart with the hyperlinks. You also have to upload the image file in the Moodle course.
13. You need to edit the name of the image file in the HTML code so that the image in the HTML code and the image that you've uploaded in the Moodle course have the same name.
14. The following is an example of an assignment activity. When hovering the mouse over the bar, a hyperlink is displayed at the bottom, as shown in the following screenshot:

# Working with area charts

We design this activity using the website http://sheet.zoho.com/login.do?serviceurl=/home.do. First of all, you have to sign up for free and then we can design our chart there. It is very interesting because we have access to it anywhere. Besides, we can also embed it in our Moodle course!

We are not going to survey our students. We can look for online statistics about any topic or we can upload an existing file to the previously mentioned website. Therefore, we upload the previous activity that we designed in OpenOffice to http://sheet.zoho.com/.

Considering the fact that we are working with area charts, we can add another element to the survey; we can add figures that show which sports students played last year. We have to find comparisons between them in order to design an area chart depicting the statistics.

## How to do it...

We have to sign up before we can create the activity. After you sign in, the steps that you have to follow in order to design the activity are as follows:

1. Click on Home in your Zoho account.
2. Click on Docs near the right-hand margin, as shown in the following screenshot:

3. Click on Create | Spreadsheet.
4. Navigate to File | Import | Browse. Click on the file that you want to upload by clicking on Open. Finally, click on Import, as shown in the following screenshot:

5. Click on Close.
6. The file created resides within our files on Zoho.
7. Click on File | Open. Click on the file that we have just imported.
8. Add data in another column; show the new figures (from this year) in C.
9. Click on the chart because the figures were also imported.
10. Navigate to Edit | Chart type | Area Chart. Click on OK, as shown in the following screenshot:

11. Click on Data, add the newly created column C, and click on OK.
12. Click on the down arrow next to Share. Under Publish, the Allow to export block is ticked, as shown in the following screenshot:

13. Click on OK.
14. Click on Share | Embed within the ribbon. Copy the HTML code, as shown in the following screenshot:

15. Click on Close.
16. Save the file.

## How it works...

We did not create a chart in this activity because the idea was that you would learn how to use an existing one and import it to another online spreadsheet. It is time to embed this area chart in our Moodle course. So, we can add, as a database, a third element to the activity that we first designed. We are going to create a chat activity so that there is interaction among our students and they can talk about what their free-time activities are. Perform the following steps:

1. Click on Add an activity or resource.
2. Click on Chat | Add.
3. Complete the Name of this chat room and Description fields.
4. Click on the Edit HTML source icon and paste the HTML code of the spreadsheet.
5. Click on Save and display. The activity looks as shown in the following screenshot:

# Creating a poll and designing a surface chart

We are going to create another poll in our Moodle course. In previous recipes, we have already created a poll; but, this time, we'll design it using Feedback. We ask students and they have to provide their answers. Let's get ready!

We will design the poll using Feedback within activities and create the chart drawing by exporting the file from Moodle; Feedback has this advantage. The poll has to do with Music. The question is: Which device do you use to listen to music?

## How to do it...

We enter our Moodle course, choose the weekly outline section where we want to place the activity, and perform the following steps in order to carry out the activity:

1. Click on Add an activity or resource.
2. Click on Feedback | Add.
3. Complete the Name and Description blocks.
4. Click on Save and display.
5. Click on Edit questions in the top menu.
6. Click on the down arrow within the Add question to activity block and select Short text answer, as shown in the following screenshot:

7. Write the question `Which device do you use to listen to music?` in the Question block.
8. Click on Save question.
9. Go back to the course.

## How it works...

Students will answer the poll only once. We can see the answers of the poll and export the files to OpenOffice or Microsoft Excel and draw a chart using them without typing the data. Feedback generates an `.xls` file; this file can be opened with either Microsoft Excel or an OpenOffice spreadsheet, depending on which one is used on your computer. Perform the following steps in order to draw the surface chart:

1. Click on Analysis | Export to Excel (or OpenOffice, depending on the software you use).

2. A pop-up window will appear displaying a message to open/save the file, click on OK for any of the files listed.
3. Save the file.
4. Highlight the necessary data to draw a surface chart. Navigate to Insert | Other Charts | Surface (you may also use another type of chart, such as bars).
5. The chart may look as shown in the following screenshot:

6. Right-click on the chart and select Copy. Paste the chart in Paint or Inkscape and save the file as `.png`. In this case, you can upload the image of the chart to the Moodle course and design another activity showing the students the result of the poll.

It appears on both screenshots in this recipe in Microsoft Excel, though it is also possible to do it in an OpenOffice spreadsheet if that happens to be the software that you use.

# Drawing a donut interactive chart

We are going to create an interactive chart using OpenOffice Draw. We can insert a chart in a very simple way. We can also add images to the chart and hyperlinks to the images; we can design the same type of activity, saving the image as `.png`, and use http://www.image-maps.com/.

We are going to work with statistics of the nationality of our students in the school. We enter the names of the continents. If you happen to live in a cosmopolitan city, it would be very interesting! We add hyperlinks to websites displaying information about the continents.

## How to do it...

In this recipe, we work with OpenOffice; another way to do it is to use similar software. So, we run OpenOffice Draw and perform the following steps to carry out the activity:

1. Click on File | Save As….Write a name for the file. Click on Save.
2. Click on Insert | Chart.
3. Right-click on the chart and choose Chart Data Table..., as shown in the following screenshot:

4. Complete the table with the information you want to display on the chart using the nationality of the students in the classroom or school.
5. Right-click again on the chart and choose Chart Type.
6. Choose Pie | Exploded Donut Chart.
7. Tick 3D Look, as shown in the following screenshot:

8. Click on OK.
9. Navigate to Insert | Picture | From file. Click on the image you want to insert. Click on Open.
10. Insert one image related to each continent for each piece of the chart.
11. Repeat steps 9 and 10 for each bar of the chart.
12. Click on the Hyperlink icon. Complete the block with hyperlinks related to each continent, as shown in the following screenshot:

13. Repeat step 12 for the rest of the images.
14. Save the file.

## How it works...

We have just designed a chart with hyperlinks using OpenOffice. We can insert it in our Moodle course as a resource. So, we can design an activity in several parts. You can make a survey to know the nationality of students if you happen not to have this information (as we have done in previous recipes). Then, you can create the chart using Draw in OpenOffice (that is your homework!) and add the file as a resource in the Moodle course. Finally, you can create an online text activity within assignments asking students which continent they find appealing to visit and why, based on the information displayed on the chart.

# Designing a map chart

In this activity, we design a map chart. This chart is very appealing to our students due to the fact that it is not an ordinary one. We need to design it in Google Docs; we have already used this website in a previous recipe, so we have an account.

We can use the information in the previous recipe in this chart because we've worked with recording the nationality of our students; but, in this case, we need to concentrate on countries not continents. We need the name of the countries in order to design this map chart. So, let's get ready in order to create it!

## How to do it...

We enter Google Docs and we sign into our account. Then, we need to perform the following steps in order to design a map chart:

1. Click on Create | Spreadsheet.
2. Design the chart using the information from the previous recipe. Another option is to design a chart using names of countries.
3. Select the data to draw the chart. Click on Insert | Chart.
4. The chart editor appears in a pop-up window.
5. Navigate to Charts | Map | Insert, as shown in the following screenshot:

6. The map chart is ready!

## How it works...

It is time to embed the charts in our Moodle course. One way to do it is by following the steps in the previous recipe to share the file; another option is to use Google+ to share the chart that we have designed. Then, we share the link in Google+ in our Moodle course. So, perform the following steps:

1. Click on Share.
2. Click on the Google+ icon, as shown in the following screenshot:

3. A pop-up window appears.
4. Add a comment, as shown in the following screenshot:

5. Click on Share.

If you have a Google Docs account, you can share the account with Google+ so that the settings are the same once signed in with Google. Copy the URL and add a resource in the Moodle course so that students can enter their account on Google+ and share their ideas. In this case, we have to bear in mind privacy concerns, especially with younger students.

# Creating a gauge chart

This is a very appealing chart because it is not an ordinary one. It is a very simple activity that we can carry out with any of the information that we have been working with. In this case, we are going to work with types of memory. So, let's get ready!

First of all, we need to collect the data in order to draw the chart. We have already designed several activities in which we can do it, although there are many more ways to do it. After gathering the necessary data to draw the chart, we need to sign in to Google Docs where we can find this type of chart.

## How to do it...

We need to enter the website http://populationaction.org/ and follow some steps in order to get the HTML code and embed it in our Moodle course. The following are the steps to follow:

2. Click on Untitled spreadsheet and write the name of the file, as shown in the following screenshot:

3. After gathering it, fill in the data to be used in order to draw the chart, as has been done in the previous recipes.
4. Select the data and click on Insert | Chart.
5. The chart editor appears in a pop-up window. Click on More, as shown in the following screenshot:

6. Click on More | Gauge, as shown in the following screenshot:

7. Click on Insert.
8. Click on Share on the top right-hand side.
9. Click on Change under Who have access.
10. Tick the Anyone with the link option. Click on Save and then Done.
11. Click on the down arrow in the chart and choose Publish chart…, as shown in the following screenshot:

12. Click on the down arrow next to Select a publish format and choose Image.
13. Copy the HTML code.
14. Click on Done.

## How it works...

It is time to embed the gauge charts in our Moodle course. We can design an assignment in which students have to find out how intelligences work. So, we choose the weekly outline section where we want to insert this activity and perform the following steps:

1. Click on Add an activity or resource.
2. Click on Assignment | Add.
3. Complete the Assignment name and Description blocks.
4. Click on the Edit HTML source icon.
5. Paste the HTML code which was copied.
6. Click on Update.
7. Tick File submission within Submission types.
8. Click on Save and display. The activity looks as shown in the following screenshot:

# Summary

In this article, we learned how to create and design different types of charts, use of images, hyperlinks, and different tools to dessign the charts. We also learned how to create polls and graphs.

## Resources for Article :

Further resources on this subject:

You've been reading an excerpt of: