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.
Related
I need to apply chart range filter based on date on hidden column in google table. For this i created Google table instance like this
var data = new google.visualization.DataTable();
i added the column in this table then i created google dataview object like this
var view = new google.visualization.DataView(data);
view.hideColumns([0]);
where data is datatable instance from here i hiding the first column but instead of hiding it's getting deleted. How t ojust hide this column
You need to set the view.columns parameter of the Table's ChartWrapper object. This creates a private DataView for the Table to use, showing only the columns you specify in the columns parameter, eg:
view: {
// show only columns 1-4 in the Table
columns: [1, 2, 3, 4]
}
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.
Is it possible to specify coordinates for a city rather than the city name for a Geochart?
The second map on their documentation page (https://developers.google.com/chart/interactive/docs/gallery/geochart) uses cities.
I want to specify coordinates to make it faster to place markers on the map.
Specifying cities takes longer for large datasets because it has to find each city by name.
Yes, it is possible.
You have to enter the lat/lon values as the 2 first values of the data table.
data.addColumn('number', 'Lat'); // Latitude Value
data.addColumn('number', 'Lon'); // Longitude Value
data.addColumn('string', 'Name'); //
data.addColumn('number', 'Value'); //
data.addColumn({type:'string', role:'tooltip'});
data.addRows([[33.6598257,-85.8316318," City Name",1,"Tooltip info"]]);
data.addRows([[33.5206608,-86.80249," City Name",2,"Tooltip Info"]]);
I've successfully created maps with dozens of markers that load instantly with this model.
Here's an example on my website of a Map of the US with 130+ markers: http://cmoreira.net/interactive-world-maps-demo/interactive-map-load-large-number-of-markers/
Hope it helps!
I'm trying to configure to my google candlestick chart a grouping format by date, as I saw it required a continuous axis (all the hAxis options are followed by: This option is only supported for a continuous axis.)
I know i need to add a continuous axis, but HOW am i doing this ?? I was trying for 2 days to play with the settings without any luck.
Build a datatable instance without using the arrayToDataTable() method or it will raise an exception. Define your horizontal axis as 'date' and use Date() objects instead of strings.
var data = new google.visualization.DataTable()
data.addColumn('date', 'Date');
data.addColumn('number', 'Whatever');
rows = [
[new Date('2009-10-01'), 1230],
[new Date('2009-11-01'), 1290],
[new Date('2012-02-01'), 3690],
];
data.addRows(rows);
It should be enough.
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.