Форум

nub · #1 (**permalink**) 06.12.2013, 19:16

начал делать курсовую работу задача сделать ежедневник с постройкой гистограммы расхода времени.
сделала набросок но не могу понять как заполнить массив из <input type="text> так как они создаются по нажатию на кнопку "+". и подскажите что почитать для построение гистограмм желательно без css. Как заполнить google.visualization.arrayToDataTable значениями из <input type="text" value="" name="job"> и<input type="text" value="" name="taim">

<!DOCTYPE>
<html>
<head>
    <script src="jquery-1.10.2.js"></script>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
#te{
   background-color: #fffacd;
   width: 370px
}
        #graf{
              background-color: #33ff33;

        }
#d{ float:left;width:40%;height:40px;text-align:center;background-color:#FF9999;}
  #test1{
      float:right;
  }
    </style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>

<body>

<div id="d">ЕЖЕДНЕВНИК</div>
<div id="graf">График
<div id="test"></div>
<div id="test1"> <div id="barchart_values" style="width: 900px; height: 300px;"> </div>
</div></div>
    </div>
<div id="te">
    <div id="newt">
    <input type="text" value="" name="taim">
    <input type="text" value="" name="job">
    <input type="button" value="+" id="cop" onclick="addFie()">
       

</div>

    </div>



<script>

      google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
	["Element", "время(ч)", { role: "style" } ],
        ["сон", 5, "#b87333"],
	["завтрак", 0.3, "silver"],
	["уход в институт ", 19.30, "gold"],
	["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
	title: "Распорядок дня",
	width: 600,
	height: 400,
	bar: {groupWidth: "95%"},
        legend: { position: "none" }
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
    function addFie()
                {
                   var a=1;
                   var b=1;
                    a++;
                   b++;


                   var p = document.createElement("div");
                   var k = document.createElement("div");
                    p.innerHTML = "<input name=\"taim_" +a+ "\" type=\"text\" />" + "<input name=\"job_" +b+ "\" type=\"text\" />";

                    document.getElementById("newt").appendChild(p);
                 document.getElementById("newt").appendChild(k);

                }
</script>



</body>
</html>

что впринцепи должно получится гистограмма взята проста для наглядности

nub · #2 (**permalink**) 08.12.2013, 18:08

Rise,
http://learn.javascript.ru/play/16ajVb
taimArray=[];//его нужно заполнить всеми taim_

nub · #3 (**permalink**) 09.12.2013, 14:47

почему обновляются текстовые поля http://learn.javascript.ru/play/MEbTQ

Эллурн · #4 (**permalink**) 10.12.2013, 17:23

Не совсем понятно, что именно делать-то надо.
А ближе к курсовой все же было бы хорошо с jQuery познакомиться. Все бы вышло намного быстрее и легче http://jquery-docs.ru/

nub · #5 (**permalink**) 10.12.2013, 20:57

Эллурн,
нужно построить гистограммы. время заполняется из текстовых полей

Эллурн · #6 (**permalink**) 11.12.2013, 11:18

А что конкретно не получается? Если абсолютно все - то это в раздел работа (или мне в личку). Если пытаетесь разобраться сами - нужно точное указание, что как делаете и где какой косяк)

nub · #7 (**permalink**) 11.12.2013, 17:35

Эллурн,
не могу понять как сделать массив из <input type="text" value="" name="taim">

a_l · #8 (**permalink**) 11.12.2013, 19:18

nub, это на каком языке:

var  taimArray;
      taimArray =taimArray();
    acrinArray=[];
        document.getElementsByName('taim')=taimArray;

Вам нужно добавить событие (на кнопку какую-нибудь или отслеживать изменение текстовых полей), как-нибудь так (событие на клике по диву "ежедневник"):

document.getElementById('d').addEventListener('click', function() {
  Array.prototype.forEach.call(document.getElementsByName('taim'), function(item, i, arr) {
    alert(item.value);
  });
});

nub · #9 (**permalink**) 11.12.2013, 19:33

Сообщение от a_l

nub, это на каком языке:

var  taimArray;
      taimArray =taimArray();
    acrinArray=[];
        document.getElementsByName('taim')=taimArray;

это остатки попыток

Faab · #10 (**permalink**) 11.12.2013, 22:30

