Using the Google visualization api, is there an easy way to see if a DataView is empty?
https://developers.google.com/chart/interactive/docs/reference#DataView
I can see perhaps using dataView.getValue(0, 1) etc to check for nulls, but it also contains column headings.
I'm guessing it's tricky as the dataview could have many different formats, but is there a good generic way of checking for empty data views? I'm using the dataview for a pie chart.
If I remember right, this can be easily done this way
var predata = response.getDataTable();
var vals = new Array();
var rownum = predata.getNumberOfRows();
// Make sure our data isn't empty.
if (null==predata) // yoda was here
return;
Returns the data table as returned by the data source. Returns null if
the query execution failed and no data was returned.
From reading the documentation, it seems like dataView.getNumberOfRows() is what you're looking for. Before calling that, however, you need to get the filtered rows which are null and then hide them. Here is an example using the Google Code Playground where I am checking one column for null and then hiding the row if it is null. Replace Google Code's default JavaScript for that example with what's below:
function drawVisualization() {
var dataTable = google.visualization.arrayToDataTable([
['Name', 'Age', 'Instrument', 'Color'],
[null, null, null, null],
['Paul', 52, 'Sitar', 'Red'],
['George', 16, 'Guitar', 'Green'],
['Ringo', 72, 'Drums', 'White']
]);
var table = new google.visualization.Table(document.getElementById('table'));
table.draw(dataTable, null);
var dataView = new google.visualization.DataView(dataTable);
// Get rows where the 2nd column contains null
var filteredRows = dataView.getFilteredRows([{column: 1, value:null}]);
console.log(filteredRows);
dataView.setColumns([0, 1]);
// Hide the filtered rows returned
dataView.hideRows(filteredRows);
// Check the number of rows that now exist
console.log(dataView.getNumberOfRows());
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(dataView, {width: 400, height: 200});
}
getDistinctValues may help you with that. It works fine for line charts, when applied to columns which are visualized along Y-axis.
It doesn't seem quite right...
Perhaps I should replace null with 0 on the server-side before the client side even sees the data....
I've resorted to:
if (dataView.getValue(0, 1) === null || dataView.getValue(1, 1) === null || dataView.getValue(2, 1)) === null)
Where my dataview strucuture is:
Column Title 1 | Data
Column Title 2 | Data
Column Title 3 | Data
Related
In flutter I'm trying to have one of the columns of a DataTable be a DropdownButton. I would like the DataTable rows to populate from getUsers initially, then be able to edit the cell cell with a the DropdownButton based on the ratingList.
So I would like to be able to change the value of the DropdownButton cell to any of the values in the ratingList: ['Ok', 'Good', 'Great', 'Amazing']; Note I want to be able to select 'Great' or 'Amazing', these aren't one of the initial populated values.
It is essential for the data to be loaded from getUsers, as this will be grabbed from Firestore eventually. Then have the ability to change a DropdownButton cell after the data is loaded, based on the ratingList of values, which is a complete list of the ratings.
See below for example code (DropdownButton doesn't change cell value), also in DartPad.
Thanks in advance!
Just put user.rating = newValue into setState block.
Like this.
onChanged: (String newValue) {
setState(() {
//help!
user.rating = newValue;
});
},
I'm new to Google script and hoping someone here could answer this.
I have 7 columns and each one has a drop down box so we can select a status "Ready", "Approved", "Waiting" etc.
There will soon be over 500 rows of statuses so ideally I would like to have a function on each column to automatically set the status of the column after it.
Example Cells:
Ready|Waiting|Waiting|Waiting|Waiting|Waiting|Waiting
When the first task is Approved, the cells should look like this:
Approved|Ready|Waiting|Waiting|Waiting|Waiting|Waiting
In the above example, the first cell should be clicked "Approved" by the user from the drop down list. Then the script should read the cell edit, and switch the next cell from "Waiting" to "Ready"
I am looking at the script route as I need to have the drop down cells clickable. If I put a function onto the cell itself, I lose the drop down options.
Any help with this would be really awesome!
Thanks in advance!
You may want to check this YouTube video and this transcribed code can be tweaked to suit your needs:
function setDataValid_(range, sourceRange) {
var rule = SpreadsheetApp.newDataValidation().requireValueInRange(sourceRange, true).build();
range.setDataValidation(rule);
}
function onEdit() {
var aSheet = SpreadsheetApp.getActiveSheet();
var aCell = aSheet.getActiveCell();
var aColumn = aCell.getColumn();
if (aColumn == 1 && aSheet.getName() == 'Worksheet') {
var range = aSheet.getRange(aCell.getRow(), aColumn + 1);
var sourceRange = SpreadsheetApp.getActiveSpreadsheet().getRangeByName(aCell.getValue());
setDataValid_(range, sourceRange)
}
}
And for additional insights, you may want to also see this thread.
I am creating a dashboard with Google Viz and am having trouble with the select event when the data is filtered. It works fine when the page loads and nothing is filtered. However, after filtering the data, it does not select the correct row from the dataTable on 'select' events. Here is my jsfiddle and my listener:
http://jsfiddle.net/5E7zX/1/
google.visualization.events.addListener(rBubbleChart, 'select', function() {
var selection = rBubbleChart.getChart().getSelection();
var item = selection[0];
var school = data.getValue(item.row, 1);
alert('school is: ' + school);
});
When it is unfiltered, the alert box displays the school that was selected. However, when it is filtered on a school, the alert box does not display the correct school (the exception is Air Base Elem because that is the first school in the list).
Any thoughts on how to get the correct row of data once the data is filtered? Thanks.
The selection indices refer to the data as seen by the chart, which is not necessarily the same as your base DataTable, so you need to check against the data used by the chart by calling the getDataTable method to fetch the chart's data, and then referencing that when getting a value:
google.visualization.events.addListener(rBubbleChart, 'select', function() {
var selection = rBubbleChart.getChart().getSelection();
// get the data used by the chart
var dt = rBubbleChart.getDataTable();
// test selection array length, since it can be zero when a user deselects a point!
if (selection.length) {
var item = selection[0];
var school = dt.getValue(item.row, 1);
alert('school is: ' + school);
}
});
I am using google spreadsheet to feed to my Column chart. To get the single columns to be a different color I used sort of a hack by setting values to 0 on opposite columns in the spreadsheet for each column in the chart. This gave me the the difference in color I needed for each column in the chart. The issue I am now having is the tooltips do not work for each column and was wondering how I can implement to work correctly in my code.
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
var visualization;
function drawVisualization() {
var query = new google.visualization.Query(
'http://spreadsheets.google.com/tq?key=0AjlSK7_zXoNHdDhrU2xiaHVIQmR1WldYZm1yMTNkM3c&pub=1');
// Apply query language statement.
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// set the 3rd column to the "tooltip" role
data.setColumnProperty(3, 'role', 'tooltip');
visualization = new google.visualization.ColumnChart(document.getElementById('visualization'));
visualization.draw(data, {legend: 'none', colors:['blue','red'],is3D:'True', isStacked:'true'});
}
google.setOnLoadCallback(drawVisualization);
Option A:
Adjust your underlying data so that you have 4 columns instead of 3, with the same values in column 2 (after the first set of data) as you have in your current column 3 (with the tooltip). Use the setColumnProperty() on the new columns 2 and 4 as tooltip.
Option B:
Copy your tooltip column 3 in Javascript to Column 2 (after the first data set) using insertColumn(), this should have the same effect as Option A. You will have to loop through to copy over the values, or otherwise add the same data via javascript.
I have a Column Chart with an x-axis value which is a date. This chart worked this morning but is suddenly broken and displaying "Bars series with value domain axis is not supported." as an error message. The website in question hasn't been updated in weeks.
My DataTable construction code looks like:
var data= new google.visualization.DataTable({
"cols":[{"label":"Date","type":"date"},{"label":"New Users","type":"number"}],
"rows":[{"c":[{"v":new Date(1325656800000),"f":null},{"v":1355,"f":null}]}]
});
What can I do to my code to fix this?
It's not a bug. Google Visualisation API has changed.
At http://code.google.com/apis/chart/interactive/docs/customizing_axes.html#Help they post some solutions to this problem. Using option:
strictFirstColumnType: false
can only be used as a temporary solution. Google says:
However, please bare in mind that this option is only available for limited time and will be removed in the near future.
The recommended solution is that you change your Date fields on x axis to String. I've achieved this by using formatter before adding value to the DateTable object.
var formatterMoney = new google.visualization.NumberFormat({suffix: ' zł', decimalSymbol: ',', groupingSymbol: ' '});
var formatterDate = new google.visualization.DateFormat({pattern: 'dd.MM.yyyy'});
var data = new google.visualization.DataTable();
data.addColumn('string', 'order date'); //used to be date field here
data.addColumn('number', 'total amount');
data.addRow([formatterDate.formatValue(new Date('2011-12-20')),971793.93]); //used to be Date object, now is Date formated as String
data.addRow([formatterDate.formatValue(new Date('2011-11-30')),1.0]);
data.addRow([formatterDate.formatValue(new Date('2011-11-17')),1.0]);
data.addRow([formatterDate.formatValue(new Date('2011-10-27')),1.72]);
data.addRow([formatterDate.formatValue(new Date('2011-10-26')),10.27]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
formatterMoney.format(data, 1);
chart.draw(data, {width: window.width, height: 400, hAxis: {direction: -1}});
The problem is with the Date fields. I've converted the date field to a String and I'm using a String now. In case you are using formatters, you can format the value before supplying it to the DataTable:
formatter.formatValue(date)
I'm guessing this is a bug; I'll try to file a bug report.