Google Charts Filter/Control график на основе скрытой стоимости

Question

У меня есть scattor сюжет со следующими данными:

[ 'HDD', 'Oil Consumption'] 
['100','1000'] 
['50','500'] 
['10,'100'] 

Say каждая точка данных берется из конкретной даты:

[ 'HDD', 'Oil Consumption', 'Date'] 
['100','1000','1 January 2015'] 
['50','500', '1 February 2015'] 
['10,'100', '1 March 2015'] 

Как может Я добавляю фильтр (предпочтительно DateRangeFilter) для фильтрации на основе столбца даты, хотя столбец даты на самом деле не отличается от графика рассеяния.

Answer 1

Вы делаете это с ChartWrapper, ControlWrapper и Dashboard.

Here is the documentation related to this from Google.

В принципе, вы вместо того, чтобы инициировать диаграмму с new google.visualization.ScatterChart(document.getElementById('yourId')) использовать то, что называется ChartWrapper (которое, на мой взгляд, проще и более читаемым способ сделать это).

Затем вы создаете ControlWrapper (обертка для вашего элемента управления (фильтр диапазона дат)).

Наконец, вы связываете ControlWrapper с ChartWrapper через Dashboard. Ваши данные могут быть как:

 var data = google.visualization.arrayToDataTable([ 
     ['Age', 'Weight', 'Date'], 
     [ 8,  12, new Date(2015, 10, 1)], 
     [ 4,  5.5, new Date(2015, 10, 2)], 
     [ 11,  14, new Date(2015, 10, 3)], 
     [ 4,  5, new Date(2015, 10, 4)], 
     [ 3,  3.5, new Date(2015, 10, 5)], 
     [ 6.5, 7, new Date(2015, 10, 6)] 
    ]); 

ChartWrapper может выглядеть следующим образом:

var scatterWrap = new google.visualization.ChartWrapper({ 
     chartType:'ScatterChart', 
     containerId:'chart_div', 
     dataTable:data, 
     view:{ 
      columns:[0, 1] // This makes sure your ScatterChart won't try to use the third column for visualization, that would result in an error. 
     } 
    }); 

и ControlWrapper как это

var dateRangeWrap = new google.visualization.ControlWrapper({ 
     controlType:'DateRangeFilter', 
     containerId:'dateRange', 
     options:{ 
      filterColumnIndex:2 
     } 
    }); 

Наконец инициализации и привязки к панели инструментов:

 var googleDashboard = new google.visualization.Dashboard(document.getElementById('dashboard')); 
     googleDashboard.bind(dateRangeWrap, scatterWrap); 
     googleDashboard.draw(data); 

Все это закончилось бы this Fiddle. (обратите внимание, что вам нужно загрузить controls вместо corechart в ваш google.load).