You need to sign in to do that
Don't have an account?

Sankey Google Chart & apex:tabpanel - $A is not a function
Hi,
I'm trying to include a Sankey Google Chart on a VisualForcePage. Everything works quite well, until I add a tabpanel on the page. In the JS console, I then have errors like "$A is not a function"
The main consequence is that the mouse-hovering is not working anymore.
Here is a simple example with a very simple tabpanel (without it, everything works well) :
<apex:page standardController="Account" tabStyle="Account" >
<apex:detail relatedList="true" title="true" inlineEdit="true" showChatter="true"/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'A', 'X', 5 ]
]);
// Sets chart options.
var options = {
width: 600,
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
</script>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
<apex:tabPanel></apex:tabPanel>
</apex:page>
Does anyone know how to fix that?
I'm trying to include a Sankey Google Chart on a VisualForcePage. Everything works quite well, until I add a tabpanel on the page. In the JS console, I then have errors like "$A is not a function"
The main consequence is that the mouse-hovering is not working anymore.
Here is a simple example with a very simple tabpanel (without it, everything works well) :
<apex:page standardController="Account" tabStyle="Account" >
<apex:detail relatedList="true" title="true" inlineEdit="true" showChatter="true"/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'A', 'X', 5 ]
]);
// Sets chart options.
var options = {
width: 600,
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
</script>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
<apex:tabPanel></apex:tabPanel>
</apex:page>
Does anyone know how to fix that?
This is one of the common issue while using apex tab panel and jquesry scripts. Please try using Jquesry tabs instaed of apex tab panel to achieve the requirement.
http://jqueryui.com/tabs/