Using Google's annotated timeline in the Visualizations API, can you insert annotations regardless of data set? - google-visualization

I can insert annotations on specific datasets on the graph but I wish to have multiple lines on the graph without associating the annotation with a specific line, but with a date instead.
Here is an example of what I want to do. Notice the bubbles appended to the x-axis and not a specific line on the graph.
I've read through the API and can't see an option like this but wondering if someone knows a way.
Thanks.

No experience, but my instant reaction was that you might try a series with the annotations attached with all zeros as the data - and exclude it from the legend?

If you don't mind using an SVG Line Chart with Annotations you can recreate this as well with more flexibility. If you set the Annotation column to immediately follow the X-axis values, the annotations will appear at the very bottom of the chart (on the axis) and not be attached to any category. Here is a sample:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number','Day');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addColumn('number', '.DJI');
data.addColumn('number', '.INX');
data.addColumn('number', '.INIC');
data.addRows([
[1, null, null, 1000, 400, 300],
[2, 'A', 'did stuff', 1170, 460, 400],
[3, 'B', 'did more stuff', 660, 1120, 540],
[4, null, null, 1030, 540, 620],
[5, 'C', 'stopped stuff', 1070, 600, 700]
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {focusTarget: 'category',
width: 500, height: 400,
vAxis: {maxValue: 10},}
);
}
This ends up looking like this:

Related

How to Customize the tooltip being displayed in Google Vislization charts

Please see this jsfiddle , where i am displaying Candle stick Charts for a particular Stock .
The only change i need is that i want to customize the tool tip being shown .
I just want to display the close value of the particular day .
From google i found out that i need to add something like this to achive the behaviour needed
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
But i dont see anything like data.addColumn in my code
Could you please tell me how to achieve this ??
http://jsfiddle.net/ovog4njt/5/
You're using arrayToDataTable(), so you're not individually adding the columns and rows, which is why your example doesn't make sense to you.
You can just do this:
var mydata = [
['13-Oct', 1097.95, 1113.45, 1109.95, 1132, 'tooltip'],
['14-Oct', 1095.6, 1101.15, 1113.45, 1117, 'content'],
['15-Oct', 1092.1, 1129.2, 1116, 1132, 'goes'],
['16-Oct', 1130, 1170.3, 1130, 1182.4, 'in'],
['19-Oct', 1144.5, 1162.15, 1174, 1182.2, 'here']
];
var data = google.visualization.arrayToDataTable(mydata, true);
data.setColumnProperty(5, 'role', 'tooltip');
JSFiddle
If you weren't using arrayToDataTable(), your code would look like this, which is where your example comes from.
var mydata = [
['13-Oct', 1097.95, 1113.45, 1109.95, 1132, 'tooltip'],
['14-Oct', 1095.6, 1101.15, 1113.45, 1117, 'content'],
['15-Oct', 1092.1, 1129.2, 1116, 1132, 'goes'],
['16-Oct', 1130, 1170.3, 1130, 1182.4, 'in'],
['19-Oct', 1144.5, 1162.15, 1174, 1182.2, 'here']
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Low Err');
data.addColumn('number', 'Low');
data.addColumn('number', 'High');
data.addColumn('number', 'High Err');
data.addColumn({
type: 'string',
role: 'tooltip'
});
data.addRows(mydata);

google column charts negative value to show highlighted or shaded

I am working with price value to show in google charts and i need somthing like if the value got negative then column will be highlighted or shaded.
I am using the column chart.
<script type="text/javascript">
google.load('visualization', '1.0', { 'packages': ['corechart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Price');
data.addColumn('number', 'Rent Received');
data.addColumn('number', 'Actual Profit');
data.addColumn('number', 'Total Expenses');
data.addRows([
['Property 1', 250, -80, 589.26],
['Property 2', 250, 361.14, 589.26],
['Property 3', 100, 260, 500]
]);
// Set chart options
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 }
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
chart.draw(data, options);
}
</script>
What you want to do is add a formatter. In particular, you want the ColorFormatter. This formatter "Colors a cell according to whether the values fall within a specified range."
Having said that, you might want to consider the chart type that your are using. Your legend will have one color for each column. Your requirement is to change the color of each column depending on the value... there is a conflict here.

Multiple target lines in Google Visualization

I'm using Google Visualization to display a target vs performance chart. The chart is split into a few months, and within each month, I have several departments, each with their own targets. The actual performance will be displayed using bar (column) charts, while I'm intending to have the targets displayed as a line. For now, I've chosen to use a stepped area chart with 0 opacity and disconnected lines for the targets, as recommended by this comment.
The issue now is that the stepped area chart displays across the entire category, but I need it to display only across a single column. Currently what I have is (copy and paste the code in the Google Code Playground to see the results):
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Monthly Coffee Production by Country',
width: 600,
height: 400,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
connectSteps: false,
series: {3: {type: "steppedArea", areaOpacity: 0}}
});
}
​
I'm also open to other possible ideas of how to display a target vs performance chart, so other solutions that can also create such a chart would be greatly appreciated. Thanks.
Use the "interval" column role to add a small horizontal line in line with the column:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Y1');
data.addColumn({type: 'number', label: 'Y1 Target', role: 'interval'});
data.addColumn('number', 'Y2');
data.addColumn({type: 'number', label: 'Y1 Target', role: 'interval'});
data.addRows([
['Jan', 5, 7, 4, 10],
['Feb', 3, 4, 8, 6],
['Mar', 6, 3, 6, 8],
['Apr', 2, 5, 3, 6]
]);
see example at http://jsfiddle.net/asgallant/M7YTG/2/

