Displaying Charts in Admin Dashboard Widget

Problems and solutions
1

I’d like to display a chart with some data in a admin-dashboard widget. But I’m stuck with the loading of my js libs.
Due to the fact, that the widget content is done via renderWidgetContent() the libs included with event.include( assetId = "js-chart" ); are not instantiated.

Is there some example available how to get a chart rendered in the widgets?

I’m also using the chart.js extension, so I tried the quick start example from FORGEBOX: PresideCMS Extension: Chart.js for Preside

I see, that the correct code is written to the output, but a chart isn’t generated (I think due to the loading issue mentioned above).

Has someone a working example for this?

Thanks in Advance,
Michi

2

Well, at least I found a way to get on .js included via the layout file:

event.include( "/js/admin/specific/#currentHandler#/#currentAction#/", false );

But only one file of this folder is included, and I have no idea why not my second one (but I think this is a different issue).

If I trigger

new Chart( document.getElementById( 'chart72f9611de8b3424997a81ac56cec449c' ), chart72f9611de8b3424997a81ac56cec449c_config );

manually in the js console, the chart is generated, but not automatically on loading the page.

So, I’m one step ahead, but still appreaciate any help.

3

This should happen automatically. @seb - any ideas?

1 Like
4

Yes, @seb any ideas?
Please help. I’m really stuck and have no idea to get it up and running.

5

The renderWidgetContent() handler is not designed to be called directly. It’s called from a widget container, via renderWidgetContainer().

This container takes an ajax argument. If ajax is false, the chart scripts will be included in your page as you render the chart in the widget content. But if using ajax, you’ll need to have the scripts embedded in the page at the time you render the container. This is handled by adding a ajaxIncludes() method to your widget handler, which will return void but do an event.include( “chartjs” ) plus any CSS you might want.