Показать сообщение отдельно
  #1 (permalink)  
Старый 06.12.2013, 19:16
nub nub вне форума
Интересующийся
Отправить личное сообщение для nub Посмотреть профиль Найти все сообщения от nub
 
Регистрация: 23.10.2013
Сообщений: 29

помогите советом(можно кодом)
начал делать курсовую работу задача сделать ежедневник с постройкой гистограммы расхода времени.
сделала набросок но не могу понять как заполнить массив из <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>

что впринцепи должно получится гистограмма взята проста для наглядности
Изображения:
Тип файла: jpg 2324.jpg (62.5 Кб, 20 просмотров)

Последний раз редактировалось nub, 11.12.2013 в 17:33. Причина: редактирование кода и обновление просьбы
Ответить с цитированием