Marking an address in geochart from its name

I am working on geochart.Is there any example showing how to mark a place,given only its name? I have done the same with geocoordinates,and with city names,country names with pure javascript
It depends on if Google knows where your place names are. For instance, this code will create a map with no problem of all the locations stated. Give it a try with your data and see if it plots:
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Place', 'Popularity'],
['Statue of Liberty', 200],
['Eiffel Tower', 300],
['Big Ben', 400],
['Tokyo Tower', 500],
['Great Pyramids', 600],
['Gobi Desert', 700]
]);
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, {width: 556, height: 347, displayMode: 'markers'});
}
While it looks like the Statue of Liberty didn't plot, it's on there, it's just small and pinkish

Google geocharts with coordinates?

I want to use google geochart with coordinates (longtitute, latitute). But I cant find any example about this topic. There are a lot of example with region and city example. But with coordinates I Cant find.
Please, code example, link, tutorial any thing else?
Thanks.
You can check an example here:
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {var data = new google.visualization.DataTable();
data.addColumn('number', 'Lat');
data.addColumn('number', 'Long');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});
data.addRows([[41.151636,-8.569336,0,'tooltip']]);
data.addRows([[ 39.059575,-98.789062,0,'tooltip']]);
var options = {
colorAxis: {minValue: 0, maxValue: 0, colors: ['#6699CC']},
legend: 'none',
backgroundColor: {fill:'transparent',stroke:'#FFF' ,strokeWidth:0 },
datalessRegionColor: '#f5f5f5',
displayMode: 'markers',
enableRegionInteractivity: 'true',
resolution: 'countries',
sizeAxis: {minValue: 1, maxValue:1,minSize:5, maxSize: 5},
region:'world',
keepAspectRatio: true,
width:400,
height:300,
tooltip: {textStyle: {color: '#444444'}}
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
chart.draw(data, options);
}
<script src="https://www.google.com/jsapi?fake=.js"></script>
<div id="visualization"></div>
There are many ways to do it, this is just one.
data.addColumn('number', 'Lat');
data.addColumn('number', 'Long');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});
data.addRows([[41.151636,-8.569336,0,'tooltip']]);
data.addRows([[ 39.059575,-98.789062,0,'tooltip']]);
As said in the documentation:
Marker location [Required] The first column is a specific string
address (for example, "1600 Pennsylvania Ave"). OR The first two
columns are numeric, where the first column is the latitude, and the
second column is the longitude.
You need to define first two columns of your data set as numeric values representing latitude and longitude.