CODEWITHSUNDEEP
javascript
user874185
user874185

Reputation: 853

Passing Variable to Google Piechart

Im trying to pass a variable into the the google chart but when I do it the chart stops showing up, my goal is for the chart to change every time I put in a different number in the input field but im just getting no where right now. This is what I have, can someone please offer some guidance on what I am doing wrong?

Javascript

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>

    <script type="text/javascript">
         function numbers(){
            var work_field = document.forms['work_form']['work_n_field'].value;
            var work_div = document.getElementById('number-work');
            var numberschart = work_div.innerHTML = work_field;
            return false;
        };

        function drawVisualization() {
            // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(5);
        data.setValue(0, 0, 'Work');
//Right here is where I pass my variable into the chart
        data.setValue(0, 1, numberschart);
//And I leave the rest here until I define more input field.
        data.setValue(1, 0, 'Eat');
        data.setValue(1, 1, 2);
        data.setValue(2, 0, 'Commute');
        data.setValue(2, 1, 2);

        // Create and draw the visualization.
        new google.visualization.PieChart(document.getElementById('visualization')).
            draw(data, {
            title:"Mortgage Rates",
            colors: ['#a4b12d', '#818e0a', '#5c6601', '#f0fd79', '#dbe864'],
            });
      }    
      google.setOnLoadCallback(drawVisualization);
    </script>

Html

  <div id="visualization" style="width: 400px; height: 300px;"></div>
    <form name="work_form" onsubmit="return numbers()">
    <label id="n-work-label">Work</label><input name="work_n_field"/>
    <button name="submit" id="submit" value="submit" onclick="numbers()">Submit</button>
    </form>
    <div id="number-work"></div>
    </div>

Any help is greatly appreciated, Thank you

I have also added it to js fiddle, but when adding the chart to a resource it doesnt seem to detect it. http://jsfiddle.net/pkCCa/

Upvotes: 2

Views: 3975

Answers (2)

Ilia Frenkel
Ilia Frenkel

Reputation: 1977

This worked for me:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Example</title>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
                var numberschart = 10; //<- Initial value
                google.load('visualization', '1', {packages: ['corechart']});

                function numbers(){
                        var work_field = document.forms['work_form']['work_n_field'].value;
                        var work_div = document.getElementById('number-work');
                        numberschart = work_div.innerHTML = work_field;
                        drawVisualization();
                        return false;
                };

                function drawVisualization() {
                    // Create and populate the data table.
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Task');
                    data.addColumn('number', 'Hours per Day');
                    data.addRows(5);
                    data.setValue(0, 0, 'Work');
                    //data.setValue(0, 1, 11);
                    data.setValue(0, 1, parseInt(numberschart));//<- The value you get from input field is a string, Google API will throw an error
                    data.setValue(1, 0, 'Eat');
                    data.setValue(1, 1, 2);
                    data.setValue(2, 0, 'Commute');
                    data.setValue(2, 1, 2);

                    // Create and draw the visualization.
                    new google.visualization.PieChart(document.getElementById('visualization')).
                        draw(data, {
                            title:"Mortgage Rates",
                            colors: ['#a4b12d', '#818e0a', '#5c6601', '#f0fd79', '#dbe864'],
                            animation:{
                                duration:1000,
                                easing: 'out',
                            },
                            vAxis: {
                                minValue:0, 
                                maxValue:1000
                            },
                        });
                  }    
                google.setOnLoadCallback(drawVisualization);
        </script>
    </head>
    <body>
        <div id="visualization" style="width: 400px; height: 300px;"></div>
        <form name="work_form" onsubmit="return false">
            <label id="n-work-label">Work</label><input name="work_n_field"/>
            <button name="submit" id="submit" value="submit" onclick="numbers();return false;">Submit</button>
        </form>
        <div id="number-work"></div>
    </body>
</html>

Upvotes: 5

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

Try this:

http://jsfiddle.net/schawaska/pkCCa/2/

Note: It's not gonna work on jsfiddler because the key you are using is not set up for their domain. Try on your environment and let me know

Upvotes: 0

Related Questions