You need to sign in to do that
Don't have an account?
Satish Prajapat
How chart tip rendererFn work in visualforce page?
How chart tip rendererFn function works:
This is the post for every one who want to work with charttip.
Here is the simple code which give Idea:
This is the post for every one who want to work with charttip.
Here is the simple code which give Idea:
function renderChartTip(klass, item) { var m = item.storeItem; console.log('m.data' + JSON.stringify(m.data)); var lyd = JSON.stringify(m.data); //$j.each(m.data, function(key, value) { //console.log(key+" "+value); // }); var xAxisName = item.storeItem.get('xAxisName'); var yAxisName = item.storeItem.get('yAxisName'); var xAxisValue = m.get('name'); var Total = item.storeItem.get('twoYearsPriorInvoiced') + item.storeItem.get('lastYearInvoiced') + item.storeItem.get('thisYearInvoiced'); var percentageValue = m.get(item.yField); var colorCode,yearName; if(item.yField == 'twoYearsPriorInvoiced'){ colorCode = '#349DE2'; yearName = 'Two Year Prior Invoiced'; }else if(item.yField == 'lastYearInvoiced'){ colorCode = '#1B2F5D'; yearName = 'Last Year Invoiced'; }else if(item.yField == 'thisYearInvoiced'){ colorCode ='#82DFD9'; yearName = 'This Year Invoiced'; } percentageValue = percentageValue/Total; percentageValue = (percentageValue *100).toFixed(2); Total = Total *1000; //this.setTitle(m.get('name')); this.setTitle(xAxisName); this.update('' + '<table>' + '<tr><td><b></b> </td><td>' + xAxisValue + '</td></tr>' + '</table>' + '<table>' + '<tr> <div style="border-left:5px solid '+colorCode+';height:28px;margin-left:4px"><b> '+yearName+'</b></div></tr>' //+ '<tr class = \'sumOfSTAR_Text\'><td><b></b> </td><td>' + item.yField +' </td></tr>' + '<hr>' + '<tr class = \'sumOfSTAR_Text\'><td><b></b> </td><td>' + yAxisName +' </td></tr>' + '<tr><td><b></b> </td><td>( ' + percentageValue + '% of '+ Total +' for '+ xAxisValue +' )</td></tr>' + '</table>' ); }Visualforce page :
<apex:chart data="{!data}" height="400" width="745" resizable="true" id="Myid"> <apex:legend position="bottom" font="14px Helvetica"/> <apex:axis id="YaxisId" type="Numeric" position="left" grid="true" fields="twoYearsPriorInvoiced,lastYearInvoiced,thisYearInvoiced" title="Sum of STAR Total Invoiced" steps="4" minimum="0" dashSize="3" > <!--<apex:chartLabel />--> </apex:axis> <apex:axis type="Category" position="bottom" fields="name" title="STAR Job Date" dashSize="0"/> <apex:barSeries orientation="vertical" axis="left" stacked="true" showInLegend="true" groupGutter="10" highlight="false" xField="name" yField="twoYearsPriorInvoiced,lastYearInvoiced,thisYearInvoiced" xPadding="{!xPadding}" title="TwoYearPriorInvoiced,LastYearInvoiced,ThisYearInvoiced" colorSet="#349DE2,#1B2F5D,#82DFD9"> <apex:chartTips height="160" width="415" id="tip" rendererFn="renderChartTip" trackMouse="true" /> </apex:barSeries> </apex:chart>