Highcharts integration : empty chart (no data to display)

MelodyNelson

Link to test case: https://live.datatables.net/weqokoxe/1/edit
Debugger code (debug.datatables.net):
Error messages shown: none
Description of problem:

Hi,

I'm at beginner level and I'm trying, for a start, to add a pie with Highcharts (with dynamic update) like in the demo page Highcharts integration.
I'm using the code of the example page Highcharts integration.

I've kept all my datatable settings (maybe there is mistakes in it...)

I've changed the data in the HTML table (private infos).

And now, I'm trying to understand why Highcharts doesn't find the data.

Here's a test case : https://live.datatables.net/weqokoxe/1/edit

I've already used Highcharts but it's the first time I'm trying to combine it with Datatable.

Let me know if I should ask the question on the Highcharts forum.

Thank you

PS : I'm not sure my test case is correctly saved or shared, first time with this tool...
and sorry for the typos, english is not my speciality too

kthorngren

You are getting this error in the browser's console:

Uncaught ReferenceError: counts is not defined

You have the return statement at the end of the code outside of the chartData(() function. Here is the updated example:
https://live.datatables.net/weqokoxe/2/edit

BTW, thanks for the test case. It helps a lot

Kevin

MelodyNelson

Hi Kevin,
Thanks, that's progress
I'm watching your link and the pie doesn't have the right data.
Since the data is not filtered, it should have 2 slices Edinburgh + San Francisco.
Also, the pie is not updated if I'm applying a search criteria or a filter in the panes.

kthorngren

The chart is working. The styling on the container div is causing the pie chart to be small. I removed the styling.
https://live.datatables.net/weqokoxe/3/edit

Kevin

MelodyNelson

Hi Kevin,

Thanks for your time and the result on the test case.

On the test case, it works great but when I put it in my page, my datable is broken and I don't see any pie.

I can't show you a live example, I made captures screen with « redacted data », fi you have any idea to things I can look for.
I don't see any error in the console of my browser.

Maybe I should try with different versions of the JS files (jQuery, highcharts, etc)

When I add the JS for the highcharts pie

kthorngren

My guess is you have a Javascript error stopping the page load. Look in your browser's console for errors.

Kevin

MelodyNelson

The console is empty
Is it possible that something in the data send by the server could create the problem (special character for example) ?
Because I'm lost...

allan

We'd really need a link to a page showing the issue to be able to debug it. If there are no errors shown, but it isn't doing anything, then there isn't a huge amount we can do without being able to debug it.

Is it possible that something in the data send by the server could create the problem (special character for example) ?

While possible in isolation, I can't see how simply adding the Chart Javascript would trigger such an issue.

Perhaps you can show us the change you made to make it go from working to not working by including the Chart code. Was it a simple script you included, or something more?

Allan

MelodyNelson

Thanks Allan.

I think I found the cause because I did this :
- export all the data from the application
- duplicate my page and put the « offline data » in it
- everything worked great
- so I checked again the original page executed by the WebServer of the application
- still nothing in the console but when I'm viewing the source via the browser the JS code of the chart is cut and the rest is missing
- my conclusion is : the murderer is the App !

I have to wait one week before I can discuss this issue with the developper, I hope he will be able to help me.

MelodyNelson

I forgot to answer your question : yes the code is in a script

allan

Thanks for the update. Best of luck with the fix

Allan

MelodyNelson

2 weeks later... I'm waiting for a new version of the App because it was the guilty one : cuting the JS code because of the string « src » inside the JS