Управляйте двумя диаграммами Google сразу с одним фильтром управления - возможно?

Question

Я пытаюсь добавить два типа диаграмм в одну приборную панель и фильтровать их по стране, например, так:

начальных значений, указанных должно быть для Европы, сделано через

'state': {'selectedValues': ['Europe']} 

Диаграмма 1 представляет собой пирог график и должен показать раскол между двумя переменными в Европе и каждой стране, скажем, 2012, вот так:

['Country', 'Speciality', 'Amount'], 
['Europe', 'XYZ', 20441], 
['Europe', 'ABC', 5355], 
['Austria', 'XYZ', 477], 
['Austria', 'ABC', 153],   
['BeNeLux', 'XYZ', 1512], 
['BeNeLux', 'ABC', 298], 
['France', 'XYZ', 3080], 
['France', 'ABC', 792], 

и так далее

Диаграмма 2 должна относиться к тем же двум переменным, но добавить четверти, то есть Q1, Q2, Q3 и Q4. В идеале я хотел бы, чтобы это было в виде стоп-кадра на 100%. Столбцы Q1 Q2 Q3 Q4.

Вопрос: Как добавить обе диаграммы в приборную панель и иметь фильтр управления обоими графиками, если я выбираю, например, Францию?

Благодаря

Answer 1

Связывание фильтра для двух карт легко, как и the documentation says:

// One-to-many binding where 'ageSelector' drives two charts. 
    dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]); 

Это будет означать, что если вы выберете «Европа» это изменит фильтр для обоих графиках , Из вашего вопроса кажется, что вы можете быть немного неясны, как это сделать (поскольку ваши данные не отформатированы правильно).

Вам понадобится 5 вещей:

1. DataTable, содержащий информацию для всех графиков (так что если вы хотите получить информацию четверти, она должна быть в DataTable а
2. Dashboard объекта содержит диаграммы и элементы управления
3. ChartWrapper объект для круговой диаграммы.
4. ChartWrapper объекта для сложенной диаграммы колонка
5. ControlWrapper объект для селектора

DataTable

В настоящее время у вас есть данные только с 3 колонками:

['Country', 'Speciality', 'Amount'], 
['Europe', 'XYZ', 20441], 
['Europe', 'ABC', 5355], 
['Austria', 'XYZ', 477], 
['Austria', 'ABC', 153],   
['BeNeLux', 'XYZ', 1512], 
['BeNeLux', 'ABC', 298], 
['France', 'XYZ', 3080], 
['France', 'ABC', 792], 

Поскольку вы также хотите четверти, вам нужно добавить эту информацию, а также.

['Country', 'Speciality', 'Amount', 'Q1', 'Q2', 'Q3', 'Q4'], 
['Europe', 'XYZ', 20441, 1, 2, 3, 4], 
['Europe', 'ABC', 5355, 1, 2, 3, 4], 
['Austria', 'XYZ', 477, 1, 2, 3, 4], 
['Austria', 'ABC', 153, 1, 2, 3, 4],   
['BeNeLux', 'XYZ', 1512, 1, 2, 3, 4], 
['BeNeLux', 'ABC', 298, 1, 2, 3, 4], 
['France', 'XYZ', 3080, 1, 2, 3, 4], 
['France', 'ABC', 792, 1, 2, 3, 4], 

Панель объекта Объект

Панель индикаторов указывает на <div> элемент, который содержит другие <div> элементы для диаграмм и управления.Так что в вашем случае, что-то вроде:

Затем вы создаете приборную панель с помощью кода, как это:

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')); 

ChartWrappers

Так у вас есть две карты, и вам нужно создайте две отдельные обертки. Оболочка в основном дает все подробности о том, что что график нужно будет создать:

• Где на странице она идет (<div>)
• Где будет брать данные из
• Какой тип диаграммы/options он будет использовать

В piechart используются только столбцы 0, 1, 2, поэтому вы устанавливаете свойство «view» объекта, чтобы ограничить данные этими столбцами.

Сделайте то же самое с stackedcolumnchart, используя столбцы 0, 1, 3, 4, 5, 6.

Обе схемы нужно брать данные из того же DataTable, хотя, в противном случае фильтрации одна диаграмма не будет влиять на другой (фильтр будет применяться к DataTable, поэтому, если у вас их два, вы можете изменять только по одному).

ControlWrapper

Как ChartWrapper, вам нужно создать объект ControlWrapper, который имеет все подробности о контроле вы используете.

Как только у вас установлены все ваши объекты, вы можете нарисовать панель управления и привязать элемент управления к двум диаграммам с кодом в верхней части этого ответа.

Ссылки

Если вы до сих пор путают, поиграйте с Google Playground для Сводки, чтобы получить представление о том, как она работает.