How to treat an input data as variable?

Joined
Dec 10, 2022
Messages
9
Reaction score
2
Dear friends,

Could someone help me to fix this code? I want fill up the data manually instead using the fixed data
JavaScript:
<script>

function onClick(elem)
var data = [
      ['1970', a], ['1980', e], ['1990', i] ,
     ['2000', d], ['2010', h], ['2020', m]
  ];
 
  var ax = document.getElementById("a").value;
   var dx = document.getElementById("d").value;
    var ex = document.getElementById("e").value;
     var hx = document.getElementById("h").value;
      var ix = document.getElementById("i").value;
       var mx = document.getElementById("m").value;
    var a = ax.value; //How to treat an input data as variables
         var d = dx.value;
          var e = ex.value;
           var h = hx.value;
            var i = ix.value;
             var m = mx.value;

    
  document.write('<img src="http://chart.apis.google.com/chart?'
               + 'chs=500x400'
               + '&amp;cht=p3'
               + '&amp;chco=33ff00'
               + '&amp;chd=t:');   
  for (var i=0; i < data.length; ++i) {
    document.write(data[i][1]);
    if (i < data.length-1) document.write(",");
  }
 
  document.write('&amp;chxt=x,y');
  document.write('&amp;chxl=0:|');
  for (var i=0; i < data.length; ++i) {
      document.write(data[i][0]);
      if (i < data.length-1) document.write("|");
  }
  document.write('&amp;chxr=1,0,100');
  document.write('">');
 }
 </script>


HTML:
<form id='data'>
      <input type="text" id="a" value="" />
      <input type="text" id="d" value="" />
      <input type="text" id="e" value="" />
      <input type="text" id="h" value="" />
      <input type="text" id="i" value="" />
      <input type="text" id="m" value="" />
      <input type='submit' id='data' onclick="onClick();">
    </form>


Regards
 
Last edited:
Joined
Sep 4, 2022
Messages
129
Reaction score
16
Hello,

more details for the aim are required.
where are the faults, bugs or leaks ?

give us more explanation please.

about JS :

- when you use : "var" , you're creating a var. it -reset- the values in.

- document.getElementById("the_var").value could be use 'as it is'. it's already the value you want.

- creating an element like the 'img' need 'elements' function, you made it by a string construction, it's not safe this way.

read this article :


and this one :

 
Joined
Dec 10, 2022
Messages
9
Reaction score
2
Thank you for your feedback.

I wanted to use random data to build a dynamic chart, keeping the data as is.

I believe that the problem lies in this line.

HTML:
<input type='submit' id='data' onclick="onClick();">
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    #pie{
       width:900px;
       height:500px;
       }
    input{
       text-align:center;
       margin-top:3px;
       margin-bottom:3px;
       }
    [type="button"]{
       cursor:pointer;
       }
    </style>
   <script src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>   
      <form>
      <br />
      <input type="button" value="Update the chart" />
    </form>
    <script>
    let arr = [
          ['Task', 'Hours per Day'],
          ['Work',    11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 1],
          ['Sleep',    6],
          ['Pornhub', 2]
        ];
    
    document
       .querySelector('form')
          .insertAdjacentHTML( 'afterbegin',
             arr
                .filter( x => typeof x[1] == 'number' )
                   .map( n => `<input type="text" placeholder="Value for ${n[0]}" value="" />`)
                      .join('<br />') );
    
    Object.assign(document.querySelector('[type="button"]').style, {
       'minWidth' : document.querySelector('[type="text"]').offsetWidth + 'px'
    });
    
    document.querySelector('[type="button"]').addEventListener( 'click', function(){
       document.querySelectorAll('[type="text"]').forEach( (x, i) => {
          const val = x.value.replace( /[^\d]+/g ,''); /* we need digits only */
          if(val) arr[i + 1][1] = +val
          drawChart()
       } );
    });
    
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
      
      
      function drawChart() {
        const data = google.visualization.arrayToDataTable(arr);

        const options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        const chart = new google.visualization.PieChart(document.getElementById('pie'));
        chart.draw(data, options);
      }
    </script>
    <div id="pie"></div>
  </body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,820
Messages
2,569,723
Members
45,510
Latest member
ThaliaMaxi

Latest Threads

Top