I'm using google chart api.
javascript code :
var data = new google.visualization.DataTable();
data.addColumn('number', 'buy');
data.addColumn('number', 'sell');
data.addColumn({type:'string', role:'tooltip'});
data.addRows( ... my data here ...
[[ 10 ,12 , "I'm very long long message in tooltip" ] [ ... and more data.
the tooltip on the chart shows "I'm very long long message in tooltip" in 1 line.
how can I make the tooltip be 50px width ... or have inside ?
You should set on OPTION object the following:
options = {
tooltip: {isHtml: true}
};
Your should also modify the line:
data.addColumn({type:'string', role:'tooltip'});
in:
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
Hope this helps.
Related
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);
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.
Ok, so I'm really hoping someone can help me get started, I have been able to plot pies and timelines from my google analytics data via api with google visualization. I now want to extract the data from google analytics of visits and plot a geomap. This is the geomap sample code which works
google.load('visualization', '1', {packages: ['geochart']});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700],
['South Africa', 800]
]);
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, {width: 556, height: 347});
}
google.setOnLoadCallback(drawVisualization);
but of course I want to get the var 'data' from my google analytics api into such an array and plot say the top 10 popular countries based on pageviews from the last 30 days?
I believe the following query will give me what I want
dimensions=ga:country
metrics=ga:visits
sort=-ga:visits
How do I get this into the proper format for the data variable to plot this geomap? If you can help me rewrite the var data so that it works, I could be the happiest man alive.
Thanks in advance
This function should take the data returned by Google Analytics, input it into a DataTable, and draw a GeoChart of the top 10 countries by visit count:
function drawChart(results) {
var entries = results.feed.getEntries();
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Visits');
for (var i = 0; i < entries.length; i++) {
data.addRow([entries.getValueOf('ga:country'), parseInt(entries.getValueOf('ga:visits'))]);
}
// sort by visits, descending
var sortedRows = data.getSortedRows([{column: 1, desc: true}]);
// remove all elements after the 10th
while (sortedRows.length > 10) {
sortedRows.splice(10, 1);
}
var view = new google.visualization.DataView(data);
view.setRows(sortedRows);
var geochart = new google.visualization.GeoChart(document.getElementById('visualization'));
// draw the chart using the view
geochart.draw(view, {width: 556, height: 347});
}
You should look into using the new Google Analytics SuperProxy, it simplifies the process of getting api queries into the charts api, there are still a few bugs but very simple to setup, the youtibe video on the link below will take you through the full process. https://developers.google.com/analytics/solutions/google-analytics-super-proxy
I'm wondering if it's possible to display a kind of data table in GEO Charts. I have this code:
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Count');
data.addRow(["AT",141]);
data.addRow(["BE",8]);
data.addRow(["CH",42]);
data.addRow(["DE",98]);
data.addRow(["ES",942]);
data.addRow(["GR",30]);
data.addRow(["HQ",104]);
data.addRow(["HU",30]);
data.addRow(["LU",10]);
data.addRow(["NL",153]);
data.addRow(["PL",53]);
data.addRow(["PT",102]);
data.addRow(["RU",266]);
data.addRow(["SE",13]);
data.addRow(["TR",228]);
var options = {
displayMode: 'regions',
region: '150',
colorAxis: {colors: ['#ffa3b5', 'red']},
tooltip: { textStyle: { fontName: '"Verdana"', fontSize: 14 } },
legend: {textStyle: {color: 'black', fontSize: 10}},
keepAspectRatio: false,
height: 300,
width: 550
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div_02'));
chart.draw(data, options);
}
As I have some special countries (like HQ) and Turkey (that is not in region 150), I would like to a datatable or legend to the geochart.
Is this possible or do I have to make a table charts and put it somewhere else on the website?
Cheers & Thx in Advance
Alex
You cannot add a dataTable to the geoChart using the native Google Visualization API. A GeoChart is a GeoChart and a DataTable is a DataTable. However, you can create a linked GeoChart and DataTable on the same page using the same data taking advantage of the Dashboard controls and chartwrappers.
If you get fancy with your CSS, you can even hover the <div> with the table over the GeoChart, or otherwise find a way to make it look like they are the same chart.
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.