Search code examples
phpyii2formatpie-chartflot

Yii2 : Flot charts extension labelFormatter usage


I'm trying to utilise the Yii2 Flot extension with more or less success. However, I'm having trouble altering the labels of a pie-chart using a labelFormatter function.

This is the extension I'm using: bburim/flot

Here is the code I have so far, it generates a nice chart, but I cannot alter the labels. Any help is appreciated.

echo Chart::widget(
    [
        'data' => [
            ['label' => 'Series1', 'data' => [1, 12]],
            ['label' => 'Series2', 'data' => [1, 16]],
            ['label' => 'Series3', 'data' => [1, 89]],
            ['label' => 'Series4', 'data' => [1, 44]],
            ['label' => 'Series5', 'data' => [1, 38]],
        ],
        'options' => [
            'series' => [
                'pie' => [
                    'show' => true,
                    'label' => [
                        'show' => true,
                        'treshold' => 0.1,
                        'radius' => 0.6,
                        'value' => 'value',
                    ],
                ],
            ],
            'grid' => [
                'hoverable' => true,
            ],
            'legend' => [
                'position' => 'nw',
                'show' => true,
                'font' => [
                    'size' => 16,
                ],
                'margin' => 10,
                'backgroundOpacity' => 0.5,
            ],
        ],
        'plugins' => [
            Plugin::PIE,
        ],
        'htmlOptions' => [
            'class' => 'chartdiv',
        ],
    ]
);

Solution

  • That is a pretty broad term to say customize, I will assume it means providing custom label text, its pretty simple and straight forward you just need to use the new JsExpression() for the callback function to work correctly

    echo Chart::widget(
        [
            'data' => [
                ['label' => 'Series1', 'data' => [1, 12]],
                ['label' => 'Series2', 'data' => [1, 16]],
                ['label' => 'Series3', 'data' => [1, 89]],
                ['label' => 'Series4', 'data' => [1, 44]],
                ['label' => 'Series5', 'data' => [1, 38]],
            ],
            'options' => [
                'series' => [
                    'pie' => [
                        'show' => true,
                        'label' => [
                            'show' => true,
                            'treshold' => 0.1,
                            'radius' => 0.6,
                            'value' => 'value',
                        ],
                    ],
                ],
                'grid' => [
                    'hoverable' => true,
                ],
                'legend' => [
                    'labelFormatter' => new JsExpression("function(label, series) {
                        // series is the series object for the label
                        return '<a href=\"#' + label + '\">Custom Label for '+series.label+'</a>';
                    }"),
                    'position' => 'nw',
                    'show' => true,
                    'font' => [
                        'size' => 16,
                    ],
                    'margin' => 10,
                    'backgroundOpacity' => 0.5,
                ],
            ],
            'plugins' => [
                Plugin::PIE,
            ],
            'htmlOptions' => [
                'class' => 'chartdiv',
            ],
        ]
    );
    

    On a side note I wont use that repo as the owner seems to be unresponsive since 2015 not a single reply on the issues, you might have to maintain or fix the bugs your self so better fork the repo and use your own customized version