Dashboards & Visualizations
Highlighted

Why am I getting Highcharts errors "Cannot read property 'rows' of undefined" and "highcharts is not a function" in my HTML Dashboard?

New Member

In my HTML Dashboard, I have implemented a few Highcharts charts and matching table elements. Their data is populated from the same search managers, meaning that each table and chart share the same search manager.

The tables always render, so the searches are OK. But, the Highcharts charts do NOT always render -- sometimes they do, sometimes they don't. If I click "Refresh" on the table, to get the data again, THEN the chart gets drawn.

My code is nothing unusual. It's based on existing examples:

var search1Results = search1.data("results");
search1Results.on("data", function() {
    var search1Data = search1Results.data().rows;
    // Parse data
    // Create the chart
});

The fact that it works sometimes is maddening. And the only clues I have are from Google Chrome's Console:
> Uncaught TypeError: $(...).highcharts is not a function
...and...
> Uncaught TypeError: Cannot read property 'rows' of undefined

My only guess is that the chart script is getting ahead of the search results. But how could this be, if the chart code doesn't fire unless there are search results? And why am I getting the "highcharts is not a function" error, but it can create the chart anyway?

I would appreciate any and all help! Please and thank you!

(Note: I have a related, but not exactly the same, question that is titled "How to check if a table rendered in an HTML dashboard before running JavaScript for a chart?" I didn't think all the issues could be contained in one question.)

0 Karma
Highlighted

Re: Why am I getting Highcharts errors "Cannot read property 'rows' of undefined" and "highcharts is not a function" in my HTML Dashboard?

New Member

I'm new to Splunk, also not sure if this applies to you, so take this with a grain of salt. I have a dashboard where if the user presses a button then a search will be run and I will grab the results with the same method you used above. I was able to get this to run correctly the first time I pressed the button, however every subsequent time I got ,"Cannot read property 'rows' of undefined", and sometimes the results would be correct and sometimes they wouldn't.

I started logging search1Results outside and inside of the on('data') event handler and found that my issue had to do with the fact that I was creating more than one event handler, hence the reason I got it to work the first time and not subsequent. I still wanted to keep the event listener inside the button click listener so my fix was to just remove the on('data') event handler when I was finished with it.

My code was something like this before. Notice that each time I clicked the button I applied a new event handler:

mybutton.on('click', function () {
    //stuff
    var search1Results = search1.data("results");
    search1Results.on("data", function() {
        var search1Data = search1Results.data().rows;
    });
});

This is my functioning code at the moment:

mybutton.on('click', function () {
    //stuff
    var search1Results = search1.data("results");
    search1Results.on("data", function() {
        var search1Data = search1Results.data().rows;
        search1Results.off('data');  //Remove the event handler
    });
});

Not sure if this applies to you or not. But hope it helps. I'm sure it can be done nicer. 🙂

0 Karma