与上周Google可视化API的时间序列数据进行比较 [英] comparing with timeseries data of previous week google visualization api

问题描述

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

I want to compare current data with previous week data. Unfortunately, I couldn't get the right parameters to be passed to google.visualization.data.join(data1,data2,'full',[[0,0]],[1],[1]) function.

下面是代码:

     $.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轴范围对齐

using 'timeofday' allows the values to align to the same x-axis range

为了保持一致并在x轴上显示当前星期的日期，

in order to keep alignment and show the current week's dates on the x-axis,

使用对象符号构建自定义ticks，
每个标签都将具有值(v:)和格式化值(f:)的属性

build custom ticks using object notation,
each label will have a property for the value (v:) and the formatted value (f:)

在这种情况下，该值必须为-> 'timeofday'
和格式化的值-> 'string'

in this case, the value will need to be --> 'timeofday'
and the formatted value --> '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
}

您可以构建 current $.each代码段，而无需为 previous ...

you could build in the current $.each snippet, no need to add any for previous...

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​​值，
将允许日期显示在工具提示

using the object notation for the x value as well,
will allow the date to appear on the tooltip

添加到选项...

hAxis: {
  ticks: xTicks
}

注意:取决于使用的模式-> pattern: 'MM/dd/yyyy hh:mm:ss'
您可能会得到重复的ticks，
在添加到ticks数组

note: depending on the pattern used --> pattern: 'MM/dd/yyyy hh:mm:ss'
you may end up with duplicate ticks,
may need to test before adding to the ticks array

编辑-看到以下代码段...

EDIT -- see following snippet...

 $.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
    }
  });

}

上面添加的代码...

code added above...

        // 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

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

for comparing current week to previous,
recommend using the following option...

focusTarget: 'category'

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

this will combine the tooltips for each interval, so that you can see both values

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

you could also add a column for the variance using a calculated column in a data view
then hide the series from the chart,
but still allow it to appear in the tooltip

请参阅以下工作摘要...

see following working snippet...

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>

这篇关于与上周Google可视化API的时间序列数据进行比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！