//Change cursor style when hovered over Google Chart

//Change cursor style when hovered over Google Chart

by Huy Dinh

HTML

<script src="https://www.google.com/jsapi"></script>
<table>
    <tr>
        <td>
            <div id="chart_div" style="width: 350px; height: 350px;"></div>
        </td>
        <td>
            <div id="table_div" style="width: 350px; height: 350px;"></div>
        </td>
    </tr>
</table>

CSS

#table_div {
    margin-left: -60px;
}
#chart_div g g g rect, #table_div g g g rect {
    cursor: pointer
}

JavaScript

//Change cursor style when hovered over Google Chart

chart1();
chart2();

function chart1() {
    google.load("visualization", "1", {
        packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Year', 'USD'],
            ['RSC Company', 1264383.00]
        ]);

        var options = {
            title: 'RSC Shipment Weekly: 27',
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
};

function chart2() {
    google.load("visualization", "1", {
        packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Year', 'Conts'],
            ['RSC Company', 10]
        ]);

        var options = {
            title: 'RSC Shipment Weeky: 27',
            colors: ['#FF0000']
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('table_div'));
        chart.draw(data, options);
    }
}