Basic ChartComponent Functionality

Here is an example chart component:

Here is the code for a complete dashboard containing a single chart component:


class SampleDashboard extends StandaloneDashboard{
  public function buildDashboard () {
    $chart = new ChartComponent("chart1");
    $chart->setDimensions (4, 4);
    $chart->setCaption ("My First Chart");
    $chart->setLabels (array("Jan", "Feb", "Mar"));
    $chart->addSeries ("beverages", "Beverages", array(1355, 1916, 1150));
    $chart->addSeries ("packaged_foods", "Packaged Foods", array(1513, 976, 1321));


$db = new SampleDashboard();

The steps taken to build this dashboard are:

  1. Create a new dashboard
  2. Add a new component instance of type ChartComponent
  3. Set a caption to the component using setCaption.
  4. Set the labels (which are shown on the X-Axis) using the setLabels function, pass an array of strings which will be displayed.
  5. Add multiple series to the chart, using the addSeries function which takes 3 arguments:
    • An ID String (beverages, packaged_foods, etc) which is used later to refer to this series to update it, etc.
    • The Title of the series, which will be displayed on the chart.
    • An array of Data Values which will be the actual values plotted on the chart.
  6. Add the component to the dashboard using the addComponent function.
  7. Render the dashboard by calling the renderStandalone() of the SampleDasboard class.

Pie Charts

To create a pie chart, use the setPieValues function instead of addSeries. Since a pie chart can only have a single set of values, you can call this function only once.


class SampleDashboard extends StandaloneDashboard { public function buildDashboard(){ $chart = new ChartComponent("pie_chart"); $chart->setCaption("Monthly Unit Distribution"); $chart->setDimensions (4, 4); $chart->setLabels (["Jan", "Feb", "Mar"]); $chart->setOption ('showPieValues', false); $chart->setPieValues ([10, 14, 13]);

$this->addComponent ($chart);

} }

$db = new SampleDashboard(); $db->renderStandalone();


  • By default, all chart series are Column Charts. Changing the series type is covered in Chart Series Configuration
  • Please ensure that the number of data points in each series is the same number of items in your Label Array.