yii2-dygraphswidget A simple graph widget for Yii 2, using the Dygraphs.js library.

  1. Changelog
  2. Requirements
  3. Installation
  4. Usage
  5. Dygraphs options
  6. Data formats
  7. Additional options
  8. JavaScript code in options
  9. Visibility checkboxes
  10. Resources

Total Downloads

This widget easily displays charts using the included open-source Dygraphs.js library.

Changelog

1.1.0 - Support for DateTime data and Data Providers. 1.0.0 - Added visibility checkboxes feature.

Requirements

Yii 2.

Installation

Composer

This is the easiest and preferred way to install the widget. Add sibilino/yii2-dygraphswidget to your composer.json file and perform a Composer Update as usual. ~~~ "require": {

"sibilino/yii2-dygraphswidget": "*"

} ~~~

Manually

If for some reason you cannot or do not want to use Composer, then you must create the widget folder manually, and then configure your Yii application to autoload the widget classes.

First, create the folder structure sibilino/yii2-dygraphswidget/widget inside the vendor subfolder of your Yii application.

Then, download the widget .zip file and extract the contents of its widget subfolder into the folder you created in the previous step.

Next, edit config/web.php and add the following entry:

[
	//...
	'aliases' => [
		'@sibilino/y2dygraphs' => '@vendor/sibilino/yii2-dygraphswidget/widget',
	],
	//...
]

Finally, remember to use the namespace sibilino\y2dygraphs when you call the widget.

Usage

In your view, create the widget with your data matrix as its data option. The widget class is found under the sibilino\y2dygraphs namespace.

use sibilino\y2dygraphs\DygraphsWidget;

echo DygraphsWidget::widget([
	'data' => $your_data,
]);

Dygraphs options

You can set the options property to pass additional options to the Dygraphs object:

echo DygraphsWidget::widget([
	'data' => $your_data,
	'options' => [
		'labels' => ['X', 'Sin', 'Rand', 'Pow'],
		'title'=> 'Main Graph',
		//...
	],
]);

Data formats

The data to display in the widget can be specified in several ways. Consider the following examples, and make sure to read the official documentation for more details:

Matrix
$data = array(
	// array( x-axis, data-series1, data-series2...)
	array(1, 25, 100),
	array(2, 50, 90),
	array(3, 100, 80),
	//...
);
URL

URL to a text file with the data.

$data = 'http://dygraphs.com/dow.txt';
Model attribute

Specify the model and attribute configuration parameters to take the data from an attribute of a yii\base\Model object:

$myModel = UserStats::findOne($id);
// Assume $myModel->loginAttempts contains a matrix of login attempts per day
echo DygraphsWidget::widget([
	'model' => $myModel,
	'attribute' => 'loginAttempts',
	'options' => [
		//...
	],
]);
Data Provider

The data property can contain a Data Provider (implementing yii\data\DataProviderInterface). In this case, the data matrix will be generated from the models provided by the Data Provider. Each data row will contain the values of the attributes of one model. By default, all attributes of every model will be used, but you can configure the attributes property to specify the list of attributes to appear in a row (the specified order will be taken into account).

$provider = new ActiveDataProvider([
    'query' => User::find(),
]);
// Let's assume User contains the attributes 'id', 'joinDate', 'powerLevel'
echo DygraphsWidget::widget([
	'data' => $provider,
	'attributes' => ['joinDate', 'powerLevel'], // Display the graph of powerLevel by joinDate
	'options' => [
		//...
	],
]);
JavaScript

JS code that returns a data object usable by Dygraphs. The code must be wrapped inside a JsExpression object:

$your_data = new JsExpression('function () {
	var data = [];
      for (var i = 0; i < 1000; i++) {
        var base = 10 * Math.sin(i / 90.0);
        data.push([i, base, base + Math.sin(i / 2.0)]);
      }
      var highlight_start = 450;
      var highlight_end = 500;
      for (var i = highlight_start; i <= highlight_end; i++) {
        data[i][2] += 5.0;
      }
	return data;
}');

Additional options

The following widget properties can also be specified:

xIsDate: Set this property to true if the x-values (first value in each row of the data matrix) are date strings, in order to properly convert them to JS date objects for Dygraphs.

scriptUrl: The URL where the Dygraphs.js library is taken from. If not set, the widget will locally publish its own distribution of the Dygraphs library.

model and attribute: Specify a Model instance and one of its attributes in order to take the data from it.

attributes: To be used when data contains a Data Provider. Configure attributes with a list of the model attributes that will be in every row of the data matrix. If this list is empty, all attributes will be taken.

jsVarName: Specifies a custom name for the JS variable that will receive the Dygraphs object upon creation.

htmlOptions: Additional HTML attributes for the graph-containing div.

JavaScript code in options

Anytime you need to pass JavaScript code (for example, passing a function to an option), just pass a new JsExpression($your_js_code). For example:

$options = array(
    'underlayCallback' => new JsExpression('function(canvas, area, g)
            {
                var bottom_left = g.toDomCoords(highlight_start, -20);
                var top_right = g.toDomCoords(highlight_end, +20);
 
                var left = bottom_left[0];
                var right = top_right[0];
 
                canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
                canvas.fillRect(left, area.y, right - left, area.h);
            }'),
);

Visibility checkboxes

It is often useful to hide and show some of the dataseries in a chart. The widget features helper scripts to easily control series visibily with checkboxes.

To use this feature, make sure your page has one checkbox per series in the chart, and give each checkbox an id attribute with the index of the series controlled by it. Then, configure the widget with a checkBoxSelector that matches the group of checkboxes. For example, for a chart with 2 data series: ~~~ [html] ~~~

<?php echo DygraphsWidget::widget([
	'checkBoxSelector' => '.visibility',
	'data' => [
		// [x, series0, series1]
		[1, 25, 100],
		[2, 50, 90],
		[3, 100, 80],
		//...
	],
	'options' => [
		// Starting visibility
		'visibility' => [
			false,
			true,
		],
		//...
	],
	// ...
]);?>

The attribute that associates a checkbox with a data series (id in the example) can be changed by configuring checkBoxReferenceAttr.

Resources

Make sure to check the project page to find the latest documentation and download the latest release.

0 0
1 follower
195 downloads
Yii Version: 2.0
License: MIT
Category: User Interface
Developed by: Sibilino
Created on: Feb 18, 2015
Last updated: 8 years ago

Downloads

show all

Related Extensions