<!DOCTYPE>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    body {
      height: 500px;
    }
    #grafic{
      background-color: #33ff33;
    }
    #grafic-d{
      height:40px;
      text-align:center;
      background-color:#FF9999;
      width: 100%;
    }
    .b-container {
      width: 100%;
    }
    .b-container--container-item {
      float:  left;
    }
    .b-dairly {
      display: inline-block;
      width: 700px;
    }
    .b-grafic {
      display: inline-block;
      width: 100%;
    }
    .eRow{
      padding: 0;
      margin: 0;
      border: 1px gray solid;
    }
    .eColomn {
      display: inline-block;
      width: 17%;
      height: 25px;
      padding: 5px;
      text-align: center;
    }
    .clearfix:after {
    	content: ".";
    	display: block;
    	clear: both;
    	visibility: hidden;
    	line-height: 0;
    	height: 0;
    }     
    .clearfix {
    	display: inline-block;
    }    
    html[xmlns] .clearfix {
    	display: block;
    }    
    * html .clearfix {
    	height: 1%;
    }
  </style>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>

<body>
<div class="b-container">
  <div class="clearfix">
  
    <div class="b-container--container-item">
      <div class="b-dairly">
        <div id="grafic-d">ЕЖЕДНЕВНИК</div>
        <div class="eDivTable"></div>
        <div>
          <input type="button" class="eButtonAdd" value="Add new notice" />
        </div>
      </div>  
    </div>
    
    <div class="b-container--container-item">
      <div class="b-grafic">
        <div id="grafic">График</div>
        <div id="test1">
          <div id="barchart_values" style="width: 500px; height: 300px;"></div>
        </div>
      </div>
    </div>
    
  </div>
</div>



