複数のGoogleグラフを1つのグラフに表示

Question

私は多くのGoogleグラフを持っています。私は毎週Googleグラフを持っています。

たとえば、 私は2017年5月15日 [[date,'real_likes_this_week_till_now','expected_this_weektotal_likes'],['2017/5/8',0,42],['2017/5/9',3,39],['2017/5/10',10,40],['2017/5/11',16,41],['2017/5/12',20,40],['2017/5/13',31,43],['2017/5/14',35,41],['2017/5/15',43,43]]

に週2017年5月8日のためにグラフを持って次に

[[date,'real_likes_this_week_till_now','expected_this_week_total_likes'],['2017/5/1',0,35]['2017/5/2',3,34],['2017/5/3',7,36],['2017/5/4',10,38]['2017/5/5',16,36],['2017/5/6',31,40]['2017/5/7',35,40]['2017/5/8',40,40]]

2017年5月8日までの週2017年5月1日のデータ

を持っています

私はこの

<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(drawweek1); 
 

 
// Draw the chart and set the chart values 
 

 
function drawweek1() { 
 
    var data = google.visualization.arrayToDataTable(
 
[['date','real_likes_this_week_till_now','expected_this_week_total_likes'],['2017/5/1',0,35],['2017/5/2',3,34],['2017/5/3',7,36],['2017/5/4',10,38],['2017/5/5',16,36],['2017/5/6',31,40],['2017/5/7',35,40],['2017/5/8',40,40]] 
 
); 
 

 
    // Optional; add a title and set the width and height of the chart 
 
    var options = {'title':'week1', 'width':550, 'height':400,'pointSize': 10,'hAxis':{ 
 
     'slantedText': true, 
 
      'slantedTextAngle':30},'vAxis':{}}; 
 

 
    // Display the chart inside the <div> element with id="differnt" 
 
$elem = document.getElementById('chart_week1'); 
 
    if($elem === null){return;} 
 
    var chart = new google.visualization.LineChart(document.getElementById('chart_week1')); 
 
    chart.draw(data, options); 
 
} 
 
google.charts.setOnLoadCallback(drawweek2); 
 

 
// Draw the chart and set the chart values 
 

 
function drawweek2() { 
 
    var data = google.visualization.arrayToDataTable(
 
[['date','real_likes_this_week_till_now','expected_this_week_total_likes'],['2017/5/8',0,42],['2017/5/9',3,39],['2017/5/10',10,40],['2017/5/11',16,41],['2017/5/12',20,40],['2017/5/13',31,43],['2017/5/14',35,41],['2017/5/15',43,43]] 
 
); 
 

 
    // Optional; add a title and set the width and height of the chart 
 
    var options = {'title':'week2', 'width':550, 'height':400,'pointSize': 10,'hAxis':{ 
 
     'slantedText': true, 
 
      'slantedTextAngle':30},'vAxis':{}}; 
 

 
    // Display the chart inside the <div> element with id="differnt" 
 
$elem = document.getElementById('chart_week2'); 
 
    if($elem === null){return;} 
 
    var chart = new google.visualization.LineChart(document.getElementById('chart_week2')); 
 
    chart.draw(data, options); 
 
    
 
} 
 

 

 
</script> 
 

 
<div id="chart_week1"></div> 
 
<div id="chart_week2"></div>

のように1つのページにそれらを別々に表示することができます

私はこのように多くのグラフを持っています。 1つのグラフにそれらを表示する方法はありますか？まだ1週間のデータを表示する必要がありますが、ユーザーは先週または翌週に変更できるはずです

ここでの主な問題は毎週末です1つの日付には2つの値セットがあります。たとえば、2017/5/8には[2017/5/8,40,40]と['2017/5/8'、0,42]があります。他の賢明な私は1つの配列にすべてのデータを組み合わせることができます。ここで説明するDATAVIEWの方法を使用してくださいShow only seven days of data on google chart WhiteHatで。

Answer 1

他の回答に、getFilteredRowsをチャート上に表示される行インデックスを見つけるために使用され...

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

代わりに、手動で行インデックスを指定...

view.setRows([0, 1, 2, 3, 4, 5, 6]); 

