Creating Graphs and Charts in Google Forms
How to Make a Google Chart with User Input
Google charts are simple, easy to use developer tools to display live data on your site. They are completely free, fully customisable and are easy to implement on a website. Google Developers provides the code for a wide range of dynamic graphs for any user to implement and customise on their website. Google, however, does not provide the code to directly connect user input boxes to a Google chart. This how-to article goes through the step-by-step process of implementing a Google chart and customising it to accept user input.
Select the chart you wish to implement.Go to the and find the chart type you would like to place on your website. This article will detail how to implement and customise a column chart. Although a column chart is used for the sake of example, the method this article employs to accept user input is universal to all Google chart types.
Copy and paste the code provided by Google Developers into an HTML document in an IDE or Text Editor.
Declare variables for the values you want users to input.These variables must be declared inside the script tags surrounding the code for the Google chart. Set these variables equal to default numeric values. These values will be the first numbers displayed when the chart is initially loaded.
Delete unnecessary chart values.Change the names of the chart axes if you'd like.
An image of a value in a Google Chart Exchanged with a variable value.Inside the code for the graph, replace the values in the code for the Google chart with the variables declared in Step 3.In this example, the variables will be called "ask" and "bid".
In separate "div" tags, outside of the graph script, insert an HTML form with "form" tags.Inside the first "form" tag, set method equal to "post", action equal to a hashtag, id equal to "formvalue" and onkeyup equal to "drawChart()".
- Remember to refer to the image below as a reference. The next step will explain out to insert input boxes so that they integrate with your Google chart.
Insert "input" tags between the "form" tags in the HTML document.Inside each "input" tag, set the type equal to "number", set the name to anything you wish, set the value equal to "1" and set the id equal to a non-numeric value other than the variables declared in Step 3. Before the "input" tags, type a word or phrase that describes each input box, followed by a colon. In the picture above, this description word or phase is "Value 1" and "Value 2".
Inside the curly braces after function drawChart(), retrieve the user input from the form using "getElementById(' ')." Type the ID declared in Step 6 into the parentheses between the apostrophes. Set the variables declared in Step 3 equal to this value. Use the picture above as a reference.
Save the graph and view it in your browser.
Video: Creating a Column Chart with Google Sheets
10 Sugariest Meals in America
How to Cram for a Test
14 Natural Ways To Deal With Restless Legs Syndrome
Don’t Miss The Coach Tony Duquette Collaboration
How to Write Spoken Word
Marlene Dietrich, Bisexual Movie Star
6 ways to improve your bench press
Why the Kardashian-Jenners Cut Out These Members of Their InnerCircle
How to Deal With an Overly Immature Person
How to Handle Boys when Youre a Teenage Girl
20 Quotes From Parks And Recreation That Will Remind You Why It’s One Of The Funniest Shows On TV