Chart Component Guide

The Chart Component Guide gives you an overview of how to create charts with RazorFlow Dashboards for PHP. After reading this guide, you will be able to:

  1. Create charts from data contained in PHP Arrays
  2. Change formatting of chart elements and series
  3. Connect the chart to a DataSource and display aggregated data
  4. Allow your Dashboard’s users to drill-down into the chart
  5. Link the chart to other components in the dashboard to see relavant data in linked components

Before reading this guide, please read the following documents:

  1. Installing RazorFlow Dashboards for PHP
  2. How to create Dashboards
  3. Add components to Dashboards
  4. Options

Creating a static chart

You can display charts using data contained in PHP arrays.

  1. First, Create a new Dashboard and set dashboard title:

    Dashboard::setTitle("Chart Component");
    
  2. Create an object of ChartComponent. Use ChartComponent::setCaption to set the caption:

    $chart = new ChartComponent();
    $chart->setCaption("Quarterly Performance");
    
  3. Use :php:meth`ChartComponent::setYAxis` to set the y-axis name. This is optional, but it’s good practice to label the y-axis:

    $chart->setYAxis("Sales");
    
  4. Set the labels. The labels are the names for the data points which appear on the X-Axis. Use ChartComponent::setStaticLabels to set the labels. The first argument is the name of the X-Axis, and second option is an array of strings - which correspond to the labels:

    $chart->setStaticLabels("Quarter", array("Q1", "Q2", "Q3", "Q4"));
    
  5. Now, you will add data to the chart. A chart can have multiple series of data, and each series has multiple data points. In this example, you will be adding two series.

    Use ChartComponent::addStaticSeries to add a series. The first argument to :php:meth`ChartComponent::addStaticSeries` is the name of the series, and the second argument is a PHP array of numeric values:

    $chart->addStaticSeries("Store A", array(55, 23, 44, 23));
    $chart->addStaticSeries("Store B", array(12, 41, 37, 47));
    

    Note: The number of values provided to each series must be the same as the number of labels.

  6. Add the component to the dashboard using Dashboard::addComponent, and render the dashboard:

    Dashboard::addComponent($chart);
    Dashboard::Render();
    
  7. Open the dashboard in your browser.

Complete example to create a static chart

<?php
include "../razorflow.php";

Dashboard::setTitle("Chart Component");

$chart = new ChartComponent();
$chart->setCaption("Quarterly Performance");
$chart->setYAxis("Sales");
$chart->setStaticLabels("Quarter", array("Q1", "Q2", "Q3", "Q4"));
$chart->addStaticSeries("Store A", array(55, 23, 44, 23));
$chart->addStaticSeries("Store B", array(12, 41, 37, 47));
Dashboard::addComponent($chart);

Dashboard::Render();

Formatting numbers on the chart

The Chart Component allows you to configure how numbers on the chart get displayed. You can add prefixes & suffixes, configure decimal places and set scaling of numbers based on a pre-defined scale.

Formatting is configured while adding a series to the chart. This way, each series can be formatted in a different manner. For example, you may wish to show a “$.” prefix for one series, and a “%” suffix for another, which are both in the same chart on different axes.

Before configuring the formatting, you need to understand how to change the Options in the series. For an introduction, please see Options in RazorFlow.

  1. First, Create a new Dashboard, and create a chart component, and set the static labels, in the steps of the previous example:

    $chart = new ChartComponent;
    $chart->setCaption("Quarterly Performance");
    $chart->setYAxis("Sales");
    $chart->setStaticLabels("Quarter", array("Q1", "Q2", "Q3", "Q4"));
    
  2. Configure the first series to be displayed as currency, with two decimal points of precision:

    $chart->addStaticSeries("Store A", array(55, 23, 44, 23), array(
            'numberPrefix' => "$ ",
            'decimals' => 2
    ));
    

    These are the two options that you are setting for the series:

    • 'numberPrefix'=>"$" - Show “$ ” before every number on the series labels.
    • 'decimals'=>2 - Show two points of decimal precision (like 32.00, 0.10, etc.)
  3. Configure the second series to be displayed as currency, with two decimal points of precision:

    $chart->addStaticSeries("Store B", array(12, 41, 37, 47), array(
            'numberPrefix' => "$ ",
            'decimals' => 2
    ));
    

    These are the two options that you are setting for the series:

    • 'numberPrefix'=>"$" - Show “$ ” before every number on the series labels.
    • 'decimals'=>2 - Show two points of decimal precision (like 32.00, 0.10, etc.)
  4. Add this component to the Dashboard:

    Dashboard::addComponent($chart);
    

