tutorial on creating visual for project

1. HOW TO TUTORIAL:
CREATING DATA
VISUALIZATION
GROUP 8

2. STEP 1: GETTING STARTED
• Gather all the information you would like to include in your visual
• Click this link https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart to get
started with your visual

3. STEP 2: PICK YOUR CHART
• You have the option to select what type of chart you would like to use for the visual on the left side
• Select the donut graph

4. BETTER VIEW OF THE DIFFERENT CHARTS AVAILABLE

5. STEP 3: ALMOST THERE!
• After selecting the donut graph there should be a bar that lights up blue and says “Code it yourself on
JSFiddle” click this bar.
• After selecting this it will take you to a page on the JSFiddle site where you can see the coding info and
a example of the graph you selected (donut graph).

6. BETTER VIEW OF THE LAST PICTURE IN STEP 3

7. STEP 4: ADD THE INFORMATION
• Remember all that information you gathered for the visual? Great! Time to put it to use.
• I suggest having a tab open with the example so you can switch back and forth in case you get confused.
• I’ll post a screen shot of how I input my data and also show how the example did theirs.

8. STEP 4: CONTINUED
• For this step you
do not need to
change anything!!!
EXCEPT for the
words in green and
red.
• The words in green
are where you are
going to input your
information.
• Make sure you
only change what
needs to be
changed.
• Keep the same
format and look at
the example if
necessary.
• After inputting all
the information
click run in the top
corner to make
sure it comes out
as a chart.
• If nothing shows
after you click run
then you messed
up the formatting.

9. POINTS TO REMEMBER!
• Inside the red box is where your
information goes!
• You can change the categories
and adjust the hours or minutes
per day!
• Keep the right format or your
chart will not show up!
• Below the red rectangle there
are more green letters that you
can change for the title, I
highlighted it in yellow.