• Overview
• Installation
  • By downloading .zip file
  • By composer
• Documentation
• Common properties
  • How to format number in chart?
  • Where can I find extra properties to put into `options`?
• Examples
  • Line Chart
  • Area Chart
  • Bar Chart
  • Donut Chart
  • Extra settings for Donut charts

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 #

    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 #