kevinkhill / lavacharts

Lavacharts is a graphing / charting library for PHP 5.4+ that wraps Google's Javascript Chart API.
http://lavacharts.com
Other
620 stars 142 forks source link

event Object Passed in is null #349

Open jmichaelterenin opened 1 month ago

jmichaelterenin commented 1 month ago

What Version?

3.1.14

Issue

Please describe the issue. I've had Lavacharts installed and used for many years. I recently had a requirement whereby I needed to access the event object for mouse coordinates when clicking on a point in the Combochart. I Was already using event.ready for doing some small UI changes to the resulting chart. I added the event.select and I am able to access the chart object.

However, in neither callback is the event object made available (is null). The injected script is below:


<script type="text/javascript">

                                    function chartReady (event, chart) {
                                        console.log('INSIDE chartReady', event);
                                        $.each($('text'), function (index, label) {
                                                var labelText = $(label).text();
                                                if (labelText.indexOf('TT') == 0) {
                                                    labelText = '<tspan class="spread">'+labelText.substr(2)+'</tspan>';                                    
                                                    $(label).html(labelText);
                                                }
                                                if (labelText.split(' ').length == 2) {
                                                    labelText = '<tspan class="newday">'+labelText+'</tspan>';                                  
                                                    $(label).html(labelText);                                   
                                                }    
                                        });                                     
                                    }

                                    function selectHandler (weirdNull, chart, data) {
                                        // Useful for using chart methods such as chart.getSelection();                                     
                                        console.log(chart.getSelection());
                                        console.log(weirdNull);
                                        console.log(chart.container);
                                        console.log(data);
                                        if (chart.getSelection().length == 1) {     
                                            console.log(chart.getSelection()[0].row);
                                            console.log(data.Wf[chart.getSelection()[0].row].c[10]);        
                                        }   
                                    }

                                </script>
                                @combochart('Spread', 'spreadgraph')

I see the code that does what you indicate in the docs: Note: When the chart is rendered, your function will be wrapped with lava.event() which will give your function access to the event and chart objects.

                                            google.visualization.events.addListener(this.chart, "ready", function(event) {
                                                return lava.event(event, this, chartReady);
                                            }
                                            .bind(this));

                                            google.visualization.events.addListener(this.chart, "select", function(event) {
                                                return lava.event(event, this, selectHandler);
                                            }
                                            .bind(this));

Controller Code (chart creation code)

$linechart = Lava::ComboChart('Spread', $spreadlines,
                        [
                            'title' => 'Spread Graph',                      
                            'height' =>  1200,
                            'width' => 1600,
                            'events' => [
                                'ready' => 'chartReady',
                                        'select' => 'selectHandler'
                            ],
                        ]
                    );

I've searched for existing issues )open or closed) that experience this, but nothing is clearly stated indicating this as a problem. Something I'm doing wrong?

jmichaelterenin commented 1 month ago

I've gotten around the issue by adding a click handler for any chart interaction in the chartReady function, and adding the mouse X/Y coordinates to the element's dataset, to be picked up by the selectHandler function. If there's a simpler solution to my problem that provides the event object within chartReady and selectHandler, please share (anyone) at your convenience.