Applying callback functions

[adummy832]

I have this bar chart, just a standard one and I want to modify how yAxes labels are showing without decimals, however I have this weird thing going on. Here's my config options. Can you explain why is this happening & what is the possible workaround for this? Thank you.

'clientOptions' => [
                    'scales' => [
                        'yAxes' => [[
                            'ticks' => [
                                'beginAtZero' => 'true', # Works
                                'callback' => function($label, $index, $labels) { // Breaks.
                                    if (floor($label) === $label) return $label;
                                }
                                # Console : TypeError: ({}) is not a function[Learn More] ???
                                # Errors  : TypeError: element._view is undefined ???
                            ]
                        ]],
                    ],
                ], 

[adummy832]

I just found out the answer myself . For those who are struggling with this. import JsExpression. :-)

use \yii\web\JsExpression;

'prop' => new JsExpression(' // your JS code here. ')

[tonydspaniard]

@adummy832 sorry for the delay. I was about to write that and you were faster :)

The JsExpression was built for that purpose and should be remembered not only for this widget but for all that allow the writing of a js callback function (ie ActiveForm)

Thank you for your time @adummy832 very kind of you to expose your findings.

[adummy832]

Still thanks for the reply the dude, you are awesome! Been stuck on this for hours XD. Are there still some hidden 'Class' treasure in Yii like this one? If so, could you recommend that so that I can check that out? BTW, thanks for this awesome plug-in dude. Godspeed! :-)

[tonydspaniard]

Yii is full of goodies... I highly recommend you to read its base classes code (don't forget its classes).

I always do that with every framework I work with. Best way to get the hidden wonders of other people's brains.

[tonydspaniard]

Yii is full of goodies... I highly recommend you to read its base classes code (don't forget its HELPER classes)

[andrerahardjo97]

How you use it?
I want to do the same thing.
But I don't know how where I should place the JsExpression.
The code I want to implement looks like this:

options: {
    scales: {
        yAxes: [{
            ticks: {
                callback: function (value) {
                    return numeral(value).format('$ 0,0')
                }
            }
        }]
    }
}

And this is my code in PHP:

echo ChartJs::widget(
    [
        'type' => 'bar',
        'options' => [
            'height' => 600,
            'width' => 1400,
            'scales' => [
                'yAxes' => new JsExpression(
                    "
                    [{
                        ticks: {
                            callback: function (value) {
                                return numeral(value).format('$ 0,0')
                            }
                        }
                    }]
                    "
                )
            ],
        ],
        'data' => [
            'labels' => $arrayChart['label'],
            'datasets' => [
                [
                    'label' => 'Total Pendapatan',
                    'backgroundColor' => '#38a9ff',
                    'data' => $arrayChart['isi'],
                ],
            ],
        ],
    ]
);

It doesn't work, the number is still not formatted, and I don't know the right way to do it.
Sorry if my english is bad.

edit:
It's printed like this on the HTML, and I don't know what's wrong. (I beautified the code)

<canvas id="w0"
    width="1222"
    height="523"
    scales="{"yAxes":
                    [{
                        ticks: {
                            callback: function (value) {
                                return numeral(value).format(" $="" 0,0')="" }="" }]="" }'=""
    style="display: block; width: 1222px; height: 523px;"
    class="chartjs-render-monitor"></canvas>

[cristian-dev-it]

I just found out the answer myself . For those who are struggling with this. import JsExpression. :-)

use \yii\web\JsExpression;

'prop' => new JsExpression(' // your JS code here. ')

This works for me! I was trying to change the tooltips content