...作業スニペット以下を参照してください

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['date','real_likes_this_week_till_now','expected_this_week_total_likes'], 
 
     ['2017/5/2',3,34], 
 
     ['2017/5/3',7,36], 
 
     ['2017/5/4',10,38], 
 
     ['2017/5/5',16,36], 
 
     ['2017/5/6',31,40], 
 
     ['2017/5/7',35,40], 
 
     ['2017/5/8',40,40], 
 
     ['2017/5/8',0,40], // <-- repeat 
 
     ['2017/5/9',3,39], 
 
     ['2017/5/10',10,40], 
 
     ['2017/5/11',16,41], 
 
     ['2017/5/12',20,40], 
 
     ['2017/5/13',31,43], 
 
     ['2017/5/14',35,41], 
 
     ['2017/5/15',41,41] 
 
    ]); 
 

 
    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]); 
 

 
    var current_week = [0, 1, 2, 3, 4, 5, 6]; 
 
    var next_week = [7, 8, 9, 10, 11, 12, 13]; 
 

 
    // filter date range 
 
    view.setRows(current_week); 
 

 
    $('#next_week').on('click', function() { 
 
     view.setRows(next_week); 
 
     drawChart(); 
 
    }); 
 

 
    drawChart(); 
 
    function drawChart() { 
 
     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> 
 
<input type="button" id="next_week" value="next week" /> 
 
<div id="chart"></div>

Answer 2

WhiteHatがすばらしい答えを出しました。しかし、私はこれを行うもう一つの方法を見つけた。 I良く知っているか悪いか誰かホワイトハット@WhiteHat

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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(drawweek1); 
 

 
// Draw the chart and set the chart values 
 

 
function drawweek1() { 
 
var total_weeks = 3; 
 
    
 
var data1 =google.visualization.arrayToDataTable([['date','real_likes_this_week_till_now','expected_this_week_total_likes'],['2017/5/15',0,33],['2017/5/16',3,40],['2017/5/17',10,47],['2017/5/18',16,42],['2017/5/19',20,41],['2017/5/21',31,43],['2017/5/22',35,41],['2017/5/23',43,43]]); 
 
    
 
var data2 =google.visualization.arrayToDataTable([['date','real_likes_this_week_till_now','expected_this_week_total_likes'],['2017/5/8',0,42],['2017/5/9',3,39],['2017/5/10',10,40],['2017/5/11',16,41],['2017/5/12',20,40],['2017/5/13',31,43],['2017/5/14',35,41],['2017/5/15',43,43]]); 
 

 

 
var data3 = google.visualization.arrayToDataTable(
 
[['date','real_likes_this_week_till_now','expected_this_week_total_likes'],['2017/5/1',0,35],['2017/5/2',3,34],['2017/5/3',7,36],['2017/5/4',10,38],['2017/5/5',16,36],['2017/5/6',31,40],['2017/5/7',35,40],['2017/5/8',40,40]] 
 
); 
 

 
    // Optional; add a title and set the width and height of the chart 
 
    var options = {'title':'weeks', 'width':550, 'height':400,'pointSize': 10,'hAxis':{ 
 
     'slantedText': true, 
 
      'slantedTextAngle':30},'vAxis':{}}; 
 

 
    // Display the chart inside the <div> element with id="differnt" 
 
$elem = document.getElementById('chart_week1'); 
 
    if($elem === null){return;} 
 
    var chart = new google.visualization.LineChart(document.getElementById('chart_week1')); 
 
    $('#next_graph').hide(); 
 
    if(total_weeks == 1){$('#previous_graph').hide();} 
 
    chart.draw(data1, options); 
 
    $('#previous_graph').on("click",function(){ 
 
    var current_graph = $('#which_graph').val(); 
 
    var previous_graph = parseInt(current_graph) + 1 ; 
 
    if(previous_graph == total_weeks){$(this).hide();} 
 
    $('#next_graph').show(); 
 
    $('#which_graph').val(previous_graph); 
 
    var previous_data = "data" + previous_graph; 
 
     new_data = eval(previous_data); 
 
     chart.draw(new_data, options); 
 
    }); 
 
    $('#next_graph').on("click",function(){ 
 
    var current_graph = $('#which_graph').val(); 
 
    var next_graph = parseInt(current_graph) - 1 ; 
 
    if(next_graph ==1){$(this).hide();} 
 
    $('#previous_graph').show(); 
 
    $('#which_graph').val(next_graph); 
 
    var next_data = "data" + next_graph; 
 
     new_data = eval(next_data); 
 
     chart.draw(new_data, options); 
 
    }); 
 
    
 
} 
 

 
</script> 
 

 
<div id="chart_week1"></div> 
 
<input type="hidden" id="which_graph" value =1> 
 
<button id="previous_graph">Previous</button> 
 
<button id="next_graph">Next </button>