feijs/morris-graphs

MorrisGraphs

This package provides a class to easily generate dynamic graphs with Morris.js

Installation

Add the package in composer.json and run composer update

"require": {
	"feijs/morris-graphs": "dev-master"
}

Add the ServiceProvider to the providers in config\app.php

'Feijs\MorrisGraphs\MorrisGraphsServiceProvider'

And publish the package assets:

php artisan asset:publish "feijs/morris-graphs"

Usage

Creating a graph

Create a Factory object and pass this to a view

use Feijs\MorrisGraphs\Factory as Graph;

public function show()
{
	$graph = new Graph();
	return View::make('views.index')->with('graph', $graph)
}

Then in your view include the following:

{{ $graph->includes() }}	//Preferably once per page

{{ $graph->div() }}			//Where you want to place the graph

{{ $graph->ranges('7', '14', 21) }}		//Add buttons for data ranges

{{ $graph->dynamic($source_url, ['quantity1', 'quantity2']) }}	

//Or

{{ $graph->fixed([$source_data], ['quantity1', 'quantity2']) }}	

For Donut graphs the second parameter may be ommitted

Data

Source data should be organised as follows:

[ 
	['x-key' => 'x-value', 'y1' => 'y1-value', 'y2' => `y2-value`, ...],
	['x-key' => 'x-value', 'y1' => 'y1-value', 'y2' => `y2-value`, ...],
	...
]

Except for donuts graphs, where it should be:

[ 
	['label' => 'Label1', 'value' => 'Value1'],
	['label' => 'Label2', 'value' => 'Value2'],
	...
]

Settings

To customize graph settings you can call the following setters

Horizontal key

Must match the horizontal key in the dataset, defaults to x

$graph->setXKey('segment');

Graph type

Choose from Bar, Line, Area, Donut, defaults to Bar

$graph->setGraphType('Donut');

Id

This id will match the script with the the div

$graph->setGraphId('1234');

Height

The height of the graph, defaults to 250px

$graph->setHeight('300px');

Label translations

You can specify a file with translations for the graph labels and error message(s) in the config

• Publish the package config files

php artisan config:publish "feijs/morris-graphs"

• Set the translation file in translations.labels or translation.messages