与前一周谷歌可视化API的时间序列数据进行比较，(comparing with timeseries

我想比较前一周的数据当前数据。不幸的是，我无法得到正确的参数传递给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});

}

图将要：

电流图：

帮助深表感谢。

提前致谢。

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

为了保持对齐，并显示在x轴当前一周的日期，

构建自定义ticks使用对象符号，
每个标签将具有属性值（ 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
}

注意：根据所使用的图案- > pattern: 'MM/dd/yyyy hh:mm:ss'
你可能会出现重复的ticks ，
可能需要加入到之前测试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: 'category'

本文将结合提示每个间隔，这样就可以看到这两个值

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

看到下面的工作片段...

 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>