function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
*werewolf**werewolf* 

Creating a drillable bar chart with Visualforce charting

I'm not seeing any clear way to handle user clicks on the elements of an apex:chart.  Is there such a way that I'm missing?  Is anyone aware of JS events that are thrown by the chart based on user interaction?

 

Otherwise I guess it's over to jqPlot or Google Charts.  *sigh*.

cwall_sfdccwall_sfdc

There's apex:chartTip.rendererFn that is called on mouseOver.  Enables customization on what is displayed.  You could also inspect the DOM (Firebug, Dev Tools, etc) to figure out which element you want to attach an event handler.

 

Otherwise, post an Idea for a product enhancement.

Da man.ax1626Da man.ax1626

I was just trying to solve the same problem, and used this approach.

It's going into the workings of Ext.js charting but the attribute rendererFn on tooltips does at least give an entry point to extend it.

Here a mouseover will display the name and value as normal and the onclick event will take you to another VF page which can be passed the name and value of clicked on segment to drilldown.

 

<apex:chart height="150" width="150" data="{!casesByType}">
<apex:pieSeries dataField="cval" labelField="ctype">
<apex:chartTips rendererFn="renderer"/>
</apex:pieSeries>
</apex:chart>


<script type="text/javascript">
function renderer(klass, item) {
var type = item.storeItem.get('ctype');
var val = item.storeItem.get('cval');
var e = window.event;
var t = e.target || e.srcElement;
t.onclick=function(event){
window.location = "{!$Page.DrillDownPage}?ctype="+type;
};
this.setTitle(type+" : "+val);
}
</script>