This package provides a class to easily generate dynamic graphs with Morris.js
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"
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
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'],
...
]
To customize graph settings you can call the following setters
Must match the horizontal key in the dataset, defaults to x
$graph->setXKey('segment');
Choose from Bar
, Line
, Area
, Donut
, defaults to Bar
$graph->setGraphType('Donut');
This id will match the script with the the div
$graph->setGraphId('1234');
The height of the graph, defaults to 250px
$graph->setHeight('300px');
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
ortranslation.messages