Complete example for formatting numbers in a series

<?php
require "../razorflow.php";

Dashboard::setTitle("Chart Component");

$chart = new ChartComponent;
$chart->setCaption("Quarterly Performance");
$chart->setYAxis("Sales");
$chart->setStaticLabels("Quarter", array("Q1", "Q2", "Q3", "Q4"));
$chart->addStaticSeries("Store A", array(55, 23, 44, 23), array(
	'numberPrefix' => "$ ",
	'decimals' => 2
));
$chart->addStaticSeries("Store B", array(12, 41, 37, 47), array(
	'numberPrefix' => "$ ",
	'decimals' => 2
));
Dashboard::addComponent($chart);

Dashboard::Render();

Summary: Formatting the chart series

To format the series in your charts, use the following options on each series. Please see Options in RazorFlow for an introduction on how to use Options

Series Formatting Summary
Option Description
ChartSeriesOptions::$numberPrefix A string that is prefixed before every number
ChartSeriesOptions::$decimals The number of digits after the decimal point
ChartSeriesOptions::$displayType The display type of a series - Line, Column, Bar, Pie, Area.
ChartSeriesOptions::$prefix A prefix before displaying a number on the series
ChartSeriesOptions::$color Hexadecimal string to set the color of the series. For example: “ffffff”, “a4c9f3”, etc.
ChartSeriesOptions::$showValues Set this to false to hide the values from the chart
ChartComponentOptions::$showLegend Set this to false to hide the legend from the chart
ChartComponentOptions::$legendPosition The position of the legend on the chart - “bottom” or “right”
ChartComponentOptions::$showLabels Set this to false to hide the labels on the chart.

Adding a secondary Y-Axis

Hint

Why set a secondary y-axis?

Let’s say you have a chart showing yearly sales and quantity sold. The sales figures are in several-thousands, and quantity figures are in several-hundreds.

The sales figures might be in several-thousands, and the quantity figures are in several-hundred. If you plot a regular chart with this data, the series containing the Quantity will appear very small compared to the sales, and your users won’t be able to easily understand the Quantity Data.

Instead, if the Quantity was represented on a separate Axis, then your users will quickly understand any changes in the Quantity data in comparison to the sales data.

In this example, you will add a secondary Y-Axis using ChartComponent::setSecondYAxis.

  1. Create a new Dashboard, and add a Chart Component and configure it:

    $chart = new ChartComponent;
    $chart->setCaption("Quarterly Performance");
    $chart->setYAxis("Sales");
    
  2. Set the Second y-axis, and specify the name as “Sales Growth”:

    $chart->setSecondYAxis("Sales Growth", array(
            'numberSuffix' => "%"
    ));
    

    The first argument to :php:meth`ChartComponent::setSecondYAxis` is the name of the axis, and the second argument is an options-array. 'numberSuffix'=>"%" adds “%” after each value.

  3. Set the labels and add two series like in the previous examples:

    $chart->setStaticLabels("Quarter", array("Q1", "Q2", "Q3", "Q4"));
    $chart->addStaticSeries("Store A", array(55, 23, 44, 23), array(
            'numberPrefix' => "$ ",
            'decimals'=>2
    ));
    $chart->addStaticSeries("Store B", array(12, 41, 37, 47), array(
            'numberPrefix' => "$ ",
            'decimals' => 2
    ));
    
  4. Add another series to the chart, but this time, this series is shown on the second Y Axis:

    $chart->addStaticSeries("Increase", array(13, 12, 11, 13), array(
            'displayType' => "Line",
            'onSecondYAxis' => true
    ));
    

    The options-array values are:

    • 'displayType'=>"Line" - Show this series as a line
    • 'onSecondYAxis'=>true - Show the series on the second y-axis

Complete example for how to set second Y Axis

<?php
require "../razorflow.php";

Dashboard::setTitle("Chart Component");

$chart = new ChartComponent;
$chart->setCaption("Quarterly Performance");
$chart->setYAxis("Sales");
$chart->setSecondYAxis("Sales Growth", array(
	'numberSuffix' => "%"
));
$chart->setStaticLabels("Quarter", array("Q1", "Q2", "Q3", "Q4"));
$chart->addStaticSeries("Store A", array(55, 23, 44, 23), array(
	'numberPrefix' => "$ ",
	'decimals'=>2
));
$chart->addStaticSeries("Store B", array(12, 41, 37, 47), array(
	'numberPrefix' => "$ ", 
	'decimals' => 2
));
$chart->addStaticSeries("Increase", array(13, 12, 11, 13), array(
	'displayType' => "Line",
	'onSecondYAxis' => true
));
Dashboard::addComponent($chart);

Dashboard::Render();

Creating a Chart from a DataSource

Hint

Charts are arguably one of the best ways to summarize and show large amounts of data in an easy to understand manner. RazorFlow PHP makes it incredibly easy for you to build charts which summarizes data in your SQL Database.

You first need to create a RazorFlow DataSource before a Chart Component can be configured. This DataSource contains information on where to find the data.

In the first example, you will build a Chart using the Connecting to MySQL DataSource:. You are trying to determine which genre has the maximum sales.

  1. Create a new Dashboard, and get a Connecting to MySQL DataSource: object.

    $dataSource = RFUtil::getSampleDataSource();
    
  2. Create a ChartComponent object and set a caption.

    $chart = new ChartComponent();
    $chart->setCaption("Sales By Genre");
    
  3. Connect the DataSource to the Chart using ChartComponent::setDataSource

    $chart->setDataSource($dataSource);
    
  4. Use ChartComponent::setLabelExpression to set the Column or Expression used to derive labels.

    $chart->setLabelExpression("Genre", "genre.Name");
    

    The arguments passed to setLabelExpression are:

    1. The name of the x-axis.
    2. The label expression.

    Note

    What is a Label Expression

    In your chart, there are (at-least) two axes:

    • An X-Axis (Horizontal)
    • A Y-Axis (Vertical)

    In the X-Axis, the names of the Data Points on the chart is called a “Label” (Also called a “Category” by some people). While a Chart is a graphical representation of Data, the Data is derived from a regular Database Table. For example, if you have a table like:

    Genre

    Sales

    Rock

    55

    Jazz

    76

    Blues

    34

    Hip-Hop

    59

    The label expression a column who’s values will be displayed on the X-Axis. In this example, the Label Expression is Genre. Note that this can also be a Regular SQL Expression. You can have TOUPPER(Genre) to show all the Genres in Uppercase.

  5. Add a series to the chart using addSeries

    $chart->addSeries("Sales", "Quantity * track.UnitPrice");
    

    Arguments to addSeries are:

    1. The name of the series
    2. The value expression.

    Note

    What is the Value Expression

    For a series of data to be displayed, there needs to be a numerical value corresponding to each item in the Label Column. Since the data to display on a chart is derived from a SQL Table like this:

    Genre

    Sales

    Rock

    55

    Jazz

    76

    Blues

    34

    Hip-Hop

    59

    **The value expression is a column which has a numerical value. **. In this example, the Label Expression is Genre. Note that this can also be a Regular SQL Expression. You can have TOUPPER(Genre) to show all the Genres in Uppercase.

  6. Add this chart to the dashboard and render the dashboard

    Dashboard::addComponent($chart);
    Dashboard::Render();
    
  7. Open the dashboard in your browser.

Complete example to create Chart from DataSource

<?php
require "../razorflow.php";

Dashboard::setTitle("Chart Component");

// Get the sample DataSource
$dataSource = RFUtil::getSampleDataSource();

$chart = new ChartComponent();
$chart->setCaption("Sales By Genre");
$chart->setDataSource($dataSource);
$chart->setLabelExpression("Genre", "genre.Name");
$chart->addSeries("Sales", "Quantity * track.UnitPrice");
Dashboard::addComponent($chart);

Dashboard::Render();

Sort and limit values

