Fusion Charts Conflict? My Function Is Not A Function...

[njprrogers]

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&registerWithJS=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