If I might offer an improvement: you can instead set the Table's view to the rows matching the latest date, and then clear the view after the Table's first draw. This way, you are never redrawing the whole dashboard just to change the data in the Table, and it also keeps the values in the CategoryFilter accurate in the event that your latest date does not contain a complete set of the "Name" values. Here's an example: http://jsfiddle.net/asgallant/6rycgzjh/
On Thursday, October 30, 2014 1:14:24 PM UTC-4, Sergey wrote: > > Hi Ali, > > Your use case is a bit unusual, so it isn't magically handled by the > dashboard. What you'll want to do is rerender the dashboard with the full > dataset when the user changes the filter. Here's a jsfiddle with your > modified code that does this: http://jsfiddle.net/0mz2smu7/ > On Thu Oct 30 2014 at 12:37:15 PM ma <[email protected] <javascript:>> > wrote: > >> I am writing to seek help, in how can I get the API to show latest record >> of the dataset, when the page renders, however, when control is >> used/trigger, filter the chart using the whole dataset. >> >> I have managed to implement the API, to show latest data from dataset >> query, when the page is rendered, however i am not little unclear what >> approach to take, in order to implement the logic for the control filter to >> use, the entire dataset for filtering the charts. >> >> I tried adding 'datatable' property to the control code, but that does >> not seem to have any affect on the outcome. Would a ready or trigger event >> be adequate for this scenario, if so, is there an example i could following >> to implement this further. >> >> Many thanks for your time and help. >> >> <script type="text/javascript"> >> >> function drawVisualization() { >> var query = new google.visualization.Query(" >> https://docs.google.com/spreadsheets/d/1smbRu2suNUNwZ_0o8zZv76R5FG03chay8SMHsoDE5c4/edit?usp=sharing >> "); >> >> query.send(handleQueryResponse); >> } >> function handleQueryResponse(response) { >> data = response.getDataTable(); >> >> var table = new google.visualization.ChartWrapper({ >> containerId: 'table_div', >> chartType: 'Table', >> options: { >> >> } >> >> }); >> >> var control = new google.visualization.ControlWrapper({ >> containerId: 'control_div', >> controlType: 'CategoryFilter', >> dataTable: data, >> options: { >> filterColumnIndex: 0, >> 'useFormattedValue': true, >> 'ui': { >> 'labelStacking': 'vertical', >> 'allowTyping': false, >> 'allowMultiple': false >> } >> } >> }); >> >> >> var latestDate = data.getColumnRange(5).max; // get latest >> date >> var dataview = new google.visualization.DataView(data); >> >> dataview.setRows(dataview.getFilteredRows([{ column: 5, value: >> latestDate }])) >> >> >> new >> google.visualization.Dashboard(document.getElementById('dashboard')). >> bind([control], [ table]). >> draw(dataview); >> } >> google.setOnLoadCallback(drawVisualization); >> </script> >> </head> >> <body style="font-family: Arial;border: 0 none;"> >> <div id="dashboard"> >> <div id="control_div"></div><br/> >> <div id="chart_id"></div><br/> >> <div id="table_div"></div> >> </div> >> </body> >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Google Visualization API" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected] >> <javascript:>. >> To post to this group, send email to [email protected] >> <javascript:>. >> Visit this group at >> http://groups.google.com/group/google-visualization-api. >> For more options, visit https://groups.google.com/d/optout. >> > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
