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.)
↧