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 #

By downloading .zip file #

  1. Download zip file from My Licenses
  2. Unzip
  3. Copy the folder morris_chart into koolreport folder, it will look like below:
koolreport
├── core
├── morris_chart

By composer #

If you have purchased the package then you can follow these steps to install

  1. Login to koolreport.com
  2. Go to My Licenses
  3. Click Get Token For Composer button
  4. Copy the text and save to file auth.json next to composer.json
  5. Add the repositories to composer.json like below
  6. Run composer update to install package

composer.json

{
    "repositories":[
      {"type":"composer","url":"https://repo.koolreport.com"}
    ],
    "require":{
        "koolreport/morris_chart":"*",
        ...
    }
}

Your auth.json will look like this:

{
    "http-basic": {
        "repo.koolreport.com": {
            "username": "your@email.com",
            "password": "your-secret-token"
        }
    }
}

Note: Please add your auth.json to .gitignore as it contains your secret login information.

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
hoverTitleTemplatestringSet hover title template for Bar, Line, Area charts
hoverItemTemplatestringSet hover item template for Bar, Line, Area charts
formatterTemplatestringSet formatter value template for Donut chart
    Bar::create(array(
        "dataSource"=>$category_amount,
        "columns"=>array(
            "category",
            "sale"=>array("label"=>"Sale","type"=>"number","prefix"=>"$"),
            "cost"=>array("label"=>"Cost","type"=>"number","prefix"=>"$"),
            "profit"=>array("label"=>"Profit","type"=>"number","prefix"=>"$"),
        ),
        "options" => array(...),
        "colorScheme" => array(...),
        "hoverTitleTemplate" => "<div class=\'morris-hover-row-label\'>Title: {titleValue}</div>",
        "hoverItemTemplate" => "<div class=\'morris-hover-point\' style=\'color: {itemColor}\'>
            {itemName}:
            {itemValue}
        </div>",
    ));
    Donut::create(array(
        "title"=>"Sale Of Category",
        "dataSource"=>$category_amount,
        "columns"=>array(
            "category",
            "cost"=>array(
                "type"=>"number",
                "prefix"=>"$",
            )
        ),
        "formatterTemplate" => "Value: {formatValue}",
    ));

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"=>".",
    )
)
...

Since version 3.0.0, you can also use "formatValue" with a function to customize a column's hover value for Bar, Line, and Area charts or formatter value for Donut chart: ` ... "columns"=>array(

"month",
"amount"=>array(
    "type"=>"number"
    "formatValue" => function($value, $row, $colName) {
        return "$" . $value;
    }
)

) ... `

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

Get started with KoolReport

KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.