<script>

  function fReturnInitArray(){
    return [
      ["Element", "время(ч)", { role: "style" } ],
      ["сон", 5, "#b87333"],
      ["завтрак", 0.3, "silver"],
      ["уход в институт ", 19.30, "gold"],
      ["Platinum", 21.45, "color: #e5e4e2"]
    ];
  };
  
  function fBuildArray(eDivTable){
    var aArray = new Array();
    aArray.push(fReturnInitArray()[0]);
    var eRowSum = eDivTable.querySelectorAll('.eRow');
    //console.log('eRowSum.length = ' + eRowSum.length);
    for(k=0;k<eRowSum.length;k++){
      var eColomnSum = eRowSum[k].querySelectorAll('.eColomn');
      //console.log(k + ' eColomnSum.length = ' + eColomnSum.length);
      var aColomnArray =  new Array();
      for(l=0;l<eColomnSum.length;l++){
        if(k>0 && l<3){
          //console.log('value = ' + eColomnSum[l].innerHTML + '; k = ' + k + '; l = ' + l + ';');
          if(l == 1){
            aColomnArray.push(parseInt(eColomnSum[l].innerHTML));
          }else{
            aColomnArray.push(eColomnSum[l].innerHTML);
          };
        };
      };
      if(k>0){
        aArray.push(aColomnArray);
      };
    };
    //console.log('aArray = ' + aArray);
    return aArray;
  };

  google.load("visualization", "1", {packages:["corechart"]});
  // google.setOnLoadCallback(drawChart(fReturnInitArray()));
  function drawChart(aChartData){
    var data = google.visualization.arrayToDataTable(aChartData);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

    var options = {
      title: "Распорядок дня",
      width: 600,
      height: 400,
      bar: {groupWidth: "95%"},
      legend: { position: "none" }
    };
    
    var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
    chart.draw(view, options);
  };
  
  window.onload = function(){
    var eDivTable = document.querySelectorAll('.eDivTable')[0];
    var aChartInitData = fReturnInitArray();
    for(i=0;i<aChartInitData.length;i++){
      //console.log('aChartInitData[i] = ' + aChartInitData[i]);
      var eDivRow = document.createElement('div');
      eDivRow.classList.add('eRow');
      eDivTable.appendChild(eDivRow);
      
      for(j=0;j<aChartInitData[i].length;j++){
        //console.log('aChartInitData[i][j] = ' + aChartInitData[i][j]);
        var eDivColomn = document.createElement('div');
        var sTextNode = document.createTextNode(aChartInitData[i][j]);
        eDivColomn.classList.add('eColomn');
        eDivRow.appendChild(eDivColomn);
        eDivColomn.appendChild(sTextNode);
      };
      if(i>0){
        eDivColomn = document.createElement('div');
        eDivColomn.classList.add('eColomn');
        var eButtonEdit = document.createElement('input');
        eButtonEdit.type = 'button';
        eButtonEdit.value = 'edit';
        eButtonEdit.classList.add('eButtonEdit');
        eDivRow.appendChild(eDivColomn);
        eDivColomn.appendChild(eButtonEdit);
        
        eDivColomn = document.createElement('div');
        eDivColomn.classList.add('eColomn');
        var eButtonDelete = document.createElement('input');  
        eButtonDelete.type = 'button';
        eButtonDelete.value = 'delete';
        eButtonDelete.classList.add('eButtonDelete');
        eDivRow.appendChild(eDivColomn);
        eDivColomn.appendChild(eButtonDelete);  
      };  
        
    };
    
    var aConstructedArray = fBuildArray(eDivTable);
    drawChart(aConstructedArray);
    
    $('.eButtonAdd').click(function(){
      $(this).css('display', 'none');
      var eDivTable = document.querySelectorAll('.eDivTable')[0];
      eButtonEditSum = eDivTable.querySelectorAll('.eButtonEdit');
      for(m=0; m<eButtonEditSum.length; m++){
        eButtonEditSum[m].style.display = 'none';
      };
      eButtonDeleteSum = eDivTable.querySelectorAll('.eButtonDelete');
      for(m=0;m<eButtonDeleteSum.length;m++){
        eButtonDeleteSum[m].style.display = 'none';
      };
      var eDivRow = document.createElement('div');
      eDivRow.classList.add('eRow');
      eDivTable.appendChild(eDivRow);
      var eDivColomn01 = document.createElement('div');
      var eInputText01 = document.createElement('input');
      eInputText01.type = 'text';
      var eDivColomn02 = document.createElement('div');
      var eInputText02 = document.createElement('input');
      eInputText02.type = 'text';
      var eDivColomn03 = document.createElement('div');
      var eInputText03 = document.createElement('input');
      eInputText01.type = 'text';
      var eDivColomn04 = document.createElement('div');
      var eInputButtonAdd = document.createElement('input');
      eInputButtonAdd.type = 'button';
      eInputButtonAdd.value = 'Confirm';
      eInputButtonAdd.classList.add('eButtonConfirm');
      var eDivColomn05 = document.createElement('div');
      var eInputButtonCancel = document.createElement('input');
      eInputButtonCancel.type = 'button';
      eInputButtonCancel.value = 'Cancel';
      eInputButtonCancel.classList.add('eButtonCancel');
      eDivColomn01.classList.add('eColomn');
      eDivColomn02.classList.add('eColomn');
      eDivColomn03.classList.add('eColomn');
      eDivColomn04.classList.add('eColomn');
      eDivColomn05.classList.add('eColomn');
      eDivRow.appendChild(eDivColomn01);
      eDivRow.appendChild(eDivColomn02);
      eDivRow.appendChild(eDivColomn03);
      eDivRow.appendChild(eDivColomn04);
      eDivRow.appendChild(eDivColomn05);
      eDivColomn01.appendChild(eInputText01);
      eDivColomn02.appendChild(eInputText02);
      eDivColomn03.appendChild(eInputText03);
      eDivColomn04.appendChild(eInputButtonAdd);
      eDivColomn05.appendChild(eInputButtonCancel);
      
      $('.eButtonConfirm').click(function(){
        alert('А тут вообще замена input на его значение ммм..');
      });
      
      $('.eButtonCancel').click(function(){
        var eDivTable = document.querySelectorAll('.eDivTable')[0];
        eButtonEditSum = eDivTable.querySelectorAll('.eButtonEdit');
        for(m=0; m<eButtonEditSum.length; m++){
          eButtonEditSum[m].style.display = 'block';
        };
        eButtonDeleteSum = eDivTable.querySelectorAll('.eButtonDelete');
        for(m=0;m<eButtonDeleteSum.length;m++){
          eButtonDeleteSum[m].style.display = 'block';
        };
        var eButtonAdd = document.querySelectorAll('.eButtonAdd')[0];
        eButtonAdd.style.display = 'block';
        eDivRow.remove();
      });
    });
    
    $('.eButtonEdit').click(function(){
      alert('Самое интересное оставил тебе');
    });
    
    $('.eButtonDelete').click(function(){
      alert('Это тоже интересное');
    }); 
  };
  
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript