Good morning, I'm working on creating a combochart, with custom tooltips; another graph when passing the pointer over a bar, but I could not make the attached graphic the code that I carry as well as the page that shows the example (in the section Placing charts in tooltips): link
<html>
<head>
<style>
body{margin:0; padding:0; border:0}
</style>
<script type="text/javascript" src="jquery/Api_Google.js"></script>
<script type="text/javascript">
google.load('visualization','1', {'packages':['corechart']});
google.setOnLoadCallback(drawTooltipCharts);
// Set up data for visible chart.
var primaryData = [
// ['FECHA','PPTO - 2016','REAL - 2015','REAL - 2016'],
['ENE', 22261, 20887, 23246],
['FEB', 23605, 21239, 24432],
['MAR', 22222, 21443, 22581],
['ABR', 24054, 22005, 24030],
['MAY', 23687, 22138, 24688],
['JUN', 25976, 22767, 25465]
];
// Set up data for your tooltips.
var tooltipData_ppto = [
['FECHA', 'ENE', 'FEB', 'MAR', 'ABR', 'MAY', 'JUN'],
['Personal', 2598, 2240, 389, 354, 234, 72],
['G. Oper.', 2682, 2456, 387, 384, 194, 101],
['Deprec.', 2733, 1988, 367, 350, 173, 116],
['A. Fijos', 354, 387, 367, 402, 388, 395],
['O. Cargos', 72, 101, 116, 227, 217, 138],
['G. Admon.', 234, 194, 173, 233, 202, 197],
];
var tooltipData_real2015 = [
['FECHA', 'ENE', 'FEB', 'MAR', 'ABR', 'MAY', 'JUN'],
['Personal', 2598, 2240, 389, 354, 234, 72],
['G. Oper.', 2682, 2456, 387, 384, 194, 101],
['Deprec.', 2733, 1988, 367, 350, 173, 116],
['A. Fijos', 354, 387, 367, 402, 388, 395],
['O. Cargos', 72, 101, 116, 227, 217, 138],
['G. Admon.', 234, 194, 173, 233, 202, 197],
];
var tooltipData_real2016 = [
['FECHA', 'ENE', 'FEB', 'MAR', 'ABR', 'MAY', 'JUN'],
['Personal', 2598, 2240, 389, 354, 234, 72],
['G. Oper.', 2682, 2456, 387, 384, 194, 101],
['Deprec.', 2733, 1988, 367, 350, 173, 116],
['A. Fijos', 354, 387, 367, 402, 388, 395],
['O. Cargos', 72, 101, 116, 227, 217, 138],
['G. Admon.', 234, 194, 173, 233, 202, 197],
];
var tooltipOptions = {
title: '',
legend: 'none',
width: 500, height:300,
seriesType: 'bars',
chartArea:{width:'78%',height:'75%'},
bar: {groupWidth:'90%'}
};
// Draws your charts to pull the PNGs for your tooltips.
function drawTooltipCharts() {
var data = new google.visualization.arrayToDataTable(tooltipData_ppto);
var view = new google.visualization.DataView(data);
// For each row of primary data, draw a chart of its tooltip data.
for (var i = 0; i < primaryData.length; i++) {
// Set the view for each event's data
view.setColumns([0, i + 1, {calc: "stringify",
sourceColumn: i+1,
type: "string",
role: "annotation" }]);
var hiddenDiv = document.getElementById('hidden_div');
var tooltipChart = new google.visualization.ComboChart(hiddenDiv);
google.visualization.events.addListener(tooltipChart, 'ready', function() {
// Get the PNG of the chart and set is as the src of an img tag.
var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';
// Add the new tooltip image to your data rows.
primaryData[i][2] = tooltipImg;
});
tooltipChart.draw(view, tooltipOptions);
}
drawPrimaryChart();
}
function drawPrimaryChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Event');
data.addColumn('number', 'Real2015');
data.addColumn({ type: 'string', label: 'Tooltip Chart', role: 'tooltip', 'p': {'html': true}});
var options = {
title:'',
bar: {groupWidth:'95%'},
animation:{startup: true, duration: 500},
legend: {position: 'top' },
width: 1000, height:420,
tooltip: {isHtml: true},
chartArea:{width:'85%',height:'75%'},
hAxis:{title: ''},
vAxis:{title:'', minValue: 0},
seriesType: 'bars',
series: {0: {type: 'line', pointShape: 'circle', pointSize: 8, color: '#903C39'},
1: {color: '#B4B4B4'}, 2: {color: '#456287'}}
};
// Add your data (with the newly added tooltipImg).
data.addRows(primaryData);
var visibleDiv = document.getElementById('visible_div');
var primaryChart = new google.visualization.ComboChart(visibleDiv);
primaryChart.draw(data, options);
}
</script>
</head>
<body>
<div id="hidden_div" style="display:none"></div>
<div id="visible_div" style="height:300px"></div>
</body>
</html>