I am trying to create a event listener function, which can render table from drawVisualisation(), when the page loads, but when I click on the controls[[categoryPicker(dropdownist), stringFilter(textbox)]], as the controls filter the data. When the user passes the filter, i would like the data to be filtered and render table using drawVisualisation2(). I have started the function and currently, its displaying only the controls, as I am little stuck, on the process of calling drawVisualisation2(), when state of the controls changes.
//100,000 records of data
function drawVisualization2(dataValues, chartTitle, columnNames, categoryCaption) {
if (dataValues.length < 1)
return;
var data = new google.visualization.DataTable();
data.addColumn('string', columnNames.split(',')[0], 'name');
data.addColumn('number', columnNames.split(',')[1], 'price');
data.addColumn('string', columnNames.split(',')[2], 'type');
data.addColumn('datetime', columnNames.split(',')[3], 'date');
for (var i = 0; i < dataValues.length; i++) {
var date = new Date(parseInt(dataValues[i].Date.substr(6), 10));
data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]);
}
}
//==============================================================================================================================\\\
// daily 100 records of data
function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
if (dataValues.length < 1)
return;
var data = new google.visualization.DataTable();
data.addColumn('string', columnNames.split(',')[0], 'name');
data.addColumn('number', columnNames.split(',')[1], 'price');
data.addColumn('string', columnNames.split(',')[2], 'type');
data.addColumn('datetime', columnNames.split(',')[3], 'date');
for (var i = 0; i < dataValues.length; i++) {
var date = new Date(parseInt(dataValues[i].Date.substr(6), 10));
data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]);
}
var monthformatter = new google.visualization.DateFormat({ pattern: "dd-MMM-yyyy" });
monthformatter.format(data, 3);
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': columnNames.split(',')[3],
'filterColumnIndex': '3',
'useFormattedValue': true,
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false,
'caption': 'Select Date Range',
'label': 'Date',
}
}
});
// Define a StringFilter control for the 'Name' column
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': columnNames.split(',')[0]
}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'TableContainer',
'options': {
'width': '900px'
}
});
//dummy table holder
var dummy = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'DummyTable',
'options': {
'width': '300px',
'sort': 'disable'
},
'view': {
'rows': []
}
});
// Create a dashboard
var dashboard = new google.visualization.Dashboard(document.getElementById('PieChartExample'));
google.visualization.events.addOneTimeListener(dashboard, 'ready', function () {
// create a "ready" event handler for the dummy
// this fires whenever the user interacts with the controls
// google.visualization.events.addOneTimeListener(table, 'ready', function () {
// get the data for the table
var dt = dummy.getDataTable();
//var dt = table.getDataTable();
// set the table's data
table.setDataTable(dt);
// draw the table
table.draw();
});
// });
// bind the control
dashboard.bind([categoryPicker, stringFilter], [dummy]);
// Draw the dashboard
dashboard.draw(data);
}
HTML
<div id="PieChartExample">
<table>
<tr style='vertical-align: top'>
<tr>
<td >
<div style="float: left;" id="control2"></div>
</td>
</tr>
<tr>
<td style='width: 100px; font-size: 0.9em;'>
<div style="float: left;" id="control1"></div>
</td>
</tr>
<tr>
<td style='width: 600px'>
<div style="float: left;" id="TableContainer"></div>
<div id="DummyTable" style="display: none;"></div>
</td>
</tr>
</table>
</div>
If anyone could walk me through the process of what I need to do next or provide some examples, then I could get start implementing the next bits. Will I need to create the same controls in drawVisualisation2() function as well? Please help.
Please excuse my knowledge as I am still currently learning javascript.
Many thanks for your time and help.