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.
Related
Good afternoon everyone,
I am implementing Google Charts API in my Django project. I would like to draw two different charts, a pie chart and a table chart. I am able to display the Pie chart without problems. However, I am having trouble with the table chart. I am passing a tuple to the data.setCell() method. When I do that the table chart does not render.
Hereunder is the code that I wrote:
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Company Name');
data.addColumn('number', '52 week high');
data.addColumn('number', '52 week low');
data.addRows(5);
{% for company in data_cell|safe %}
data.setCell(company);
{% endfor %}
// data.setCell(0, 0, 'John');
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '50%', height: '50%'});
google.visualization.events.addListener(table, 'select', function() {
var row = table.getSelection()[0].row;
alert('You selected ' + data.getValue(row, 0));
});
}
data_cell is a variable that contains a list of tuples and it is part of the context dictionary in my views.py file. As follows you can find an example; ('Facebook', 384.33, 244.61)
I have tried looping through the list of tuples without the safe method and it does not work.
Any hints?
instead of using setCell, try the addRow method...
data.addRow(company);
setCell requires three arguments --> row index, column index, and value.
you cannot pass all in one variable.
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);
}
});
Here is my data:
dataToDisplay=[[156,"2013-12-01","note one"],
[206,"2013-12-02","note two"],
[280,"2013-12-03","note three"],
[320,"2013-12-04","note four"],
[0,"2013-12-05",""]]
Here is the code to make a line chart:
chartData = new google.visualization.DataTable();
chartData.addColumn('number', 'Miles');
chartData.addColumn('string', 'Date');
chartData.addColumn({type:'string', role:'annotationText'});
chartData.addRows(dataToDisplay);
graphTitle = 'Mileage'
var options = {
title: graphTitle,
height:600
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(chartData, options);
and the error:
"Data column(s) for axis #0 cannot be of type string"
I'm at a loss as to what's going on. Which column is axis #0?
Also, is there a way to build a line graph with annotations using something like:
var chartData = google.visualization.arrayToDataTable(dataArray);
If so, how would dataArray have to be constructed?
LineChart's accept strings only as annotation columns or domain columns. The first column is the domain column, and annotation columns have to be specified as such. In your case, the "date" column is causing the problem, as it is the second column, and therefore is expected to be either a data ("number" type) column or an annotation column. You did not specify it as an annotation column, which is why you get the error.
Is your intent to have the dates be annotations or values? if they are intended to be values, you must put them in the first column:
chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Date');
chartData.addColumn('number', 'Miles');
chartData.addColumn({type:'string', role:'annotation'});
In order to use the "annotationText" data role, the preceeding column must be an "annotation" role column. The "annotation" role creates a text label on the chart at the associated data point, and the "annotationText" role creates a tooltip to show when the user hovers over the label.
I have a line chart where we plot some numbers against a datetime value on x-axis. Since, using datetime value on column type renders it a continuous axis, the column labels are auto generated.
We get only the time component as the column labels but not the date. Is there anything I can do to get the entire date time as the label?
(NOTE: I do not want to change the data type to string as I do not want even spacing in data points.)
Yes. You need to look at formatters which use a subset of the ICU SimpleDateFormat.
Here is an example of how they work:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addRows([
[new Date(2012,1,5)],
[new Date(2012,2,10)],
[new Date(2012,3,15)],
[new Date(2012,4,20)]
]);
alert(data.getFormattedValue(3,0));
var formatter1 = new google.visualization.DateFormat({pattern: 'yyyy, MMM'});
formatter1.format(data,0);
alert(data.getFormattedValue(3,0));
}
Adjust to fit your data and needs, and presto! You have it working.
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