javascript - 与上周谷歌可视化API的时间序列数据进行比较

Question

我想将当前数据与上周数据进行比较。不幸的是，我无法将正确的参数传递给 google.visualization.data.join(data1,data2,'full',[[0,0]],[1],[1]) 函数。

下面是代码:

     $.getJSON('https://api.myjson.com/bins/16r3qn').done(function (jsonData) {
                    var data1 = new google.visualization.DataTable();
            var data2 = new google.visualization.DataTable();
            data1.addColumn('timeofday','X');
            data1.addColumn('number','current');
            data2.addColumn('timeofday','X');
            data2.addColumn('number','previous');
            var hour; var min; var sec;var day;
            var monthNames = ["January", "February", "March", "April", "May", "June",
                              "July", "August", "September", "October", "November", "December"
                            ];

            var curtime = 0; var curcount = 0; var precount = 0;var pretime = 0;
             $.each(json.current.timeSeries, function(i,item){
                 curtime =  json.current.timeSeries[i].beginTimeSeconds;
                 curcount = json.current.timeSeries[i].inspectedCount;
                 date = new Date(curtime*1000);
                 hour = date.getHours(); min = date.getMinutes(); sec = date.getSeconds();
                 day = date.getDay()+' '+monthNames[date.getMonth()];
                 data1.addRows([[[hour,min,sec],curcount]]);
            });

            $.each(json.previous.timeSeries, function(i,item){
                 pretime = json.previous.timeSeries[i].beginTimeSeconds;
                 precount = json.previous.timeSeries[i].inspectedCount;
                 date = new Date(pretime*1000);
                 hour = date.getHours(); min = date.getMinutes(); sec = date.getSeconds();
                 day = date.getDay()+' '+monthNames[date.getMonth()];
                 data2.addRows([[[hour,min,sec],precount]]);
            });

            var joinedData = google.visualization.data.join(data1,data2,'full',[[0,0]],[1],[1]);


// ...etc. Rest of your code comes here, or is called from here.
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(joinedData, {width: 1400, height: 360});

}

future 图表:

当前图表:

非常感谢您的帮助。

提前致谢。

Answer 1

使用'timeofday'允许值对齐到相同的x轴范围

为了保持对齐并在 x 轴上显示本周的日期，

使用对象表示法构建自定义刻度，
每个标签都有一个值属性 (v:) 和格式化值 (f:)

在这种情况下，该值需要为 --> 'timeofday'
和格式化值 --> 'string'

样本刻度...

{
  v: new Date(curtime*1000),  // whatever you're using for 'timeofday'
  f: '04/03/2017'             // whatever you want to display on the x-axis
}

您可以在当前$.each代码段中构建，无需为上一个添加任何内容...

var xTicks = [];
var formatDate = new google.visualization.DateFormat({
    pattern: 'MM/dd/yyyy hh:mm:ss'
});

$.each(jsonData.current.timeSeries, function(i,item){
    curtime =  jsonData.current.timeSeries[i].beginTimeSeconds;
    curcount = jsonData.current.timeSeries[i].inspectedCount;

    var xValue = {
        v: new Date(curtime*1000),
        f: formatDate.formatValue(new Date(curtime*1000))
    }
    xTicks.push(xValue);
    data1.addRows([[xValue,curcount]]);
});

也使用 x 值的对象表示法，
将允许日期出现在工具提示上

添加到选项...

hAxis: {
  ticks: xTicks
}

注意:取决于所使用的模式 --> 模式:'MM/dd/yyyy hh:mm:ss'
您最终可能会得到重复的刻度线，
在添加到 ticks 数组之前可能需要测试

<小时/>

编辑 - 请参阅以下代码片段...

 $.getJSON('https://api.myjson.com/bins/16r3qn').done(function (jsonData) {
        var data1 = new google.visualization.DataTable();
        var data2 = new google.visualization.DataTable();
        data1.addColumn('timeofday','X');
        data1.addColumn('number','current');
        data2.addColumn('timeofday','X');
        data2.addColumn('number','previous');
        var hour; var min; var sec;var day;
        var monthNames = ["January", "February", "March", "April", "May", "June",
          "July", "August", "September", "October", "November", "December"
        ];

        // init ticks
        var xTicks = [];

        var curtime = 0; var curcount = 0; var precount = 0;var pretime = 0;
         $.each(json.current.timeSeries, function(i,item){
             curtime =  json.current.timeSeries[i].beginTimeSeconds;
             curcount = json.current.timeSeries[i].inspectedCount;
             date = new Date(curtime*1000);
             hour = date.getHours(); min = date.getMinutes(); sec = date.getSeconds();
             day = date.getDay()+' '+monthNames[date.getMonth()];

             // add tick
             xTicks.push({
               v: [hour,min,sec],
               f: day
             });

             data1.addRows([[[hour,min,sec],curcount]]);
        });

        $.each(json.previous.timeSeries, function(i,item){
             pretime = json.previous.timeSeries[i].beginTimeSeconds;
             precount = json.previous.timeSeries[i].inspectedCount;
             date = new Date(pretime*1000);
             hour = date.getHours(); min = date.getMinutes(); sec = date.getSeconds();
             day = date.getDay()+' '+monthNames[date.getMonth()];
             data2.addRows([[[hour,min,sec],precount]]);
        });

        var joinedData = google.visualization.data.join(data1,data2,'full',[[0,0]],[1],[1]);


  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  chart.draw(joinedData, {
    width: 1400,
    height: 360,

    // add ticks to chart
    hAxis: {
      ticks: xTicks
    }
  });

}

上面添加的代码...

        // init ticks
        var xTicks = [];

             // add tick
             xTicks.push({
               v: [hour,min,sec],
               f: day
             });

  chart.draw(joinedData, {
    width: 1400,
    height: 360,

    // add ticks to chart
    hAxis: {
      ticks: xTicks
    }
  });

<小时/>

编辑2

用于将本周与上周进行比较，
建议使用以下选项...

focusTarget:'类别'

这将合并每个间隔的工具提示，以便您可以看到两个值

您还可以使用数据 View 中的计算列添加方差列
然后从图表中隐藏该系列，
但仍然允许它出现在工具提示中

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).resize(drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  $.getJSON('https://api.myjson.com/bins/eh5zf').done(function (json) {
    var data1 = new google.visualization.DataTable();
    var data2 = new google.visualization.DataTable();
    data1.addColumn('timeofday','X');
    data1.addColumn('number','current');
    data2.addColumn('timeofday','X');
    data2.addColumn('number','previous');
    var hour; var min; var sec;var day;
    var monthNames = ["January", "February", "March", "April", "May", "June",
      "July", "August", "September", "October", "November", "December"
    ];

    // init ticks
    var xTicks = [];

    var curtime = 0; var curcount = 0; var precount = 0;var pretime = 0;
     $.each(json.current.timeSeries, function(i,item){
         curtime =  json.current.timeSeries[i].beginTimeSeconds;
         curcount = json.current.timeSeries[i].inspectedCount;
         date = new Date(curtime*1000);
         hour = date.getHours(); min = date.getMinutes(); sec = date.getSeconds();
         day = date.getDay()+' '+monthNames[date.getMonth()];

         // add tick
         xTicks.push({
           v: [hour,min,sec]
         });

         data1.addRows([[[hour,min,sec],curcount]]);
    });

    $.each(json.previous.timeSeries, function(i,item){
         pretime = json.previous.timeSeries[i].beginTimeSeconds;
         precount = json.previous.timeSeries[i].inspectedCount;
         date = new Date(pretime*1000);
         hour = date.getHours(); min = date.getMinutes(); sec = date.getSeconds();
         day = date.getDay()+' '+monthNames[date.getMonth()];
         data2.addRows([[[hour,min,sec],precount]]);
    });

    var joinedData = google.visualization.data.join(data1,data2,'full',[[0,0]],[1],[1]);
    var dataView = new google.visualization.DataView(joinedData);
    dataView.setColumns([0, 1, 2, {
      calc: function (dt, row) {
        return dt.getValue(row, 1) - dt.getValue(row, 2)
      },
      type: 'number',
      label: 'variance'
    }]);


    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(dataView, {
      width: 1400,
      height: 360,
      // add ticks to chart
      hAxis: {
        ticks: xTicks
      },
      focusTarget: 'category',
      series: {
        2: {
          color: 'transparent',
          enableInteractivity: false,
          visibleInLegend: false
        }
      },
      vAxis: {
        viewWindow: {
          min: 0
        }
      }
    });
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>