Google 차트, 날짜 범위 필터가있는 선형 차트

전설을 클릭하여 차트에서 Y 시리즈 데이터를 선택적으로 볼 수있는 선형 차트를 사용하고 있습니다. 차트에 다른 주식을 추가 할 수있는 Google Finance 차트와 같은 것입니다.Google 차트, 날짜 범위 필터가있는 선형 차트

나는이 예제에서 주석 차트의 하단에 같은 날짜 범위 필터를 추가 할 : https://developers.google.com/chart/interactive/docs/gallery/annotationchart

하지만 그냥 빈 화면을 표시합니다.

가 여기에 선형 차트 내 코드입니다 : 당신은 선 차트의 chartwrapper 대신 당신이로 차트를 초기화의 ControlWrapper로 daterangefilter와 대시 보드를 사용해야합니다

<html> 
<head> 
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['annotationchart']}]}"></script> 
<script type='text/javascript'> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.load('visualization', '1', { packages : ['controls'] }); 

    google.setOnLoadCallback(drawChart); 
    function drawChart() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Date', 'Sales', 'Expenses'], 
     ['2004', 1000,  400], 
     ['2005', 1170,  460], 
     ['2006', 660,  1120], 
     ['2007', 1030,  540], 
     ['2014', 1230,  40] 
    ]); 

var options = { 
    width: 900, 
    height: 600, 
    title: 'Company Performance', 
    displayAnnotations: true, 
    series: series 
} 
var chart = new google.visualization.LineChart(document.getElementById('chart_div')); //line chart 
chart.draw(data, options); 

var columns = []; 
var series = {}; 
for (var i = 0; i < data.getNumberOfColumns(); i++) { 
    columns.push(i); 
    if (i > 0) { 
     series[i - 1] = {}; 
    } 
} 

google.visualization.events.addListener(chart, 'select', function() { 
var sel = chart.getSelection(); 
    // if selection length is 0, we deselected an element 
    if (sel.length > 0) { 
     // if row is null, we clicked on the legend 
     if (sel[0].row == null) { 
      var col = sel[0].column; 
      if (columns[col] == col) { 
       // hide the data series 
       columns[col] = { 
        label: data.getColumnLabel(col), 
        type: data.getColumnType(col), 
        calc: function() { 
         return null; 
        } 
       }; 

       // grey out the legend entry 
       series[col - 1].color = '#CCCCCC'; 
      } 
      else { 
       // show the data series 
       columns[col] = col; 
       series[col - 1].color = null; 
      } 
      var view = new google.visualization.DataView(data); 
      view.setColumns(columns); 
      chart.draw(view, options); 
     } 
    } 
}); 
    } 
</script> 
</head> 

<body> 
<div id='chart_div' style='width: 900px; height: 600px;'></div> 
</body> 
</html>

출처

2014-10-23 James

(당신은하지 않습니다 daterangefilter 호출).

출처

2014-11-02 11:02:03 Dan

Google 차트, 날짜 범위 필터가있는 선형 차트

답변

관련 문제