使谷歌图表与大量数据一起工作

时间:2016-09-08 09:27:52

标签: javascript charts google-visualization

我做了什么 我已将谷歌图表添加到我的页面。根据用户选择的日期和持续时间填充数据。 (持续时间可以是任何小时数。)

我需要做什么 我需要确保图表可以容纳所选的持续时间。通过间隔gant数据并使图表可移动。

问题

是否我无法获得图表来容纳大量数据而不会限制数据。我需要间隔开的数据,从而根据搜索到的数据量使图表可移动(响应)。

守则

function drawChart() {
  var data = [];
  var header = ['Activity', 'Start Time', 'End Time'];
  data.push(header);

  for(var i =0; i < $scope.timelineArr.length;i++){
    var year = $scope.timelineArr[i].thumbnail_date.substring(0,4);
    var month = $scope.timelineArr[i].thumbnail_date.substring(5,7) -1;
    var day = $scope.timelineArr[i].thumbnail_date.substring(8,10);
    var hour = $scope.timelineArr[i].thumbnail_time.substring(0,2);
    var min = $scope.timelineArr[i].thumbnail_time.substring(3, 5);
    console.log(year+ " "+month+ " "+day);
    var tmp = [];
    tmp.push(""+$scope.timelineArr[i].cam_name, new Date(year, month, day, hour, min), new Date(year, month, day, hour, min));
    data.push(tmp);
  }

  $scope.data = google.visualization.arrayToDataTable(data);
  var options = {
    'legend':'left',
    'title':'Camera Events',
    'is3D':true,
    tooltip: {
      isHtml: true
    },
    'width':1000,
    'height':400
  }

  $scope.chart = new google.visualization.Timeline(document.getElementById('chart_div'));

  $scope.chart.draw($scope.data, options);

//////////

google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

我还包括了它现在的样子。你可以看到数据很狭窄,想象一下,如果我选择更多时间。谢谢。The results I get thus far

有没有办法让时间轴变成ZOOMABLE?

0 个答案:

没有答案