KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Google Chart Events #3010

Open Vijay opened this topic on on Mar 13, 2023 - 6 comments

Vijay commented on Mar 13, 2023

Hello KoolReport Team,

I see you are providing these events for google chart : https://www.koolreport.com/docs/google_charts/overview/#client-events

I want to fire these events : https://developers.google.com/chart/interactive/docs/gallery/barchart#events

is there any possibilities? please help as I want to change the "annotation text" position to the center of the box and it can only be possible through the Google Chart's Ready event call.

KoolReport commented on Mar 13, 2023

This is a nice question. It is possible, a little tricky but possible, for example we want to register animationfinish event, we'll do this:

BarChart::create([
    "name"=>"myBarChart",
    "onReady"=>"function(){
        google.visualization.events.addListener(myBarChart.chart, 'animationfinish', function(){
            //Do something here
        });
    }"
])

Hope that helps.

Vijay commented on Mar 13, 2023

thanks, that works.

Vijay commented on Mar 16, 2023

ok I want to fire "onmouseover" event and I can't is there a way?

https://developers.google.com/chart/interactive/docs/gallery/barchart#events

Vijay commented on Mar 16, 2023

Apologies about my last comment, I got it now.

Vijay commented on Mar 16, 2023

Ok, above code throws the error in console.

ReferenceError: google is not defined

Is there a way I capture "google" object within "KoolReport" or should I have to include JS (separately) for google chart?

Sebastian Morales commented on Mar 17, 2023

Since google chart object is loaded by a loader js users might want to check if it's loaded yet before adding custom events. Pls try this onReady function:

        ...
        'onReady' => "function() {
            function isGoogleChartLoaded() {
                if(typeof google === 'undefined') {
                    console.log('google chart not loaded yet');
                    window.setTimeout(isGoogleChartLoaded, 100); /* check if google chart is loaded every 100 milliseconds*/
                } else {
                    console.log('google chart loaded');
                    addCustomGoogleChartEvents();
                }
            }
            isGoogleChartLoaded();
        }"

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
wiki
solved

None