Hint

Why sort or limit values

Let’s say you have a chart showing sales by genre. But you are only interested in seeing the top 10 Genres with the total sales. You simply need to make two changes to the previous example:

  1. Sort the chart in the descending order of sales.
  2. Limit the number of data points to 10.

In this example, you will sort and limit the data in the chart using ChartSeriesOptions::$sort and ChartComponentOptions::$limit

  1. Create a new Dashboard and add a Chart Component and configure it:

    $chart = new ChartComponent();
    $chart->setCaption("Top 10 Genres");
    $chart->setDataSource($dataSource);
    $chart->setLabelExpression("Genre", "genre.Name");
    
  2. While adding a series, set the ChartSeriesOptions::$sort option.

    $chart->addSeries("Sales", "Quantity * track.UnitPrice", array(
            'sort' => "DESC"
    ));
    

    The arguments passed to addSeries are:

    1. The name of the x-axis
    2. The value expression.
    3. An options-array
    • 'sort'=>"DESC" - Sort by this series in descending order.
  3. Set the limit option for the Chart Component object using ChartComponent::setOption

    $chart->setOption('limit', 10);
    

    The arguments passed to setOption are:

    1. The option name - limit.
    2. The option value - Set it to ‘10’ to ensure that only 10 data points are shown.

Complete example to sort and limit values in a chart

<?php
require "../razorflow.php";

Dashboard::setTitle("Chart Component");

// Get the sample DataSource
$dataSource = RFUtil::getSampleDataSource();

$chart = new ChartComponent();
$chart->setCaption("Top 10 Genres");
$chart->setDataSource($dataSource);
$chart->setLabelExpression("Genre", "genre.Name");
$chart->addSeries("Sales", "Quantity * track.UnitPrice", array(
	'sort' => "DESC"
));
$chart->setOption('limit', 10);
Dashboard::addComponent($chart);

Dashboard::Render();

Time Aggregated Charts

Hint

Why use Time Aggregated Charts?

A Time Aggregated Chart is used to track measures aggregated and grouped by time. They offer the following benefits:

  • Your users will be able to see data grouped to larger and more understandable chunks.
  • Sometimes it might be more essential to see a high level overview rather than individual data records, especially if the number of records is large

Consider a small sample set of data:

Date Sale Amount
3rd March 55
18th March 13
5th April 29
22nd June 34

When grouped by month, and aggregated by sum, the final data looks like:

Month Sale Amount
March 68
April 29
June 34

Similarly, data can be grouped by different units of time - year, month, day, hour, minute, second.

In this example, we will create a simple Chart aggregating the sales records for each month.

  1. Create a new Dashboard. Add and configure a Chart Component

    $chart = new ChartComponent();
    $chart->setCaption("Sales By Month");
    $chart->setWidth(3);
    $chart->setDataSource($dataSource);
    
  2. Set the label expression using ChartComponent::setLabelExpression:

    $chart->setLabelExpression("Month", "InvoiceDate", array(
            'timestampRange' => true,
            'timeUnit' => 'month'
    ));
    

    The arguments passed to setLabelExpression are:

    1. The name of the x-axis - “Month”.

    2. The label expression - InvoiceDate

      Here, InvoiceDate is a SQL DATETIME column. Only the DATETIME is supported.

    3. An options-array:

      • 'timestampRange'=>true - Creates a Time Ranging Chart
      • 'timeUnit'=>'month' - Sets the time unit to group by month.

Complete example on how to build a time aggregated chart

<?php
require "../razorflow.php";

Dashboard::setTitle("Chart Component");

// Get the sample DataSource
$dataSource = RFUtil::getSampleDataSource();

$chart = new ChartComponent();
$chart->setCaption("Sales By Month");
$chart->setWidth(3);
$chart->setDataSource($dataSource);
$chart->setLabelExpression("Month", "InvoiceDate", array(
	'timestampRange' => true,
	'timeUnit' => 'year'
));
$chart->addSeries("Sales", "Quantity * Track.UnitPrice");
Dashboard::addComponent($chart);

Dashboard::Render();

Drill Downs on Time Aggregated Charts

Hint

Why enable drill downs on time aggregated charts?

