Overview
Provides technical overview and know-how of a technology related to the product or a particular feature.
Custom Charts
To create custom charts in SugarCRM you need to create a SugarChart subclass that will be returned from the SugarChartFactory. When charts are rendered in the system, a call is made to the static getInstance method of SugarChartFactory. The getInstance method accepts two parameters:
- a string name of the chart engine
- an optional string name of a module
The chart engine value is retrieved from the Sugar configuration settings. The optional module name supports modules that require additional data processing and rendering. Sugar comes with a JitReport class specifically to handle the nuances of rendering charts for the Reports module.
In the following example, we highlight how to change the formatting of the chart to move the legend to the top of the chart (by default, it is rendered on the bottom of the chart).
The first step is to create two folders:
- ./custom/include/SugarCharts/CustomJit
- ./custom/include/SugarCharts/tpls
In the ./custom/include/SugarCharts/CustomJit folder, create two PHP files:
- CustomJit.php
- CustomJitReports.php
In our trivial example, we will simply override the display method for both classes to point to our new custom template so that we may move the legend to the top of the chart.
See below for the code in the CustomJit.php file:
<?php
require_once("include/SugarCharts/Jit/Jit.php");
class CustomJit extends Jit
{
function display($name, $xmlFile, $width='320', $height='480', $resize=false)
{
parent::display($name, $xmlFile, $width, $height, $resize);
return $this->ss->fetch('custom/include/SugarCharts/CustomJit/tpls/chart.tpl');
}
}
?>
Copy over the file from ./include/SugarCharts/Jit/tpls/chart.tpl to the ./custom/include/SugarCharts/CustomJit/tpls directory. We will change the Smarty code that outputs the legend to be moved to the top. Here’s the snipped-off code changed from chart.tpl:
<div
class="chartContainer">
<div id="sb{$chartId}" class="scrollBars">
<div id="legend{$chartId}" class="legend"></div>
<div id="{$chartId}" class="chartCanvas" style="width: {$width}; height: {$height}px;"></div>
</div>
</div>
Finally, all that’s left is to change your configuration file settings so that the chartEngine value is CustomJit. The next time you render a chart with a legend, the legend will appear at the top of the chart.
