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

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

Changelog ¶

1.1.0 - Added visibility checkboxes feature.

Requirements ¶

Yii 1.1.16. Not intended for use with Yii 2.

Installation ¶

Download the latest release and unpack the contents of the widget folder inside the protected\extensions\dygraphswidget folder within your Yii application.

Usage ¶

In your view, create the widget with your data matrix as its data option.

$this->widget('ext.dygraphswidget.DygraphsWidget', array(
		'data'=> $your_data,
	));

Dygraphs options ¶

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

$this->widget('DygraphsWidget', array(
		'data'=> $your_data,
		'options'=>array(
			'labels' => array('X', 'Sin', 'Rand', 'Pow'),
			'title'=> 'Main Graph',
			//...
		),
	));

Data formats ¶

The data property can be specified in three different formats. 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 ¶

An absolute URL to a text file with the data.

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

Function ¶

A string with JS code that returns a data object usable by Dygraphs.

$data = '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 CModel instance and one of its attributes in order to take the data from it.

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.

Passing JavaScript code ¶

Both the data and options for the widget support literal JavaScript code. In order to pass JavaScript code, just prepend js: to the string containing the code. This can be useful in order to pass JavaScript functions or variables to the Dygraphs object.

For example, if your data is contained in a JavaScript var with the name javascriptData:

$data = 'js:javascriptData';

Or let's say you need to pass a function for a Callback option:

$options = array(
	'underlayCallback' => 'js: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);
            }'
);

Alternatively, you can pass a new instance of CJavaScriptExpression() constructed with your JavaScript string.

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 3 data series: ~~~ [html] ~~~

$this->widget('DygraphsWidget', array(
		'data'=> array(
			// (x, series0, series1, series2)
			array(0, 3, 25, 247),
			array(1, 6, 26, 127),
			array(2, 9, 27, -7),
			//...
		),
		'checkBoxSelector' => 'input.visibility',
		//...
	),
));

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.