Enabling drill downs on time aggregated charts is simple and has several benefits:

  • If required, your user can click on one of the labels in the chart, and the chart changes to the next level of time grouping, in the same space. For example, from Year -> Month. Month -> Day, etc.

In RazorFlow, this feature is called autoDrill. Activating autoDrill on a time range chart makes it interactive.

If you have a Time Range Chart grouped by year, and activate autoDrill - clicking on a year (let’s say, 2008) will open 2008’s data grouped by month. Clicking on a month (let’s say, July) will open data for July 2008 grouped by day.

We modify the previous example to activate autoDrill by adding a single extra line of code.

To activate autoDrill add the 'autoDrill'=>true option to setLabelExpression. But for this example, you will also explore the use of another option - customUnitPath.

$chart->setLabelExpression("Month", "InvoiceDate", array(
        'timestampRange' => true,
        'timeUnit' => 'year',
        'customTimeUnitPath' => array('year', 'day'),
        'autoDrill' => true
));

The arguments passed to setLabelExpression is now:

  1. The name of the x-axis - “Month”
  2. The label expression - InvoiceDate
  3. An array of options
    • 'timestampRange'=>true - Creates a time range chart.
    • 'timeUnit'=>'year' - Group yearly.
    • 'customTimeUnitPath'=>array('year','day') - While drilling down, the dashboard follows a standard path - “year”, “month”, “day”, “hour”, “minute”, “second”. Setting the customTimeUnitPath allows you to override this.
    • 'autoDrill'=>true - Setting this option activates autoDrill.

Drill-down and set drill paths

<?php
require "../razorflow.php";

Dashboard::setTitle("Chart Component");

// Get the sample DataSource
$dataSource = RFUtil::getSampleDataSource();

$chart = new ChartComponent();
$chart->setCaption("Sales By Month");
$chart->setWidth(2);
$chart->setDataSource($dataSource);
$chart->setYAxis("Amount", array(
	'numberPrefix' => '$ '
));
$chart->setLabelExpression("Month", "InvoiceDate", array(
	'timestampRange' => true,
	'timeUnit' => 'year',
	'customTimeUnitPath' => array('year', 'day'),
	'autoDrill' => true
));
$chart->addSeries("Sales", "Quantity * Track.UnitPrice", array(
	'displayType' => "Line"
));
Dashboard::addComponent($chart);

$artist = new ChartComponent ();
$artist->setCaption("Sales", "{{value}} Sales");
$artist->setWidth(2);
$artist->setDataSource($dataSource);
$artist->setLabelExpression("Artist", "Genre.Name");
$artist->addSeries("Sales", "Quantity");
Dashboard::addComponent($artist);

$chart->autoLink($artist);


Dashboard::Render();

Summary: DataSource Chart Display Options

To change the behaviour of DataSource-driven charts in your dashboard, use the following options. Please see Options in RazorFlow for an introduction on how to use Options

Formatting a chart from datasource
Option Description
ChartComponentOptions::$aggregate true/false flag to enable aggregation
ChartSeriesOptions::$aggregateFunction The type of SQL aggregation to perform (SUM/AVG/MIN/MAX/STDDEV, etc)
ChartSeriesOptions::$sort Sort according to this series (DESC/ASC)
ChartComponentOptions::$limit Maximum number of items to show on X-Axis
ChartLabelOptions::$timestampRange Displays this is as a time aggregated chart.
ChartLabelOptions::$autoDrill Enable automatic drill down in
ChartLabelOptions::$drillPath Set the path for drill downs.
ChartLabelOptions::$timeUnit Set the time unit to group by
ChartComponentOptions::$customTimeUnitPath Override the behavior of time range drill down

Adding Conditional Series

Hint

** Why use conditional series? **

Conditional series allows you to build multiple series from the same value expression. Consider the following data.

Month Genre Sales
June Rock 35
June Pop 44
July Rock 29
July Pop 36

Consider two conditional series with conditions Genre='Rock' and Genre='Pop'. For the first series, only records where the Genre is 'Rock' is considered. So the data in the chart looks like:

Month Series 1 [Rock] Series 2 [Pop]
June 35 44
July 29 36

In this example, four conditional series are being added, one for each genre. Making a conditional series involves setting an option to addSeries

