Hi there,
I'm using Fusion charts and I'm possibly getting a conflict with some code I have created for some tooltips.
The message it is sending is
Error: $(".oss-toolTip").betterTooltipTwo is not a function
Source File: file:///C:/Users/Nick/Downloads/BillingOverviewissue/billing-overview_files/scripts.js
Line: 19
When I remove my fusioncharts code, this error does not occur and the code works fine.
Can anyone help me with the issue?
My fusioncharts code:
<script type="text/javascript" src="billing-overview_files/FusionCharts.htm"></script>
<script language="JavaScript">
//FC_Rendered method is called whenever a FusionCharts chart on the page
//has finished initial rendering. To this function, the chart passes its
//own DOM Id.
function FC_Rendered(DOMId){
//If it's our required chart
if (DOMId=="myChartId"){
//Get reference to the chart object
var chartObj = FusionCharts("myChartId");
//Simply alert the CSV Data
//alert(chartObj.getDataAsCSV());
return chartObj.getDataAsCSV();
//return;
}
}
function downloadChartData(domId) {
document.location.href="chart-data-download.htm?csvData= " + FC_Rendered(domId);
}
</script>
<script type="text/javascript" src="billing-overview_files/jquery-1.htm"></script>
<div id="chartContainer"><object style="visibility: visible;" id="myChartId" data="billing-overview_files/MSLine.htm" class="FusionCharts" type="application/x-shockwave-flash" width="700" height="300" lang="EN"><param value="noScale" name="scaleMode"><param value="noScale" name="scale"><param value="opaque" name="wMode"><param value="always" name="allowScriptAccess"><param value="best" name="quality"><param value="lang=EN&debugMode=0&animation=undefined&DOMId=myChartId®isterWithJS=1&chartWidth=700&chartHeight=300&InvalidXMLText=Invalid data.&stallLoad=true&dataXML=&dataURL=data.jsp" name="flashvars"></object></div>
<script type="text/javascript">
//FusionCharts.setCurrentRenderer('javascript');
FusionCharts._fallbackJSChartWhenNoFlash();
var myChart = new FusionCharts( "FusionCharts/MSLine.swf",
"myChartId", "700", "300", "0", "1" );
myChart.setXMLUrl("data.jsp");
myChart.render("chartContainer");
</script>
My tooltip code is
jQuery.fn.betterTooltipTwo = function(options){
var tip = $('.oss-toolTip');
/* Mouse over and out functions*/
$(this).click(
function() {
var offset = $(this).position();
var tLeft = offset.left;
var tTop = offset.top;
var tTop = (tTop+20) + 'px';
var linkWidth = ($(this).width()) / 2;
var tLeft = (tLeft-170+linkWidth)+"px";
if ($(this).next('.oss-toolTip').is(':visible')) {
$('.oss-toolTip').fadeOut();
}
else
{
$('.oss-toolTip').hide();
var thisHref = $(this).attr('href');
var startTooltip = '<span class="tooltip"><span class="tooltip-top"></span><span class="tooltip-content"><a href="#" class="tooltip-close"><span>close</span></a>';
var endTooltip = '</span></span>';
var ourTooltip = startTooltip + $(thisHref).html() + endTooltip;
$(this).after(ourTooltip);
$(this).next('.oss-toolTip').css({'top' : tTop, 'left' : tLeft});
$('.oss-toolTip-close').click(
function() {
$('.oss-toolTip').fadeOut();
return false;
});
$(ourTooltip).show();
//$(this).next('.oss-toolTip').show();
}
return false;
}
);
};
Thanks in advance,
Nick