Как динамически добавлять данные в Google Timeline chart? - PullRequest
Новая
       8

Как динамически добавлять данные в Google Timeline chart?

1 голос
/ 19 марта 2019

На самом деле я пытаюсь создать систему бронирования ресторанов с помощью временной шкалы Google.

Я просто пробую функцию временной шкалы, и при нажатии я хочу добавить новые данные в таблицу со значениями изform.

Впоследствии данные будут сохранены в базе данных и даже загружены из нее при загрузке страницы, но.

enter image description here

Здеськод JavaScript 

<script type="text/javascript">
    google.charts.load("current", { packages: ["timeline"] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'Tavolo' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
            ['Tavolo 1', new Date(0, 0, 0, 12, 00, 0), new Date(0, 0, 0, 12, 00, 0)],
            ['Tavolo 2', new Date(0, 0, 0, 12, 00, 0), new Date(0, 0, 0, 12, 00, 0)],
            ['Tavolo 3', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
            ['Tavolo 3', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
            ['Tavolo 3', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
            ['Tavolo 4', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
            ['Tavolo 4', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
            ['Tavolo 5', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 13, 30, 0)],
            ['Tavolo 6', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 15, 30, 0)],
            ['Tavolo 7', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
            ['Tavolo 8', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
            ['Tavolo 8', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
            ['Tavolo 9', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)]]);


        var options = {
            timeline: { singleColor: '#ff0000' }
        };

        chart.draw(dataTable, options);
        // Function to remove 0 value bars
        (function () {                                            
            var el = container.getElementsByTagName("rect");     
            var width = 100000000;                            
            var elToRem = [];                                     
            for (var i = 0; i < el.length; i++) {                           
                var cwidth = parseInt(el[i].getAttribute("width"));
                if (cwidth < width) {                          
                    elToRem = [el[i]];
                    width = cwidth;                               
                }
                else if (cwidth == width) {                         
                    elToRem.push(el[i]);
                }
            }
            for (var i = 0; i < elToRem.length; i++) 
                elToRem[i].setAttribute("fill", "none"); 
        })();
    }

    function addPrenotazione() {
        dataTable.addRows(["Tavolo" + $("#tavolo").val(), new Date($("#datainizio").val()), new Date($("#datafine").val())]);
    }
</script>

1 Ответ

1 голос
/ 19 марта 2019

график должен быть перерисован при каждом добавлении новых данных или изменении параметров.

    function addPrenotazione() {
        dataTable.addRows(["Tavolo" + $("#tavolo").val(), new Date($("#datainizio").val()), new Date($("#datafine").val())]);
        chart.draw(dataTable, options);
    }

переместите указанную выше функцию в функцию drawChart,
, что позволит функции получить доступ к переменным dataTable и chart ...

такжеНе рекомендуется использовать встроенные обработчики событий для элементов ... 

onclick="addPrenotazione"

. Вместо этого добавьте событие и в функцию drawChart ... 

document.getElementById('prenota').addEventListener('click', addPrenotazione);  // 'prenota' or whatever the button id is...

, наконец, при измененииэлементы диаграммы, подождите 'ready',
, чтобы убедиться, что диаграмма закончила рисовать ... 

    // Function to remove 0 value bars
    google.visualization.events.addListener(chart, 'ready', function () {
        var el = container.getElementsByTagName("rect");
        var width = 100000000;
        var elToRem = [];
        for (var i = 0; i < el.length; i++) {
            var cwidth = parseInt(el[i].getAttribute("width"));
            if (cwidth < width) {
                elToRem = [el[i]];
                width = cwidth;
            }
            else if (cwidth == width) {
                elToRem.push(el[i]);
            }
        }
        for (var i = 0; i < elToRem.length; i++)
            elToRem[i].setAttribute("fill", "none");
    });

рекомендуем выполнить настройку, аналогичную следующей ... 

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Tavolo' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    ['Tavolo 1', new Date(0, 0, 0, 12, 00, 0), new Date(0, 0, 0, 12, 00, 0)],
    ['Tavolo 2', new Date(0, 0, 0, 12, 00, 0), new Date(0, 0, 0, 12, 00, 0)],
    ['Tavolo 3', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
    ['Tavolo 3', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
    ['Tavolo 3', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
    ['Tavolo 4', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
    ['Tavolo 4', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
    ['Tavolo 5', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 13, 30, 0)],
    ['Tavolo 6', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 15, 30, 0)],
    ['Tavolo 7', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
    ['Tavolo 8', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
    ['Tavolo 8', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
    ['Tavolo 9', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)]
  ]);

  var options = {
    timeline: { singleColor: '#ff0000' }
  };

  chart.draw(dataTable, options);

  // Function to remove 0 value bars
  google.visualization.events.addListener(chart, 'ready', function () {
    var el = container.getElementsByTagName("rect");
    var width = 100000000;
    var elToRem = [];
    for (var i = 0; i < el.length; i++) {
      var cwidth = parseInt(el[i].getAttribute("width"));
      if (cwidth < width) {
        elToRem = [el[i]];
        width = cwidth;
      }
      else if (cwidth == width) {
        elToRem.push(el[i]);
      }
    }
    for (var i = 0; i < elToRem.length; i++)
      elToRem[i].setAttribute("fill", "none");
  });

  document.getElementById('prenota').addEventListener('click', addPrenotazione);

  function addPrenotazione() {
    dataTable.addRows(["Tavolo" + $("#tavolo").val(), new Date($("#datainizio").val()), new Date($("#datafine").val())]);
    chart.draw(dataTable, options);
  }
});

вамВам нужно, чтобы даты соответствовали формату исходных данных,
с нулем, использованным для года.

function addPrenotazione() {
  var dateBeg = new Date($("#datainizio").val());
  var dateEnd = new Date($("#datafine").val());
  dataTable.addRow(["Tavolo" + $("#tavolo").val(), new Date(0, 0, 0, dateBeg.getHours(), dateBeg.getMinutes(), dateBeg.getSeconds()), new Date(0, 0, 0, dateEnd.getHours(), dateEnd.getMinutes(), dateEnd.getSeconds())]);
  chart.draw(dataTable, options);
}
...