$genreChart->addSeries("$genre", 'Quantity', array('condition' => "genre.Name = 'Rock'", 'displayType' => 'Line'));
$genreChart->addSeries("$genre", 'Quantity', array('condition' => "genre.Name = 'Jazz'", 'displayType' => 'Line'));
$genreChart->addSeries("$genre", 'Quantity', array('condition' => "genre.Name = 'Metal'", 'displayType' => 'Line'));
$genreChart->addSeries("$genre", 'Quantity', array('condition' => "genre.Name = 'Pop'", 'displayType' => 'Line'));

The four conditions for the series are:

  1. genre.name='Rock'
  2. genre.name='Jazz'
  3. genre.name='Metal'
  4. genre.name='Pop'

Complete example on how to create conditional series

<?php
require "../razorflow.php";

Dashboard::setTitle("Chart Component");

// Get the sample DataSource
$dataSource = RFUtil::getSampleDataSource();
$genreChart = new ChartComponent();
$genreChart->setWidth(4);
$genreChart->setCaption("Sales by Genre");
$genreChart->setDataSource($dataSource);
$genreChart->setLabelExpression("Year", "InvoiceDate", array(
	'timestampRange' => true,
	'timeUnit' => 'year'
));

$genreChart->addSeries("Rock", 'Quantity', array(
	'condition' => "genre.Name = 'Rock'",
	'displayType' => 'Line'
));
$genreChart->addSeries("Jazz", 'Quantity', array(
	'condition' => "genre.Name = 'Jazz'",
	'displayType' => 'Line'
));
$genreChart->addSeries("Metal", 'Quantity', array(
	'condition' => "genre.Name = 'Metal'",
	'displayType' => 'Line'
));
$genreChart->addSeries("Pop", 'Quantity', array(
	'condition' => "genre.Name = 'Pop'",
	'displayType' => 'Line'
));

Dashboard::addComponent($genreChart);
Dashboard::Render();

Other Aggregate Types

This chart shows the average sales per country, according to data from the Invoice table.

Other Aggregate Types

<?php
require "../razorflow.php";

Dashboard::setTitle("Chart Component");

// Get the sample DataSource
$dataSource = RFUtil::getSampleDataSource();
$dataSource->setSQLSource("Invoice");

$chart = new ChartComponent();
$chart->setCaption("Average Sale per Country");
$chart->setDataSource($dataSource);
$chart->setYAxis("Amount", array(
	'numberPrefix' => '$ '
));
$chart->setWidth(3);
$chart->setLabelExpression("Country", "invoice.BillingCountry");
$chart->addSeries("Sales", "invoice.Total", array(
	'aggregateFunction' => "AVG"
));

Dashboard::addComponent($chart);
Dashboard::Render();

Taking a closer look at this example:

  1. Configure the sample DataSource to retrieve data from the Invoice table

    $dataSource = RFUtil::getSampleDataSource();
    $dataSource->setSQLSource("Invoice");
    
  2. Create a chart, and connect it to the DataSource

    $chart = new ChartComponent();
    $chart->setCaption("Average Sale per Country");
    $chart->setDataSource($dataSource);
    $chart->setYAxis("Amount", array(
            'numberPrefix' => '$ '
    ));
    $chart->setWidth(3);
    
  3. Set invoice.BillingCountry as the label expression, so each country in the Database is represented as a label

    $chart->setLabelExpression("Country", "invoice.BillingCountry");
    
  4. Add a series using addSeries

    $chart->addSeries("Sales", "invoice.Total", array(
            'aggregateFunction' => "AVG"
    ));
    

    The arguments to addSeries are:

    1. The series name - “Sales”
    2. The amount of the invoice - invoice.Total, which will be aggregated by country.
    3. An array of options
      • 'aggregateFunction'=>"AVG" - calculates the average value for the entire country.

Configuring Axes

Configuring Axes

<?php
require "../razorflow.php";

Dashboard::setTitle("Chart Component");

// Get the sample DataSource
$dataSource = RFUtil::getSampleDataSource();
$dataSource->setSQLSource("Invoice");

