Визуализация Google - Объяснение для ChartRangeFilter

Question

Я реализовал линейную диаграмму, которая отображает данные JSON с геокодированного адреса. График имеет много категорий, и я также реализовал фильтр категории, который отлично работает. График графика - с января по декабрь, и я хочу дать пользователю возможность визуализировать определенные месяцы. Визуализация Google ChartRangeFilter подходит для этой цели, но есть два момента, в которых мне нужен кто-то, чтобы уточнить для меня, если это возможно.

а) Поскольку мы конвертируем дату в строку в:

var chart = new google.visualization.ChartWrapper 

почему мы относим объект даты в data.addRow? Кроме того, что означает 1,2,3,4 под номером 'type': 'string'?

b) Я хотел бы знать, как добавить функцию ChartRangeFilter в мой текущий код? У меня уже есть один контроллер для фильтра категории, но я также хотел бы улучшить его с помощью ChartRangeControl.

Вот мой код до сих пор для категории фильтра:

var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Month'); 
     data.addColumn('number', 'Anti-Social Behaviour'); 
     data.addColumn('number', 'Burglary'); 
    data.addColumn('number', 'Drugs'); 
     data.addColumn('number', 'Criminal-damage-arson'); 
     data.addColumn('number', 'Other Theft'); 
    data.addColumn('number', 'Public Disorder Weapons'); 
     data.addColumn('number', 'Robbery'); 
     data.addColumn('number', 'Shoplifting'); 
    data.addColumn('number', 'Vehicle Crime'); 
     data.addColumn('number', 'Violent Crime'); 
     data.addColumn('number', 'Other Crime'); 
     data.addRows([ 
     ['January', Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3) ], 
     ['February', Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3)] 
]); 

    var columnsTable = new google.visualization.DataTable(); 
    columnsTable.addColumn('number', 'colIndex'); 
    columnsTable.addColumn('string', 'colLabel'); 
    var initState= {selectedValues: []}; 
    // put the columns into this data table (skip column 0) 
    for (var i = 1; i < data.getNumberOfColumns(); i++) { 
    columnsTable.addRow([i, data.getColumnLabel(i)]); 
    initState.selectedValues.push(data.getColumnLabel(i)); 
    } 

    var chart = new google.visualization.ChartWrapper({ 
     chartType: 'LineChart', 
     containerId: 'line_div', 
     dataTable: data, 
     options: { 
     title: 'The crime in your area by category', 
     width: 700, 
     height: 300 
    } 
}); 

chart.draw(); 

var columnFilter = new google.visualization.ControlWrapper({ 
    controlType: 'CategoryFilter', 
    containerId: 'colFilter_div', 
    dataTable: columnsTable, 
    options: { 
     filterColumnLabel: 'colLabel', 
     ui: { 
      label: 'Columns', 
      allowTyping: false, 
      allowMultiple: true, 
      selectedValuesLayout: 'belowStacked' 
     } 
    }, 
    state: initState 
}); 

google.visualization.events.addListener(columnFilter, 'statechange', function() { 
    var state = columnFilter.getState(); 
    var row; 
    var columnIndices = [0]; 
    for (var i = 0; i < state.selectedValues.length; i++) { 
     row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0]; 
     columnIndices.push(columnsTable.getValue(row, 0)); 
    } 
    // sort the indices into their original order 
    columnIndices.sort(function (a, b) { 
     return (a - b); 
    }); 
    chart.setView({columns: columnIndices}); 
    chart.draw(); 
}); 

columnFilter.draw(); 

Я добавил случайные значения на вопрос, так как данные JSON бы длина кода больше.

Answer 1

Пример игровой площадки для ChartRangeFilter - ужасный пример, так как он излишне усложняет вещи с датой преобразованием строк, которые совершенно не нужны. Если удалить параметр ChartWrapper view, пример работает просто отлично:

var chart = new google.visualization.ChartWrapper({ 
    chartType: 'CandlestickChart', 
    containerId: 'chart', 
    options: { 
     // Use the same chart area width as the control for axis alignment. 
     chartArea: { 
      height: '80%', 
      width: '90%' 
     }, 
     vAxis: { 
      viewWindow: { 
       min: 0, 
       max: 2000 
      } 
     }, 
     legend: { 
      position: 'none' 
     } 
    } 
}); 

Чтобы ответить на ваши вопросы прямо:

ChartRangeFilter должен фильтровать на колонке непрерывного типа данных (number, date, datetime, timeofday), поэтому первым столбцом DataTable является тип date. Если я правильно помню историю API, первоначальная реализация CandlestickCharts не могла использоваться с непрерывным типом оси домена, поэтому преобразование даты в строку было необходимо для работы диаграммы (хотя я предпочел бы, чтобы этот пример просто используйте диаграмму, которая может работать с непрерывной осью).

Цифры ниже 'type': 'string' в этом примере представляют остальные элементы в параметре массива view.columns. Массив может либо брать либо числа для индексов столбцов в базовом DataTable для ссылки, либо они могут принимать объекты, которые сообщают виду, как вычислять значения, которые будут использоваться в этом столбце. В этом примере первым элементом массива является объект, который преобразует даты в строки, а остальные элементы - это индексы столбцов для столбцов данных.