How to add data dynamically do Google Timeline chart?

时间：2019-03-19 15:14:18

标签： javascript charts google-visualization

Actually i'm trying to make a restaurant booking system using Google Timeline Chart.

I was just trying the function of the Timeline and onClick i would to add new data to the Chart with the values from the form.

Subsequently the data will be saved in the database and even load from it on page load but.

enter image description here

Here is javascript code

<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 个答案:

答案 0 :(得分：1)

无论何时添加新数据或更改选项，都必须重新绘制图表。 

    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);
}
相关问题
最新问题