jelidens jelidens - 1 year ago 96
HTML Question

Using form input to change structure of a pie chart

I am trying to create something that uses Google charts found here (https://www.w3schools.com/howto/howto_google_charts.asp). However I am wanting to get input using some sort of HTML form element and change the pie chart based on the input.
For example, the w3schools example has the chart initially look like,

var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 18],
['Friends', 2],
['Eat', 2],
['TV', 3],
['Gym', 2],
['Sleep', 7]
]);


but what I am wondering is how to let a user dictate what and how many "tasks" exist and how many hours is spent on each task. I'd imagine that I would want to use HTML forms for the input, but I am unsure of how to take the input from the form and use it as the new values.

Answer Source

Use AngularJs. Bind the values which you want to make parametric to Angular variables. Also Bind these variables to input fields. So changing these inputs is expected to change pie chart.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download