Morris Chart

Overview #

MorrisJS is one of the best Chart and Graph libraries. MorrisJS is known by its simplicity in making a cool charts. As stated in the moto of the MorrisJS "good-looking charts shouldn't be difficult", the authors stressed the difference between Morris and other chart libraries, the simplicity.

This package helps you to generate MorrisJS Chart in KoolReport much more simple.

Installation #

  1. Download the zip file and unzip
  2. Copy the folder morris_chart into the koolreport\packages folder

All done! Simple, isn't it?

Documentation #

MorrisJS has four(4) type of charts: Line, Area, Bar and Donut. In general, to create a chart you do:

<?php
\koolreport\morris_chart\Line::create(array(
    "dataStore"=>$this->dataStore('dataStore'),
    ...
    //other chart settings
));
?>

Common properties #

Nametypedescription
dataStoreDataSoreThe data store that chart will get data from
columnsarrayArray of columns that will be used in chart, for example columns=>array('month','sale'), the first column in chart is used to create x-axis in Line, Bar or Area. In Donut chart, first column will contain data of label. Other columns after the first are the data.
colorSchemearrayContain the list of HTML color for each series of data. This properties is optional. If you do not set then it will follow the theme of report or the default color scheme of Morris chart
optionsmixedContain any raw settings of each chart type, those settings defined here will be transfer directly to Morris to handle

How to format number in chart? #

...
"columns"=>array(
    "month",
    "amount"=>array(
        "type"=>"number"
        "prefix"=>"$", //prefix number
        "suffix"=>"", //Suffix
        "decimals"=>2, // Number of decimals
        "thousandSeparator"=>",",
        "decimalPoint"=>".",
    )
)
...

Where can I find extra properties to put into options?

If you working with Line, you can reference full list of properties in here. Those listed properties can be put into options of Line chart.

In the same manner, below are the list of properties for other charts:

  1. Line & Area Charts
  2. Bar Charts
  3. Donut Charts

Examples #

Line Chart #

<?php
    Line::create(array(
        "dataStore"=>$this->dataStore('sale'),
        "columns"=>array(
            'month',
            'income'=>array(
                "label"=>"Income",
                "type"=>"number",
                "prefix"=>"$",
            ),
            'expense'=>array(
                "label"=>"Income",
                "type"=>"number",
                "prefix"=>"$",                
            )
        ),
        "options"=>array(
            //Extra settings for Line Chart
        ),
    ));
?>

Area Chart #

<?php
    Line::create(array(
        "dataStore"=>$this->dataStore('sale'),
        "columns"=>array(
            'month',
            'income'=>array(
                "label"=>"Income",
                "type"=>"number",
                "prefix"=>"$",
            ),
            'expense'=>array(
                "label"=>"Income",
                "type"=>"number",
                "prefix"=>"$",                
            )
        ),
        "options"=>array(
            //Extra settings for Area Chart
        ),
    ));
?>

Bar Chart #

<?php
    Bar::create(array(
        "dataStore"=>$this->dataStore('sale'),
        "columns"=>array(
            'month',
            'income'=>array(
                "label"=>"Income",
                "type"=>"number",
                "prefix"=>"$",
            ),
            'expense'=>array(
                "label"=>"Income",
                "type"=>"number",
                "prefix"=>"$",                
            )
        ),
        "options"=>array(
            //Extra settings for Area Chart
        ),
    ));
?>

Donut Chart #

<?php
    Donut::create(array(
        "dataStore"=>$this->dataStore('sale'),
        "columns"=>array(
            'month',
            'income'=>array(
                "label"=>"Income",
                "type"=>"number",
                "prefix"=>"$",
            ),
            'expense'=>array(
                "label"=>"Income",
                "type"=>"number",
                "prefix"=>"$",                
            )
        ),
        "options"=>array(
            //Extra settings for Area Chart
        ),
    ));
?>

Extra settings for Donut charts #

Nametypedescription
showPercentageboolWhether the donut chart will show percentage
decimalsnumberSet number of decimals