Question

我有一个谷歌图表我想在图表上向用户显示仅七天的数据，他们应该能够看到之前的七天数据。

例如，如果我有1/7/2017到15/7/2017的数据

Intialy grpah应该只显示2017年8月7日至2017年5月15日。但如果用户希望他们可以回到之前的2017年1月7日至8月7日的结果。

现在我显示的所有14天数据看起来不太好

declare @SampleData table
(
    Category bigint,
    [Group] char(1),
    Gender varchar(16)
);
insert @SampleData values
    (1, 'A', 'Female'), -- include
    (2, 'B', 'Female'), -- exclude; wrong group
    (3, 'A', 'Female'), -- exclude; right group and gender but superseded by (3, 'A', 'All')
    (3, 'A', 'All'),    -- include
    (4, 'A', 'All'),    -- include
    (5, 'A', 'Male');   -- exclude; wrong gender

with PrioritizedData as
(
    select
        D.*,
        [Priority] = row_number() over (partition by D.Category order by case D.Gender when 'All' then 0 else 1 end)
    from
        @SampleData D
    where
        D.[Group] = 'A' and
        D.Gender in ('Female', 'All')
)
select * from PrioritizedData P where P.[Priority] = 1;

所以基本上我想把图表分成7天的时间段是否可以使用谷歌图表。或任何其他建议

Answer 1

可以使用DataView

首先，需要将第一列转换为实际日期，
这可以通过计算列来完成......

// convert first column to date
view.setColumns([{
  calc: function (dt, row) {
    return new Date(dt.getValue(row, 0));
  },
  label: data.getColumnLabel(0),
  type: 'date'
}, 1, 2]);

然后使用getFilteredRows方法限制图表上显示的日期范围...

// filter date range
view.setRows(view.getFilteredRows([{
  column: 0,
  minValue: new Date(2017, 6, 8),
  maxValue: new Date(2017, 6, 15)
}]));

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([["Date","likes","share"],["2017-07-01",30,20],["2017-07-02",20,20],["2017-07-03",16,10],["2017-07-4",10,15],["2017-07-5",31,66],["2017-07-6",20,15],["2017-07-7",2,5],["2017-07-8",8,6],["2017-07-09",30,20],["2017-07-10",20,20],["2017-07-11",16,10],["2017-07-12",10,15],["2017-07-13",31,66],["2017-07-14",20,15],["2017-07-15",2,5],["2017-07-16",8,6]]);

    var view = new google.visualization.DataView(data);

    // convert first column to date
    view.setColumns([{
      calc: function (dt, row) {
        return new Date(dt.getValue(row, 0));
      },
      label: data.getColumnLabel(0),
      type: 'date'
    }, 1, 2]);

    // filter date range
    view.setRows(view.getFilteredRows([{
      column: 0,
      minValue: new Date(2017, 6, 8),
      maxValue: new Date(2017, 6, 15)
    }]));

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(view);
  },
  packages:['corechart']
});

＆＃13;

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

＆＃13;

编辑

使用选项 - ＆gt; hAxis.ticks - 确保哪些日期出现在x轴上

动态构建ticks，使用数据表/视图方法 - ＆gt; getColumnRange，
返回一个具有min＆amp;属性的对象max

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([["Date","likes","share"],["2017-07-01",30,20],["2017-07-02",20,20],["2017-07-03",16,10],["2017-07-4",10,15],["2017-07-5",31,66],["2017-07-6",20,15],["2017-07-7",2,5],["2017-07-8",8,6],["2017-07-09",30,20],["2017-07-10",20,20],["2017-07-11",16,10],["2017-07-12",10,15],["2017-07-13",31,66],["2017-07-14",20,15],["2017-07-15",2,5],["2017-07-16",8,6]]);

    var view = new google.visualization.DataView(data);

    // convert first column to date
    view.setColumns([{
      calc: function (dt, row) {
        return new Date(dt.getValue(row, 0));
      },
      label: data.getColumnLabel(0),
      type: 'date'
    }, 1, 2]);

    // filter date range
    view.setRows(view.getFilteredRows([{
      column: 0,
      minValue: new Date(2017, 6, 8),
      maxValue: new Date(2017, 6, 15)
    }]));

    // build tick for each day
    var oneDay = (1000 * 60 * 60 * 24);
    var dateRange = view.getColumnRange(0);
    var ticksAxisH = [];
    for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
      ticksAxisH.push(new Date(i));
    }
    // optional, add final tick at far right
    if (ticksAxisH.length > 0) {
      ticksAxisH.push(new Date(ticksAxisH[ticksAxisH.length - 1].getTime() + oneDay));
    }

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(view, {
      hAxis: {
        ticks: ticksAxisH
      }
    });
  },
  packages:['corechart']
});

＆＃13;

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

＆＃13;

在谷歌图表上仅显示七天的数据

1 个答案: