Chapters

46 Chapters | 4:55:39 |

01

Symfony UX

5:34
02

Setting up Webpack Encore

5:11
03

encore watch & Code Splitting

4:06
04

Stimulus Controllers

5:53
05

Magic with Events, Properties & HTML from Ajax

4:43
06

Targets: Finding Elements

6:41
07

Actions: Listening to Events

4:43
08

Bootstrapping a "Color Selector" Form Element

9:06
09

Actions & currentTarget

6:41
10

Element.dataset

4:52
11

State in your Controller

6:26
12

The Values API

7:03
13

On Value Change Callback

8:07
14

Search Suggestions

5:49
15

Ajax with fetch(), Polyfills & async/await

5:24
16

HTML-Returning Ajax Endpoint

6:06
17

Stimulus Behaviors: stimulus-use

6:37
18

Form Submit Confirmation Controller

6:22
19

Making a Configurable, Reusable Controller

7:47
20

Multi Controller Communication

9:09
21

Listening to An Event From Another Controller

6:25
22

Ajax-Powered HTML Updates & a CSS Transition

5:13
23

Symfony UX & Chart.js

7:48
24

stimulus-bridge: How UX Packages Work

6:55
25

Extending a UX Controller

8:43
26

React (or Vue) ❤️ Stimulus

6:48
27

Pass Server Data Directly to React Props

7:02
28

Webpack Bundle Analyzer

4:58
29

Async/Dynamic import()

7:26
30

Magic: Lazy-Loading UX Controllers

5:13
31

Making your Custom Controllers Lazy

3:58
32

Product CRUD

7:42
33

Opening a Modal

8:14
34

Loading a Form into the Modal

8:46
35

Ajax-Submitting an Entire Form

6:25
36

Correcting the Form Action & Preventing Default

4:30
37

Ajax Form Response Status Codes

9:36
38

Ajax Element Reloading Controller

6:23
39

Dispatching an Event from modal-form

4:25
40

Reusing the "Reload Content" Controller

5:12
41

CSS Transitions with useTransition

7:05
42

CSS Transition Classes

5:03
43

Free 3rd Party Controllers!

4:31
44

Using the autocomplete-controller

9:45
45

Autocomplete with Transitions

6:08
46

useTransition in a Neat, Reusable Module

5:00

> JavaScript Frameworks & Tools > Symfony UX: Stimulus

Buy Access to Course

25.

Extending a UX Controller

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

13 Comments

Sort By

Login or Register to join the conversation

Yanubik 2 years ago edited HIGHLIGHTED

hello,
For chartjs 3, 'beginAtZero' have to be at the same level as 'ticks', and not in ticks.
For example, this code is OK :

        $chart->setOptions([
            'scales' => [
                'yAxes' => [
                    'ticks' => [
                        'color' => 'blue'
                    ],
                    'beginAtZero' => true
                ]
            ]
        ]);

Thanks to the author for this tutorial. the explanations are clear and detailed. very good work.

1 |

Victor SFCASTS Yanubik 2 years ago edited

Hey Yanubik,

Thanks for sharing this top with others regarding the new v3 version. I also see that the latest ChartJS version is v4 now, but seems it should work the same way as in v3.

Cheers!

|

Klaus-M 2 years ago edited

Hello there,

I want to update a chart with a select field value. Therefore, I'd like to dispatch a custom event.
But unfortunately the event isn't recognized by the controller.

Here is some code:

{{ render_chart(chart, {
    'data-controller': 'dashboard-chart',
    'data-action': 'chart:update->dashboard-chart#updateChart'
}) }}

The controller that fires the event doesn't surround the chart controller, but I guess this isn't needed.
Can you please help me? Thanks in advance.

|

weaverryan SFCASTS Klaus-M 2 years ago

Hey @Klaus-M!

Hmm. So, when a chart:update event is dispatched, this will execute the updateChart() method on your custom dashboard-chart controller. Question: who/what dispatches this chart:update event? It sounds like it's a different custom controller?

