Symfony UX & Chart.js

Nube Question:
Symfony 6
Charts working
_onConnect(event) works
event.detail.chart.options.onClick = (mouseEvent) => {} works when you click the chart area

How do I listen to an input tag in the twig and update the chart when the value changes?

Hey Richard!

Nah, it's a pretty reasonable questions ;).

First, nice job setting up the JavaScript to hook into the chart!

How do I listen to an input tag in the twig and update the chart when the value changes?

Here is what I would do:

A) Add a stimulus_action() to the input element - make it call, for example, some updateChart() method on your controller.

B) Inside of _onConnect(event) (for reference for others, you correctly got that from the documentation - https://symfony.com/bundles/ux-chartjs/current/index.html#extend-the-default-behavior - set the Chart object on a property on your Stimulus controller:

_onConnect(event) {
    // set the Chart object on a property so you can use it later
    this.chart = event.detail.chart;
}

C) Finally, inside of the updateChart() method, you can use the this.chart object and any other info you need to update the chart:

updateChart(event) {
    const input = event.target;
    const inputValue = input.value;

    // to update the chart, follow the chart.js docs
    // e.g. https://www.chartjs.org/docs/latest/developers/updates.html
    this.chart.data.datasets...
}

I'm assuming that you want to update the Chart object in JavaScript by hand. Another thing you could do is make an Ajax call to some Symfony controller that returns a new, fully-rendered Chart, which you could then put onto the page to render a brand new chart.

Cheers!

Hi,

Despite installing version 1.2.0 I can't get rid of this error:
<br />"./node_modules/@symfony/ux-chartjs/dist/controller.js" contains a reference to the file "stimulus".<br />This file can not be found, please check it for typos or update it if the file got moved.<br />

It is obvious that it originates on this line var _stimulus = require("stimulus"); from the dist version or import { Controller } from 'stimulus'; from the src one.

Maybe I need to updated to @hotwired/stimulus but no sure how to get it rebuild

<b>Edit</b>
Changed dist version to var _stimulus = require("@hotwired/stimulus"); and the error is gone... too hacky for my taste

Hey danresmejia!

Hmm, well that's no fun! So, if you're using Version 3 of Stimulus (the one where the package name is "@hotwired/stimulus" and not "stimulus"), then you need version 2.0 (or greater) of symfony/ux-chartjs. Really, the only difference between the 1.x and 2.x of the UX packages is that 2.x starts importing @hotwired/stimulus (instead of stimulus).

Hope that clarifies!

Cheers!

If you have a problem with "has unmet peer dependency" or undefined package stimulus, it's because you are using stimulus v3 but by installing "composer require symfony/ux-chartjs:1.2.0" you get bundle with package reference to 'stimulus' (v2) inside vendors

So you need to install "symfony/ux-chartjs" v2+, and before it you must update symfony/flex package (composer update symfony/flex) otherwise composer will throw an error

Hey @Hainovsky,

Thanks for sharing detailed explanation. BTW exact this installation string is mentioned in course code and also there is video note ;)

Cheers!

Hi,
Does symfony ux Chartsjs work in easyadmin3 dashboard?

Hey Emilio,

Sure, it should work! With EasyAdminBundle v3 you can add Webpack Encore entries, that's exactly what you need instead of static addJsFile() method calls. You just need to import the ChartJS code in the Webpack Encore entry and write the implementation of it.

Cheers!

Sorry, I was referring to symfony / ux-chartjs. Can it be integrated into the EasyAdmin 3v dashboard?

Yes, i was integrate it yesterday

1) need rewrite layout.html.twig
1.1) create folder templates/bundles/Easyadmin/
1.2) create in this folder layout.html.twig
1.3) copy intire code from vendor/...../views/layout.html.twig yo your 1.2)
1.4) add stymulus to css and to js like a encore_entry_link_tags('app')
1.5) yarn watch
1.6) create own controller in admin/Dashboard with php code from symfony/ux and render 1.7
1.7) add your page with chart to template like in body {{ render_chart(chart) }}
1.8) enjoy your work

I do not know if it is allowed by symfonycasts rules, but i can create tutorial and make repository and put here link.

RYAN should allow me to do it.

Thanks,
What I did was add a new JS (called dashboard.js inside import './bootstrap';) in webpack.config.js and then in DashboardController.php (EasyAdmin) add the assets with -> addWebpackEncoreEntry ('dashboard'). [in configureAssets() method]
It worked!.
Not override easyadmin's layout.html, but I tried that method and it worked too.

Thanks! Also worked for me!

1) I've created <b>dashboard.js</b> in <b>/assets/scripts/</b> with content:
import '../bootstrap';

Used ".." cause of my folder structure.

2) Injected <b>dashboard.js</b> into <b>webpack.config.js</b> file:
.addEntry('dashboard', './assets/scripts/dashboard.js')

3) Overrided <b>configureAssets</b> method in DashboardController class:

public function configureAssets(): Assets {
        return parent::configureAssets()->addWebpackEncoreEntry('dashboard');
}

Hey Dmitriy,

Thank you for sharing your solution and confirming it works for you too!

Cheers!

Hey Emilio,

Great! I'm happy it worked for you. Thanks for sharing your solution with others!

Cheers!

How to create transparent background on chart Chart::TYPE_LINE? Removed this backgroundColor, nothing happens, light grey background exist....

Solved - 'backgroundColor' => 'rgba(255, 255, 255, 0)', Last parameter is transparency. Thanks to all

Hey Maxim,

You're right, good catch! I'm glad you were able to solve this by yourself

Cheers!