Following is what i´ m trying to accomplish:
and on change picklist:
Switching between picklist values should update the Person in the chart:
I got this working with following code:
VF Component:
<apex:component Controller="ForecastHierarchyController">
<apex:includeScript value="https://www.google.com/jsapi"/>
<script>
google.load('visualization', '1', {packages:['orgchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Parents');
data.addColumn('string', 'Type');
data.addRows([
// All data rows are calculated in Apex controller
// and returned as a string with line endings CR+LF
{!accRows}
]);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml:true,
size:'medium',
allowCollapse:true});
}
</script>
<apex:form >
<apex:selectList value="{!FilterType}" multiselect="false" size="1">
<apex:selectOption itemLabel="PersonOne" itemvalue="PersonOne"/>
<apex:selectOption itemLabel="PersonTwo" itemvalue="PersonTwo"/>
<apex:actionSupport event="onchange" action="{!CreateChartData}" onsubmit="drawChart();" />
</apex:selectList>
</apex:form>
<apex:outputPanel id="chart">
<div id='chart_div'>
</div>
</apex:outputPanel>
</apex:component>
Apex Controller:
public class ForecastHierarchyController {
private account acc;
public String FilterType {get;set;}
public String accRows {get;set;}
public ForecastHierarchyController() {
FilterType='PersonOne';
CreateChartData();
}
public void CreateChartData(){
system.debug('####FilterType'+FilterType);
accRows= '';
if (FilterType=='PersonOne'){
accRows+= '[{v:\'' + 'PersonOne'+
'\', f:\'' + 'PersonOne' +
'\'},\'' + '' +
'\',\'' + '' +
'\'],\r\n';
}
else{
accRows+= '[{v:\'' + 'PersonTwo'+
'\', f:\'' + 'PersonTwo' +
'\'},\'' + '' +
'\',\'' + '' +
'\'],\r\n';
}
accRows+= '[\'\',\'\',\'\']';
system.debug('accRows'+accRows);
}
}
There is only one problem: on change picklist value all the page is refreshed (picklist+ chart).
Instead,on change person, i would like to refresh only the chart and not the whole page.
I´ ve tried adding rerender attribute to actionSupport tag:
<apex:actionSupport event="onchange" action="{!CreateChartData}" onsubmit="drawChart();" rerender="chart" />
but it doesn´t work,on change picklist value chart isn´t showed anymore.
Do you know how can i refresh only the chart and not the whole page?
Thanks in advance for any advice.
Best Answer
These changes are needed:
You need to re-render (get from the server again) the part of the page that includes the data to display and that is the
<script>...</script>
section; adding theapex:outputPanel
around it with an ID allows that to be the re-rendered area.The other change is to call the JavaScript
drawChart
function only after the whole remote call is complete by making the calloncomplete
rather thanonsubmit
.The div containing the chart does not need to be re-rendered because the Google chart code re-draws that part of the page.