The controller that fires the event doesn't surround the chart controller, but I guess this isn't needed

Whatever fires the chart:update event must be inside the chart element... which actually isn't possible (because it's not possible to put anything inside of the element that render_chart() renders). This is because events "bubble up": you trigger an event (e.g. chart:update) on some element, and it goes up the element tree one-by-one looking for listeners. In this case, when it bubbles "up", this chart element is not a parent/ancestor, so that event never reaches this element.

Here's what I would do:

A) Remove the data-controller stuff from render_chart(). Instead, find some HTML element that surrounds both your chart and wherever your chart:update is fired from. Add the dashboard-chart controller to that element via {{ stimulus_controller() }} (and also move the data-action there to via stimulus_action().

B) And... that should be it! My guess is that you are already listening to the chartjs:connect event from inside of dashboard-chart controller so that you can gain access to the Chart instance. Even though your dashboard-chart controller is now a parent/ancestor of the "chart" element, your chartjs:connect listener will still be called on dashboad-chart (the core chartjs UX controller dispatches this event, then it will "bubble up" eventually to the element that holds your custom controller).

Let me know if this helps!

Cheers!

|

Peter L. 4 years ago edited

Not sure what changed in the configuration of Chart.js or SymfonyUX/ChartJS, but 'yAxes' params are now simple array only. Otherwise they are not working and throwing error 'Invalid scale configuration for scale: yAxes' in console . But the chart itself will still work.
For example to see if it is working ['yAxes' => ['ticks' => ['color' => 'blue']]]

|

weaverryan SFCASTS Peter L. 4 years ago edited

Hey Peter L.!

Sorry for the slow reply. Yes, that changed in chart.js 3... and you're right that it looks like I completely forgot to add a note about that. I'll do that!

Thanks!

|

Mepcuk 5 years ago

Do you have example how we can add Chart to Modal and this chart will have datetime setting - range ?

|

weaverryan SFCASTS Mepcuk 5 years ago edited

Hey Mepcuk!

Hmm. Let me answer that in 2 parts:

and this chart will have datetime setting - range

For this part, you need to find the exact Chart.js config that you need to tweak from their docs... then update that data when you create the chart (similar to what we do here): https://symfonycasts.com/screencast/stimulus/extend-chartjs#codeblock-f48ad9bdb1

how we can add Chart to Modal

For this part, later in this tutorial, we discuss opening a modal and AJAX-loading in an HTML form - https://symfonycasts.com/screencast/stimulus/modal-form

In your situation, you would do much of the same thing. The difference would be that instead of returning an HTML form from your AJAX endpoint, you would return a template that basically has this in it:


{{ render_chart(chart) }}

The magic of Stimulus takes over from there: as soon as this HTML appears on the modal, the chart UX controller would take care of the rest.

If you wanted the "datetime" from the first part of your question to be dynamic (e.g. maybe the user selects a datetime from a field and then click "show chart"), then when you make the AJAX call to the "chart" endpoint, you would send that up as an extra field - e.g. to an endpoint like /sales/chart?startDate=2020-01-01 (were the 2020-01-01 is a value you read from some date field).

Let me know if that helps!

Cheers!

|

Dimitri weaverryan 3 years ago

Hi Ryan!
I'm very interested in this point (dynamic date range on a chart) but still struggle to do it. I built a stimulus controller that handles the chart, I'm abble to get the dates set by the user from this controller but still have to get datas from my database in ordrer to rebuilt the chart. In first place from my symfony controller, I call a service that get back datas but from my stimulus controller I'm definitively lost!
Could you give some help please?

Cheers!

|

MolloKhan SFCASTS Dimitri 3 years ago

Hey Dimitri,

I think you have two options:

A) Pass the dates to your Stimulus controller in the traditional way. Fetch the data from the database from a Symfony controller action, and pass it to a Twig template, and the template will pass the dates to Stimulus as a value https://stimulus.hotwired.dev/reference/values