$chart = new ChartComponent();
$chart->setDataSource($dataSource);
$chart->setWidth(3);
$chart->setOption('limit', 5);
$chart->setCaption("Average Sale per Country");
$chart->setLabelExpression("Country", "invoice.BillingCountry");
$chart->setYAxis("Average Amount", array(
	'numberPrefix' => '$ ',
	'minValue' => 2,
	'maxValue' => 10
));
$chart->setSecondYAxis("Total Amount", array(
	'numberPrefix' => '$ ',
	'minValue' => 100,
	'maxValue' => 800
));
$chart->addSeries("Avg Sales", "invoice.Total", array(
	'aggregateFunction' => "AVG"
));
$chart->addSeries("Total Sales", "invoice.Total", array(
	'aggregateFunction' => "SUM",
	'sort' => "DESC",
	'onSecondYAxis' => true
));

Dashboard::addComponent($chart);
Dashboard::Render();

The axes can be customized to show the local currency, change the maximum/minimum limits, etc.

  1. Set the y-axis using setYAxis

    $chart->setYAxis("Average Amount", array(
            'numberPrefix' => '$ ',
            'minValue' => 2,
            'maxValue' => 10
    ));
    

    The arguments to setYAxis are :

    1. The name of the axis - “Average Amount”
    2. An array of options:
      • 'numberPrefix'=>'$' - Show ‘$’ before every number on the series labels.
      • 'minValue'=>2 - Start the y-axis from 2
      • 'maxValue'=>10 - End the y-axis at 10
  2. Set the Second y-axis using setSecondYAxis

    $chart->setSecondYAxis("Total Amount", array(
            'numberPrefix' => '$ ',
            'minValue' => 100,
            'maxValue' => 800
    ));
    

    The arguments to setSecondYAxis are :

    1. The name of the axis - “Total Amount”
    2. An array of options:
      • 'numberPrefix'=>'$' - Show ‘$’ before every number on the series labels.
      • 'minValue'=>100 - Start the y-axis from 100
      • 'maxValue'=>800 - End the y-axis at 800
  3. Add a series for average sales, with the aggregateFunction set to “AVG” (to calculate average for each country)

    $chart->addSeries("Avg Sales", "invoice.Total", array(
            'aggregateFunction' => "AVG"
    ));
    
  4. Add a series for the total sales

    $chart->addSeries("Total Sales", "invoice.Total", array(
            'aggregateFunction' => "SUM",
            'sort' => "DESC",
            'onSecondYAxis' => true
    ));
    

    The arguments to addSeries are:

    1. The name of the series - “Total Sales”
    2. The value expression - invoice.Total
    3. An array of options
      • 'aggregateFunction'=>"SUM" - Calculate the sum of all values for each country.
      • 'sort'=>"DESC" - Sort all countries in descending order of the total sales.
      • 'onSecondYAxis'=>true - Plot series on Second y-axis.

Summary: Additional Options

Formatting a chart from datasource
Option Description
ChartSeriesOptions::$condition This is a place holder text
ChartSeriesOptions::$onSecondYAxis Set to true if the series is to be measured against the second Y-Axis
ChartAxisOptions::$minValue This is a place holder text
ChartAxisOptions::$maxValue This is a place holder text
ChartAxisOptions::$adaptiveMin This is a place holder text

Trend Lines

Full documnetation will be available soon. If you wish to know more about this right now, please contact support.

Trend Lines

<?php
require "../razorflow.php";

Dashboard::setTitle("Chart Component");

// Get the sample DataSource
$dataSource = RFUtil::getSampleDataSource();

$chart = new ChartComponent();
$chart->setCaption("Top 10 Genres");
$chart->setYAxis("Amount", array('numberPrefix' => "$"));
$chart->setDataSource($dataSource);
$chart->setLabelExpression("Genre", "genre.Name");
$chart->addSeries("Sales", "Quantity * track.UnitPrice", array('sort' => "DESC"));
$chart->setOption('limit', 10);
$chart->addTrendLine("Minimum", 100);
$chart->addTrendLine("Average", 300);
$chart->addTrendLine("Good", 600);
Dashboard::addComponent($chart);

Dashboard::Render();

Start building interactive, mobile-friendly Dashboards in PHP. See DemosDownload