Skip to content

Latest commit

 

History

History
71 lines (57 loc) · 2.41 KB

README.md

File metadata and controls

71 lines (57 loc) · 2.41 KB

Yii2 jqPlot widget

This extension provides jqPlot integration for the Yii framework 2.0.

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features:

  • Numerous chart style options.
  • Date axes with customizable formatting.
  • Up to 9 Y axes.
  • Rotated axis text.
  • Automatic trend line computation.
  • Tooltips and data point highlighting.
  • Sensible defaults for ease of use.

Computation and drawing of lines, axes, shadows even the grid itself is handled by pluggable "renderers". Not only are the plot elements customizable, plugins can expand functionality of the plot too! There are plenty of hooks into the core jqPlot code allowing for custom event handlers, creation of new plot types, adding canvases to the plot, and more!

Numerous line style options with 6 built in marker styles! Horizontal and vertical Bar charts! Shadow control on lines, markers, the grid, everything!

Drag and drop points with auto updating of data! Log Axes with flexible tick marks! Trend lines computed automatically!

Installation

Package is available on Packagist, you can install it using Composer.

composer require sizeg/yii2-jqplot

Basic usage

echo JqPlot::widget([
    'data' => [[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]
]);

The following example will render a bar chart:

echo JqPlot::widget([
    'data' => [
        [2, 6, 7, 10],
        [7, 5, 3, 2],
        [14, 9, 3, 8],
    ],
    'clientOptions' => [
        'stackSeries' => true,
        'captureRightClick' => true,
        'seriesDefaults'  => [
            'renderer' => new JsExpression("$.jqplot.BarRenderer"),
            'rendererOptions' => [
                'highlightMouseDown' => true,
            ],
            'pointLabels' => [
                'show' => true,
            ],
        ],
        'legend' => [
            'show' => true,
            'location' => 'e',
            'placement' => 'outside',
        ]
    ]
]);