B) Fetch the dates from your Stimulus controller by making an API call

I hope it helps. Cheers!

|

Dimitri MolloKhan 3 years ago

Hi MolloKhan!
Thanks very much for your time and your tips.
I'm gonna dig around the API call!
Cheers!

|

elkuku 5 years ago

I think I found an easter egg for those lazy copy&pasters...
In the video you set the new value to 30 while in the code block below it is set to 3000 making the transition somewhat "shocking" ;)

|

MolloKhan SFCASTS elkuku 5 years ago edited

Hey elkuku

Lol - that's hilarious! That's why you should not copy-paste blindly... but seriously, that's our fault. I'll fix that
Thanks for letting us know. Cheers!

|

This tutorial works perfectly with Stimulus 3!

Symfony 5.2 Stimulus 2

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
        "doctrine/annotations": "^1.0", // 1.11.1
        "doctrine/doctrine-bundle": "^2.2", // 2.2.3
        "doctrine/doctrine-migrations-bundle": "^3.0", // 3.0.2
        "doctrine/orm": "^2.8", // 2.8.1
        "phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
        "sensio/framework-extra-bundle": "^5.6", // v5.6.1
        "symfony/asset": "5.2.*", // v5.2.3
        "symfony/console": "5.2.*", // v5.2.3
        "symfony/dotenv": "5.2.*", // v5.2.3
        "symfony/flex": "^1.3.1", // v1.21.6
        "symfony/form": "5.2.*", // v5.2.3
        "symfony/framework-bundle": "5.2.*", // v5.2.3
        "symfony/property-access": "5.2.*", // v5.2.3
        "symfony/property-info": "5.2.*", // v5.2.3
        "symfony/proxy-manager-bridge": "5.2.*", // v5.2.3
        "symfony/security-bundle": "5.2.*", // v5.2.3
        "symfony/serializer": "5.2.*", // v5.2.3
        "symfony/twig-bundle": "5.2.*", // v5.2.3
        "symfony/ux-chartjs": "^1.1", // v1.2.0
        "symfony/validator": "5.2.*", // v5.2.3
        "symfony/webpack-encore-bundle": "^1.9", // v1.11.1
        "symfony/yaml": "5.2.*", // v5.2.3
        "twig/extra-bundle": "^2.12|^3.0", // v3.2.1
        "twig/intl-extra": "^3.2", // v3.2.1
        "twig/twig": "^2.12|^3.0" // v3.2.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
        "symfony/debug-bundle": "^5.2", // v5.2.3
        "symfony/maker-bundle": "^1.27", // v1.30.0
        "symfony/monolog-bundle": "^3.0", // v3.6.0
        "symfony/stopwatch": "^5.2", // v5.2.3
        "symfony/var-dumper": "^5.2", // v5.2.3
        "symfony/web-profiler-bundle": "^5.2" // v5.2.3
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.12.13
        "@popperjs/core": "^2.9.1", // 2.9.1
        "@symfony/stimulus-bridge": "^2.0.0", // 2.1.0
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets", // 1.1.0
        "@symfony/webpack-encore": "^1.0.0", // 1.0.4
        "bootstrap": "^5.0.0-beta2", // 5.0.0-beta2
        "core-js": "^3.0.0", // 3.8.3
        "jquery": "^3.6.0", // 3.6.0
        "react": "^17.0.1", // 17.0.1
        "react-dom": "^17.0.1", // 17.0.1
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "stimulus": "^2.0.0", // 2.0.0
        "stimulus-autocomplete": "^2.0.1-phylor-6095f2a9", // 2.0.1-phylor-6095f2a9
        "stimulus-use": "^0.24.0-1", // 0.24.0-1
        "sweetalert2": "^10.13.0", // 10.14.0
        "webpack-bundle-analyzer": "^4.4.0", // 4.4.0
        "webpack-notifier": "^1.6.0" // 1.13.0
    }
}

Previous Chapter

Next Chapter