[visualization-api] tooltip problem
google.setOnLoadCallback(barChart3_1600);
function barChart3_1600() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Title','DIRECT SAVINGS (YTD) (B)', 'COST
AVOIDANCE (YTD) (C)',
{ role: 'annotation' } ],
['', 0, 0, ''],
['', 0, 0, ''],
['', 0, 0, ''],
['', 5819, 112, '112']
]
);
new
google.visualization.ColumnChart(document.getElementById('barChart_Div_3_1600')).
draw(data,{
legend: 'none',
tooltip: { trigger: 'none' },
width:660, height:400,
chartArea: {'width': '100%', 'height': '80%', left:60},
bar: {groupWidth: 60 },
backgroundColor: { fill:'none' },
vAxis: { minValue: -1000, maxValue: 1500,gridlineColor:
'transparent',textColor: 'transparent',baselineColor: 'transparent',
viewWindow: { min: -1000 }, ticks: [0, 1000, 3000, 5000, 7000, 9000, 11000,
13000, 15000]},
hAxis : {textColor: 'transparent', gridlineColor:
'transparent', baselineColor: 'transparent'},
isStacked: true,
series: {
0:{color:'transparent'},
1:{color:'#00'}
}
}
);
}
I have a problem. Even thought I have tooltip: { trigger: 'none' }, I still
get the a rollover border appearing. Thanks
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/49321f3f-29ac-4ada-9214-347430771ea5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[visualization-api] Tooltip Problem
Hi,
this is My dataTable:
['State', 'Income', 'Product'],
['KERALA', 1, Apple],
['KERALA', 7000, Nokia],
['Tamil nadu', 1, Apple],
['Tamil nadu', 2, SamSung],
['west Bengal', 5000,Sony]
i want to show the tooltip like,
Apple 1
Samsung 2 in Tamilnadu
and
Apple 1
Nokia 7000 in Kerala
but its takes only 2 value.
is it possible to do that?
This is My Javascript Code:
html
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
titleGoogle Visualization API Sample/title
script type=text/javascript src=http://www.google.com/jsapi;/script
script type=text/javascript
google.load('visualization', '1.1', { packages: ['geochart'] });
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Income', 'Product'],
['KERALA', 1, Apple],
['KERALA', 7000, Nokia],
['Tamil nadu', 1, Apple],
['Tamil nadu', 2, SamSung],
['west Bengal', 5000,Sony]
]);
var options = {
region: 'IN',
resolution: 'provinces',
width: 400,
height: 400,
colorAxis: {
//values: [-1, 0, 1],
colors: ['#FF']
}
};
options['tooltip'] = { isHtml: true };
// create a DataView to transform the data into the format you need
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
calc: function (dt, row) {
// set the color values based on the 4th column
var val = dt.getValue(row, 1);
return val;
// if positive, return 1
// if negative, return -1
// if 0, return 0
//return (val 0) ? 1 : ((val 0) ? -1 :
0);
}
}, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
// set up the tooltip
//alert(dt.getValue(row, 1) + ' 2010:\n' + dt.getValue(row,
2) + ' 2011:\n ' + dt.getValue(row, 3));
return dt.getValue(row, 1) + dt.getValue(row, 2);
}
}]);
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(view, options);
google.visualization.events.addListener(geochart,
'select', function (eventOption) {
var item = geochart.getSelection();
var value = data.getValue(item[0].row, 1);
alert(value);
});
}
google.setOnLoadCallback(drawMarkersMap);
/script
/head
body style=font-family: Arial;border: 0 none;
div id=visualization/div
/body
/html
Pleae kindly help me to solve the problem.
--
You received this message because you are subscribed to the Google Groups
Google Visualization API group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
Re: [visualization-api] Tooltip Problem
The GeoChart is an implementation of a choropleth
maphttp://en.wikipedia.org/wiki/Choroplethwhich, given that there
can only be one color per region, means that you
can only have one value per region. That means that the behavior that
you're seeing is due to only the last value being picked up for a region.
If you can describe to me how you think multiple values per region should
look on a map, I can try to help you. Until then, you can show multiple
maps, each displaying Sony, Apple, Samsung, etc. Or you can make some
buttons to switch between the maps. You can also simply choose one of the
values (if you don't care about the color), and describe what's going on in
the tooltips, for example, the tooltip for KERALA might look like Apple:
1, Nokia: 7000. In the next release, the GeoChart tooltips will
support HTML and newlines, but currently they do not, so you have to use
other separators, like commas.
- Sergey
On Wed, Jul 10, 2013 at 5:48 AM, siva kumar tsivakumar1...@gmail.comwrote:
Hi,
this is My dataTable:
['State', 'Income', 'Product'],
['KERALA', 1, Apple],
['KERALA', 7000, Nokia],
['Tamil nadu', 1, Apple],
['Tamil nadu', 2, SamSung],
['west Bengal', 5000,Sony]
i want to show the tooltip like,
Apple 1
Samsung 2 in Tamilnadu
and
Apple 1
Nokia 7000 in Kerala
but its takes only 2 value.
is it possible to do that?
This is My Javascript Code:
html
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
titleGoogle Visualization API Sample/title
script type=text/javascript src=http://www.google.com/jsapi;/script
script type=text/javascript
google.load('visualization', '1.1', { packages: ['geochart'] });
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Income', 'Product'],
['KERALA', 1, Apple],
['KERALA', 7000, Nokia],
['Tamil nadu', 1, Apple],
['Tamil nadu', 2, SamSung],
['west Bengal', 5000,Sony]
]);
var options = {
region: 'IN',
resolution: 'provinces',
width: 400,
height: 400,
colorAxis: {
//values: [-1, 0, 1],
colors: ['#FF']
}
};
options['tooltip'] = { isHtml: true };
// create a DataView to transform the data into the format you need
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
calc: function (dt, row) {
// set the color values based on the 4th column
var val = dt.getValue(row, 1);
return val;
// if positive, return 1
// if negative, return -1
// if 0, return 0
//return (val 0) ? 1 : ((val 0) ? -1 :
0);
}
}, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
// set up the tooltip
//alert(dt.getValue(row, 1) + ' 2010:\n' +
dt.getValue(row, 2) + ' 2011:\n ' + dt.getValue(row, 3));
return dt.getValue(row, 1) + dt.getValue(row, 2);
}
}]);
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(view, options);
google.visualization.events.addListener(geochart,
'select', function (eventOption) {
var item = geochart.getSelection();
var value = data.getValue(item[0].row, 1);
alert(value);
});
}
google.setOnLoadCallback(drawMarkersMap);
/script
/head
body style=font-family: Arial;border: 0 none;
div id=visualization/div
/body
/html
Pleae kindly help me to solve the problem.
--
You received this message because you are subscribed to the Google Groups
Google Visualization API group.
To unsubscribe from this group and stop receiving emails from it, send an
email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to
google-visualization-api@googlegroups.com.
Visit this group at
http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to the Google Groups
Google Visualization API group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
