We have suitecrm 7.8 and php 5.5 along with kreporter v3.1. We am creating a stacked-bar chart using Google Charts plugin (shown below). Now, we want to make it interactive for users. If user click on legend value, it should turn off that particular value and update chart according to it. Also, when user click again on same legend value, chart should get that value back. So, we want to add functionally of toggling legend value and update chart accordingly.
For example, for below image if we click on Negotiation/Review value on legend (brown colored bar). We should get able to invisible brown colored bar. If we click again on it, it should visible again.
- We tried to edit code at below place by adding click event listener.
// specific for the Combo Chart
if ($thisParams['type'] == 'Combo') {
$googleChart['options']['seriesType'] = 'bars';
// loop over the series settings
foreach ($thisParams['dataseries'] as $seriesId => $seriesData) {
//if ($seriesData['renderer'] != '')
$googleChart['options']['series'][$seriesId] = array(
'type' => (empty($seriesData['renderer']) ? 'bars' : $seriesData['renderer']),
'targetAxisIndex' => ( $seriesData['axis'] == 'S' ? 1 : 0)
);
}
// add click event handler for legend
$googleChart['options']['legend'] = array(
'position' => 'right',
'clickable' => true,
'textStyle' => array(
'fontSize' => 16
),
'selected' => array()
);
// set initial selected series
foreach ($thisParams['dataseries'] as $seriesId => $seriesData) {
$googleChart['options']['legend']['selected'][$seriesData['label']] = true;
}
// add listener for legend toggle
$googleChart['events'] = array(
'select' => 'function() {
var selection = chart.getSelection();
if (selection.length > 0 && selection[0].row === null) {
var column = selection[0].column;
if (typeof columns[column] == "number") {
columns[column] = {
label: data.getColumnLabel(column),
type: data.getColumnType(column),
calc: function () {
return null;
}
};
} else {
columns[column] = column;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
}'
);
}
