Re: Style cursor pointer en pie chart

[asgallant]

You need to take a two-pronged approach to fix the problem.  You can use pure CSS to do this in Firefox, Chrome, Safari, Opera, and IE 9.  In IE 8 and earlier, you need to modify the CSS inside the iFrame used by the chart.  I wrote an example here: http://jsfiddle.net/asgallant/W3Pss/ 

The example uses the jQuery library to help with browser detection and accessing the iFrame's contents.

On Tuesday, August 28, 2012 6:46:23 PM UTC-4, james0928 wrote:

Hola, estoy generando una grafica de torta(pie chart), para mostrar ciertos valores, los cuales quisiera que al pasar el mouse por encima de cada porcion de la grafica el cursor se convierta en mano, ya que al dar click sobre cada porcion me lleva a una pagina que le asigne. intente con char_div.style.cursor:"hand", pero no funciono agradesco cualquier aporte

[james0928]

perdon por agradecer tan tarde, me fue de mucha ayuda, pero no funciona para graficas de barras si me pudiera orientar tambien para las de barras se lo agradezco muchisimo.

[asgallant]

Here's the version for BarCharts: http://jsfiddle.net/asgallant/euWwe/

[james0928]

Gracias por responder.

No se que estoy haciendo mal pero no me esta funcionando, aqui dejo el codigo para ver si me puedes orientar.

css
.path_bar svg > g:nth-of-type(2) > g:nth-of-type(1) > g:nth-of-type(2) > g
    {
           cursor: pointer
    }

contenedor
<div class="path_bar" id="Chart_divAdministracion"></div>

javascript
<script type="text/javascript">
/*********************************************GENERAMOS LA GRAFICA******************************************************/
 
    drawChartR();
 
    function drawChartR() {
   
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Mes');
        data.addColumn('number', 'Ingresos');
        data.addRows([
               
                ['Enero',50000000],
                ['Febrero',40000000],
               
                ]);
   
        // Set chart options
        var options = {'title':'Ingresos Admin. Enero y febrero $90000000',
                       'width':400,
                       'height':300,
                       'min':0};
   
        var chartR = new google.visualization.ColumnChart(document.getElementById('Chart_divAdministracion'));
               
        chartR.draw(data, options);
      }
/*****************************************FIN GRAFICA*****************************************************************/
</script>

lo esoty porbando en mozilla

[james0928]

Haciendo pruebas me doy cuenta que no funciona cuando le pongo el atributo title, si le quito el title a la grafica si toma el estilo, pero no entiendo es porque pasa esto

[asgallant]

The title adds another element to the DOM, which is probably pushing some of the "g" elements down, so they aren't in the right place to be matched by the "nth-of-type" css pseudo-selectors.  Try one of these and see if it works:

.Path_bar svg > g:nth-of-type(2) > g:nth-of-type(1) > g:nth-of-type(3) > g {
    cursor: pointer;
}

.Path_bar svg > g:nth-of-type(2) > g:nth-of-type(2) > g:nth-of-type(2) > g {
    cursor: pointer;
}

.Path_bar svg > g:nth-of-type(3) > g:nth-of-type(1) > g:nth-of-type(2) > g {
    cursor: pointer;
}

I also noticed that you left out the javascript that handles IE < 9 - that's fine if you don't have a user base with old versions of IE, or if you don't care that they don't get the pointer cursor.  If you do need it to work in IE < 9, you'll have to copy the javascript from my previous post, and play around with the numbers in the ":eq(...)" selectors to match the right elements.

[james0928]

Perfecto me funciono la ultima opcion que me envio

.Path_bar svg > g:nth-of-type(3) > g:nth-of-type(1) > g:nth-of-type(2) > g {
    cursor: pointer;

Muchas gracias hacia mucho llevaba lidiando con este problema y gracias a usted lo e resuelto.

[asgallant]

You're welcome.