在Google图表上只显示七天的数据 [英] Show only seven days of data on google chart
本文介绍了在Google图表上只显示七天的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个谷歌图表，我只想向图表中的用户显示七天的数据，而且他们应该能够看到以前的七天数据。
例如，如果我有2017年7月1日至2017年7月15日的数据
我们只会在2017年7月8日到2017年7月15日之间显示。但如果用户想要，他们可以回到之前的2017年1月7日至2017年7月8日的结果。
现在我显示所有14天的数据看起来并不好
<！DOCTYPE html>< html> < HEAD> < meta http-equiv =content-typecontent =text / html; charset = utf-8/> <标题> Google Visualization API示例< / title> < /脚本> < script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script> < script type =text / javascript> //加载google chartsgoogle.charts.load（'current'，{'packages'：['corechart'，'line']}）; google.charts.setOnLoadCallback（seven_day_compare ）; //绘制图表并设置图表valuesfunction seven_day_compare（）{var data = google.visualization.arrayToDataTable（[[Date，likes，share]，[2017-07-01，30 ，20]，[ 2017年7月2日，20,20]，[ 2017年7月3日，16,10]，[ 2017年7月4日，10,15]，[2017- 7月5\" 日，31,66]，[ 2017年7月6日，20,15]，[ 2017年7月7日，2,5]，[ 2017年7月8日，8,6 ]，[ 2017年7月9日，30,20]，[ 2017年7月10日，20,20]，[ 2017年7月11日，16,10]，[2017-07- 12\" ，10,15]，[ 2017年7月13日，31,66]，[ 2017年7月14日，20,15]，[ 2017年7月15日，2,5]， [2017-07-16，8,6]]）; // 可选的;添加标题并设置图表的宽度和高度var options = {'title'：'比较像和分享'，'宽度'：550，'height'：400，'pointSize'：10，'hAxis'：{ 'slantedText'：true，'slantedTextAngle'：30}，'vAxis'：{}}; //在< div>内显示图表id =differnt的元素var chart = new google.visualization.LineChart（document.getElementById（'chart'））; chart.draw（data，options）;}< / script> < /头> < body style =font-family：Arial; border：0 none;> < div id =chart>< / div> < / body>< / html>
想要将图表分成七天时间段
谷歌图表是否可能。或任何其他建议
解决方案
b 这可以用计算列完成...
pre $ code将第一列转换为日期
view.setColumns（[{
calc：function（dt，row）{
return new Date（dt.getValue（row，0））;
}，
label ：data.getColumnLabel（0），
type：'date'
}，1，2]）;
然后使用 getFilteredRows 方法限制日期范围...
//筛选日期范围
view.setRows（view.getFilteredRows（ （2017，6，8），
最大值：新日期
请参阅以下工作片段...
google.charts.load（'current'，{callback：function（）{var data = google.visualization.arrayToDataTable（[[日， 喜欢， 共享]，[ 2017年7月1日，30,20]，[ 2017年7月2日，20,20]，[ 2017年7月3日，16 ，10]，[ 2017年7月4日，10,15]，[ 2017年7月5日，31,66]，[ 2017年7月6日，20,15]，[2017- 7\" 月7日，2,5]，[ 2017年7月8日，8,6]，[ 2017年7月9日，30,20]，[ 2017年7月10日，20,20 ]，[ 2017年7月11日，16,10]，[ 2017年7月12日，10,15]，[ 2017年7月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） ; //将第一列转换为日期view.setColumns（[{calc：function（dt，row）{return new Date（dt.getValue（row，0））;}，label：data.getColumnLabel（0），type： 'date'}，1，2 ]）; //过滤日期范围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（视图）; }，packages：['corechart']}）;
编辑
使用选项 - > hAxis.ticks - 确保哪些日期出现在x轴上
<动态地使用数据表/视图方法 - >
getColumnRange ，$ b $来构建
ticks b返回的对象的属性为 min & max 请参阅以下工作片段...
google.charts.load（'current'，{callback：function（）{var data = google.visualization.arrayToDataTable（[[日， 喜欢， 共享]，[ 2017年7月1日，30,20]，[ 2017年7月2日，20,20]，[ 2017年7月3日，16 ，10]，[ 2017年7月4日，10,15]，[ 2017年7月5日，31,66]，[ 2017年7月6日，20,15]，[2017- 7\" 月7日，2,5]，[ 2017年7月8日，8,6]，[ 2017年7月9日，30,20]，[ 2017年7月10日，20,20 ]，[ 2017年7月11日，16,10]，[ 2017年7月12日，10,15]，[ 2017年7月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） ; //将第一列转换为日期view.setColumns（[{calc：function（dt，row）{return new Date（dt.getValue（row，0））;}，label：data.getColumnLabel（0），type： 'date'}，1 ，2]]; //过滤日期范围view.setRows（view.getFilteredRows（[{column：0，minValue：new Date（2017，6，8），maxValue：new Date（2017，6，15）}]）） ）; //为每一天创建标记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））;如果（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']}）;
I have a google chart i want to show only seven days data to users on the graph, And they should be able to see the previous seven day data.
For example if i have data of 1/7/2017 to 15/7/2017
Intialy grpah should show only 8/7/2017 to 15/7/2017. But if users want they can go back to previous 1/7/2017 to 8/7/2017 results.
Now i am showing all 14 days data which doesn't seem good
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
</script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart','line']});
google.charts.setOnLoadCallback(seven_day_compare);
// Draw the chart and set the chart values
function seven_day_compare() {
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]]
);
// Optional; add a title and set the width and height of the chart
var options = {'title':'Compare like and share', 'width':550, 'height':400,'pointSize': 10,'hAxis':{
'slantedText': true,
'slantedTextAngle':30},'vAxis':{}};
// Display the chart inside the <div> element with id="differnt"
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id = "chart"></div>
</body>
</html>
So basically i want to break the graph into seven days time periods Is it possible with google charts. Or any other suggestions
解决方案
this is possible using a DataView
first, need to convert the first column to an actual date,
this can be done with a calculated column...
// 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]);
then use the getFilteredRows method to limit the date range shown on the chart...
// filter date range
view.setRows(view.getFilteredRows([{
column: 0,
minValue: new Date(2017, 6, 8),
maxValue: new Date(2017, 6, 15)
}]));
see following working snippet...
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']
});
<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>
EDIT
use option --> hAxis.ticks -- to ensure which dates appear on the x-axis
to build ticks dynamically, use data table / view method --> getColumnRange,
which returns an object with properties for min & max
see following working snippet...
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']
});
<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>
这篇关于在Google图表上只显示七天的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
