2

have a look at this JsFiddle.

I am trying to import a value from a form field, assign it to a variable and then pass it to google.visualization.arrayToDataTable.

But in both cases, even forcing the type: 'number' assignment as in this answer I always get some kind of error:

Case 1:

<form name="myForm">
<input type="number" name="tot_btc" id="tot_btc" value="250">
var points  = document.forms.myForm.tot_btc.value;

var data = google.visualization.arrayToDataTable([
          ['Name', {label: 'Donuts eaten', type: 'number'}],
        //['Name', 'Donuts eaten'],
          ['Michael' , points],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

I get this kind of error:

enter image description here

as you can see the value is acknowledged but the chart is not drawn: it's blank.


Case 2:

<form name="myForm">
<input type="number" name="tot_btc" id="tot_btc" value="250">
        var data = google.visualization.arrayToDataTable([
        //['Name', {label: 'Donuts eaten', type: 'number'}],
          ['Name', 'Donuts eaten'],
          ['Michael' , points],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

I remove the type: 'number' assignment and the number is not even recognised as such.

enter image description here


Case 3:

Now, have a look at this:

BUT if I take the number from the variable and perform any simple math operation, voila! The number is recognized AND the chart is drawn .. even without forcing the type: 'number' recognition:

enter image description here

Can someone explain this?

Thanks

1 Answer 1

1

although you have set the <input> as type number,
the value property will always return a string, here...

    var points  = document.forms.myForm.tot_btc.value;

from MDN - HTMLInputElement - Properties, you can see the property type = string...

value string: Returns / Sets the current value of the control.


it must be converted to an actual number,
before providing the value to arrayToDataTable

which is why performing math on the variable causes it to work.

to correct, parse the value to a number,
using either parseInt or parseFloat...

    var points  = parseFloat(document.forms.myForm.tot_btc.value);

see following working snippet...

      google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));

        // We omit "var" so that programmaticSlider is visible to changeRange.
        var programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten',
            'ui': {'labelStacking': 'vertical'}
          }
        });
//        var points  = document.forms["myForm"]["points"].value;
        var points  = parseFloat(document.forms.myForm.tot_btc.value);
        var cazzo = 81;

        var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value'
          }
        });

        var data = google.visualization.arrayToDataTable([
       // ['Name', {label: 'Donuts eaten', type: 'number'}],
          ['Name', 'Donuts eaten'],
          ['Michael' , points],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);

        changeRange = function() {
          programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
          programmaticSlider.draw();
        };

        changeOptions = function() {
          programmaticChart.setOption('is3D', true);
          programmaticChart.draw();
        };
      }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
  <table class="columns">
    <tr>
      <td>
       <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
       <form name="myForm">
       <input type="number" name="tot_btc" id="tot_btc" value="2">
       <input type="range" onmousedown="return showInput()" onmouseup="return showInput()" name="points" min="0" max="10">
       </form>
        <div>
          <button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
            Select range [2, 5]
          </button><br />
          <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
            Make the pie chart 3D
          </button>
        </div>
        <script type="text/javascript">
          function changeRange() {
            programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
            programmaticSlider.draw();
          }

          function changeOptions() {
            programmaticChart.setOption('is3D', true);
            programmaticChart.draw();
          }
        </script>
      </td>
      <td>
        <div id="programmatic_chart_div"></div>
      </td>
    </tr>
  </table>
</div>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.