How can I use HTML tooltip with trigger:'both' in Google Charts

I have to show HTML tooltip (using Google Charts) when the user click an hover de column bars, I've coded this and it shows the tooltip when the user hover the column bar:

<script type="text/javascript">
    var colores = ['#1D1E55', '#859DC4', '#6D165E'];
    var indiceColorAsignado = 0;
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var propiedadCol = {
            type: 'string',
            role: 'annotation'
        };
        var dataTable = google.visualization.arrayToDataTable([
            ['Id', {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}<?php
                    $aux = $encabezados;
                    $conta = 1;
                    foreach ($aux as $key => $value) {
                        if ($conta < 3) {
                            unset($aux[$key]);
                            $conta++;
                        };
                    }
                    $complementoEncabezado = "";                                                                                        
                    foreach ($aux as $key => $value) {
                        $complementoEncabezado .= ",'".$value."',propiedadCol";                                                                                         
                    }
                    $complementoEncabezado .= "],";
                    echo $complementoEncabezado;
                ?>
                <?php
                    $renglodDeDatos = "";
                    $nombresToolTip = $encabezados;
                    unset($nombresToolTip['id']);
                    foreach ($datosAGraficar as $key => $value) {
                        $conta = 1;
                        foreach ($value as $llave => $valor) {
                            if ($conta != 2) {
                                if ($llave == "id") {
                                    $valoresToolTip = $value;
                                    unset($valoresToolTip['id']);
                                    $renglodDeDatos .= "['".$valor."',contenidoHTML(".json_encode($nombresToolTip).",".json_encode($valoresToolTip).")";
                                } else {
                                    $renglodDeDatos .= ",".$valor.",''";
                                }                                   
                            }
                            $conta++;
                        }
                        $renglodDeDatos .= "],";
                    }
                    echo $renglodDeDatos;
                ?>
        ]);

        var options = {
            title: '<?php echo $titulo_grafica; ?> del PGD',
            hAxis: {
                title: '<?php echo $titulo_grafica ?>',
                titleTextStyle: {
                    color: 'black',
                    bold:true,
                },
            },
            vAxis: {
                title: 'Porcentaje',
                titleTextStyle: {
                    color: 'black',
                    bold:true,

                },
            },
            // colors: ['#7F6FD2', '#94F29C', '#F8ECBC'],
            // colors: ['#AF9965', '#DAC674', '#F3E79A'],
            // colors: ['#EE7009', '#0A7AAC', '#504C4B'],
            // colors: ['#0A19BB', '#02073A', '#4D5073'],
            colors: colores,
            // backgroundColor: {
            //  stroke: 'red',
            //  strokeWidth: 10,
            // },
            focusTarget: 'category',
            selectionMode: 'multiple',
            tooltip: {
                isHtml: true,
            },
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(dataTable, options);
        google.visualization.events.addListener(chart, 'select', miFuncion);
        var columnas = new Array();

        function miFuncion() {
            var selection = chart.getSelection();
            var message = '';
            for (var i = 0; i < selection.length; i++) {
                var item = selection[i];
                if (item.row != null && item.column != null) {
                    var str = dataTable.getFormattedValue(item.row, item.column);
                    message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
                } else if (item.row != null) {
                    var str = dataTable.getFormattedValue(item.row, 0);
                    message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
                } else if (item.column != null) {
                    var str = dataTable.getFormattedValue(0, item.column);
                    var indice = columnas.indexOf(item.column);
                    if (indice != -1) {
                        columnas.splice(indice, 1);
                        for (var j = 0; j < dataTable.getNumberOfRows(); j++) {
                            dataTable.setValue(j, item.column + 1, '');
                        };
                    } else{
                        columnas.unshift(item.column);
                        for (var j = 0; j < dataTable.getNumberOfRows(); j++) {
                            dataTable.setValue(j, item.column + 1, (dataTable.getValue(j, item.column)).toString() + '%');
                        };
                    };
                    console.log('columnas '+columnas);
                    message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
                };
            };
            if (message == '') {
                message = 'nothing';
            };
            console.log('You selected ' + message);
            chart.draw(dataTable, options);
        }

        function contenidoHTML(nombresToolTip,valoresToolTip) {
            var indiceObjeto = 1;
            var toolTipHTML = '<div style="width:200px; text-align:justify; padding:5px 5px 5px 5px;">';
            for(var elemento in nombresToolTip) {
                if (indiceObjeto == 1) {
                    toolTipHTML += '<b>' + nombresToolTip[elemento] + ':</b> ' + valoresToolTip[elemento] +'<br>';
                    indiceObjeto++;
                } else {
                    toolTipHTML += '<div style="background-color:'+ colores[indiceColorAsignado] +'; padding-left:5px; color:#FFFFFF;"><b>'+ nombresToolTip[elemento] +':</b> '+ (parseFloat(valoresToolTip[elemento])).toFixed(2) +'%</div>'
                    indiceColorAsignado++;
                };
            };
            toolTipHTML += '</div>';
            console.log('HTML '+toolTipHTML);
            // return '<div style="width:200px; text-align:justify; padding:5px 5px 5px 5px;">Nombre <br><hr><div style="background-color:#1D1E55; padding-left:5px; color:#FFFFFF;"><b>Avance real:</b> 1000%</div><div style="background-color:#859DC4; padding-left:5px; color:#FFFFFF;"><b>Grado de cumplimiento:</b> 400%</div><div style="background-color:#6D165E; padding-left:5px; color:#FFFFFF;"><b>Avance promedio:</b> 250%</div></div>';
            console.log('indiceColorAsignado '+ indiceColorAsignado);
            indiceColorAsignado = 0;
            return toolTipHTML;
        }
    }
</script>

How can I get both events(click and hover) in order to show the HTML tooltip? Thank a lot

Answers:

Answer

Just set the option:

tooltip: {
    isHtml: true,
    trigger: 'both'
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.