machour/yii2-jquery-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)

IMPORTANT

This is a temporary repository while waiting for this PR to be applied to bburim/flot It WILL be deleted soon (hopefully), _(*4)

Installation

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

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

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

Installation command:, _(*8)

php composer.phar require "machour/yii2-jquery-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., _(*9)

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

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

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

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

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

Using plugins

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

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

<?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:, _(*17)

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

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

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

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

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

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

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

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

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

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

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

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

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

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