bburim/flot

jQuery Flot Charts extension for the Yii 2 framework

About

This is extension for Yii 2., _(*1)

It is actually a wrapper for jQuery Flot Charts library., _(*2)

If you want to learn more about Flot options and documentation, please visit http://www.flotcharts.org/, _(*3)

Installation

As all Yii 2 Extensions, this one should be installed through Composer too., _(*4)

Composer can be downloaded here: https://getcomposer.org/, _(*5)

Extension in the list of Composer packages: https://packagist.org/packages/bburim/flot, _(*6)

Installation command:, _(*7)

php composer.phar require "bburim/flot"

Basic Usage

<?php
use bburim\flot\Chart as Chart;

echo Chart::widget([
    'data' => [
        [
            'label' => 'line', 
            'data'  => [
                [1, 1],
                [2,7],
                [3,12],
                [4,32],
                [5,62],
                [6,89],
            ],
            'lines'  => ['show' => true],
            'points' => ['show' => true],
        ],
        [
            'label' => 'bars', 
            'data'  => [
                [1,12],
                [2,16],
                [3,89],
                [4,44],
                [5,38],
            ],
            'bars' => ['show' => true],
        ],
    ],
    'options' => [
        'legend' => [
            'position'          => 'nw',
            'show'              => true,
            'margin'            => 10,
            'backgroundOpacity' => 0.5
        ],
    ],
    'htmlOptions' => [
        'style' => 'width:400px;height:400px;'
    ]
]);
?>

Options and parameters

This extension allows you to provide some parameters to configure how your chart will be rendered., _(*8)

tagName - DOM element tag name. Default value is 'div';, _(*9)

htmlOptions - HTML options for DOM container., _(*10)

options - options array, which will be converted to JSON and transfered to jQuery as third parameter when calling function to create chart., _(*11)

data - data array, which will be converted to JSON and transfered to jQuery as second parameter when calling function to create chart., _(*12)

excanvas - true/false. Whether to include excanvas.js or not., _(*13)

Using plugins

Sometimes you need to include some Flot plugin to make your Chart more interactive., _(*14)

The following example shows what needs to be added to include, for example, jquery.flot.canvas.js extension:, _(*15)

<?php
use bburim\flot\Chart as Chart;
use bburim\flot\Plugin as Plugin;

echo Chart::widget([
    'data' => [
    // As before
    ],
    'options' => [
    // As before
    ],
    'htmlOptions' => [
    // As before
    ],
    // Use `plugins` attribute to load required plugins
    'plugins' => [
        // Use helper class with constants to specify plugin type
        Plugin::CANVAS
    ]
]);
?>

The following plugins are currently available as constants:, _(*16)

jquery.flot.canvas.js as Plugin::CANVAS, _(*17)

jquery.flot.categories.js as Plugin::CATEGORIES, _(*18)

jquery.flot.crosshair.js as Plugin::CROSSHAIR, _(*19)

jquery.flot.errorbars.js as Plugin::ERRORBARS, _(*20)

jquery.flot.fillbetween.js as Plugin::FILLBETWEEN, _(*21)

jquery.flot.image.js as Plugin::IMAGE, _(*22)

jquery.flot.navigate.js as Plugin::NAVIGATE, _(*23)

jquery.flot.pie.js as Plugin::PIE, _(*24)

jquery.flot.resize.js as Plugin::RESIZE, _(*25)

jquery.flot.selection.js as Plugin::SELECTION, _(*26)

jquery.flot.stack.js as Plugin::STACK, _(*27)

jquery.flot.symbol.js as Plugin::SYMBOL, _(*28)

jquery.flot.threshold.js as Plugin::THRESHOLD, _(*29)

jquery.flot.time.js as Plugin::TIME, _(*30)