Googleのグラフに7日間のデータしか表示しない

私はGoogleのグラフを持っています。私は7日間のデータをグラフに表示したい、そして過去の7日間のデータを見ることができるはずです。例えばGoogleのグラフに7日間のデータしか表示しない

私は2017年8月7日15/7/2017にが表示されるはずですgrpah 2017年1月7日Intialy

15/7/2017へのデータを持っている場合。しかし、ユーザーが望む場合、前の1/7/2017から8/7/2017の結果に戻ることができます。

は今、私は基本的に私は、グラフを壊したく七日に期間ががGoogleと、それは可能です

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

良く思われない、すべての14日間のデータを示していますチャート。または任意の他の提案は

出典

2017-07-11 beginner

これは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]);

...

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

がFO参照

は次にチャートに示される日付の範囲を制限するためにgetFilteredRows方法を使用しますllowing作業スニペット...

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

使用オプション - >hAxis.ticks - x軸に表示される日付これを確実にする

ticksを動的に構築するには、データテーブル/ビューメソッドを使用します。 - >min & max

のプロパティの作業スニペット、以下を参照してオブジェクトを返しますgetColumnRange、
...

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>

出典

2017-07-11 14:43:04 WhiteHat

ああ、これは間違いなく、感謝を:)のに役立ちます。 maxvalueとminvalueを変更して特定のデータをユーザーに表示する機能をいくつか作成できます。ユーザーが前のボタンをクリックした場合、minValue：new Date（2017,7,1）、 maxValue：new Date（2017,7,8）。 BtwはminValue：new Date（2017,6,8）、 maxValue：new Date（2017,6,15）を書きました。私は6の代わりに7でなければならないと思いますか？ – beginner

月はJavaScriptベースで0です（0 = 1月、1 = 2月、6 = 7月） – WhiteHat

ああ、ありがとうございます。申し訳ありません、今すぐ入手してください。私はあなたのコードを私のウェブサイトで試してみるつもりです。ありがとうございます:) – beginner

Googleのグラフに7日間のデータしか表示しない

答えて

関連する問題