Jump to content
JChartFX Community
  • 0
Sign in to follow this  
Falkon

Custom ToolTip Weird Issue

Question

Hello,

 

  We've been trying to get a custom tool tip to display using the tutorial provided in your documentation at this link: http://support.softwarefx.com/jChartFX/article/2501235#!2501064 

 

  However, we are experiencing a really weird error in having the correct tool tip to display. We have multiple charts in one page. Only one of them has a custom ToolTip. If we mouse over the only graph with the custom ToolTip, we can see the expected custom ToolTip just fine. But, if we mouse over another graph first that has a standard ToolTip and then mouse over the graph that contains the custom ToolTip, we see the standard ToolTip from the previous graph and not the custom ToolTip from the graph we are currently mousing over! This is very bizarre. Any help would be appreciated. Let us know if you would like to see my code or anything else.

 

Thanks. 

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Hi

 

I am having the same issue with JChartFx version 7.2.5282

 

We have multiple Charts. One chart custom tooltip and another chart normal tooltip. Tooltips on Custom chart works fine but when hovering over second chart and then go back to first chart , it only shows the tooltip from the second chart with console errors  

 

Invalid value for <svg> attribute width="NaN
"ka.doUpdate @ jchartfx.system.js:90
jchartfx.system.js:90
Error: Invalid value for <svg> attribute height="NaN"ka.doUpdate @ jchartfx.system.js:90 etc
 
did you manage to get a work around or fix ?
 
Version 7.1.5044.21402 seems to still work fine 
 
Regards

Share this post


Link to post
Share on other sites
  • 0

I would recommend you download our most recent jChartFX version and try again. If the problem persists, please post or send us a small sample page that exhibits this behavior.

 

Regards,

 

JuanC

Share this post


Link to post
Share on other sites
  • 0

Hi 

 

I downloaded the latest version and the problem still persists. 

 

I replicated the issues on the sample http://support.softwarefx.com/jChartFX/article/2601046by just adding another chart with no custom tool tip 

 

 

The Sample HTML

<!DOCTYPE html>
<html>
<head>
   <title>Customized Tooltips</title>
   <link rel="stylesheet" type="text/css" href="sample.css"/>
   <script type="text/javascript" src="jchartfx.7.4.5649/js/jchartfx.system.js"></script>
   <script type="text/javascript" src="jchartfx.7.4.5649/js/jchartfx.coreBasic.js"></script>
   <script type="text/javascript" src="jchartfx.7.4.5649/js/jchartfx.advanced.js"></script>
   <script type="text/javascript" src="sample.js"></script>
</head>
<body>
<div id="ChartDiv2" style="width:550px;height:400px;display:inline-block"></div>
	<div id="ChartDiv1" style="width:550px;height:400px;display:inline-block"></div>
	<div class="DescriptionText" style="font-size: 10pt; height: 80px; display:block;">
		<h6>Source: U.S. Census Bureau, International Data Base.</h6>
		<p><a href="http://www.census.gov/ipc/www/idb/tables.html">http://www.census.gov/ipc/www/idb/tables.html</a></p>
	</div>
	<div id="tipChartInfo" class="tooltipPop">
		<div>
			<h4 class="titleDiv" >Population Over 65 Years Old in <span id="countryPopulation"></span></h4>
			<ul class="popInfo">
				<li class="male">
					<img src="sampleImages/male.gif" title="Male Population"/>
					<div>
						<h5 class="titleText">Male</h5>
						<p><strong>People:</strong> <span id="pplPerCountryMale"></span></p>
						<p><strong>Percentage:</strong> <span id="percentageByCountryMale"></span>%</p>
					</div>
				</li>
				<li class="female">
					<img src="sampleImages/female.gif" title="Female Population" />
					<div>
						<h5 class="titleText">Female</h5>
						<p><strong>People:</strong> <span id="pplPerCountryFemale"></span></p>
						<p><strong>Percentage:</strong> <span id="percentageByCountryFemale"></span>%</p>
					</div>
				</li>
			</ul>
			<div id="detailsChart" style="width:110px;height:110px;display:inline-block"></div>
		</div>
	</div>
</body>
</html>

Sample JS 

var chart1;
var chart2;
var chartDetails;
var items;
var items1;
var items2;
var countryID;
var divInTooltip = null;

window.onload = function () {
    onLoadDoc();
};

function onLoadDoc() {



    chart1 = new cfx.Chart();
    chart1.setGallery(cfx.Gallery.Bar);
    chart1.getAllSeries().setBarShape(cfx.BarShape.Cylinder);
    chart1.getLegendBox().setVisible(false);
    chart1.getAxisX().setLabelAngle(45);
    chart1.getAxisY().getGrids().setInterlaced(true);
    chart1.getAxisY().getGrids().getMajor().setTickMark(cfx.TickMark.None);

     chart2 = new cfx.Chart();
    chart2.setGallery(cfx.Gallery.Bar);
    chart2.getAllSeries().setBarShape(cfx.BarShape.Cylinder);
    chart2.getLegendBox().setVisible(false);
    chart2.getAxisX().setLabelAngle(45);
    chart2.getAxisY().getGrids().setInterlaced(true);
    chart2.getAxisY().getGrids().getMajor().setTickMark(cfx.TickMark.None);
    

    doDataPopulation();
    doDataPopulation2();
    doTitle("Population Over 65 Years Old for Year 2000");

    var axis1 = chart1.getAxisY();
    axis1.getLabelsFormat().setFormat(cfx.AxisFormat.Number);
    chart1.getPoints().getItem(0, 0).setTag("US");
    chart1.getPoints().getItem(0, 1).setTag("UK");
    chart1.getPoints().getItem(0, 2).setTag("Canada");
    chart1.getPoints().getItem(0, 3).setTag("Australia");
    chart1.getPoints().getItem(0, 4).setTag("Turkey");
    chart1.on("gettip", onGetTip);

    var divHolder = document.getElementById('ChartDiv1');
    chart1.create(divHolder);

    var divHolder2 = document.getElementById('ChartDiv2');
    chart2.create(divHolder2);
}

function onGetTip(args) {
    if (divInTooltip === null) {
        divInTooltip = document.getElementById('tipChartInfo');
        args.tooltipDiv.appendChild(divInTooltip);
        divInTooltip.style.visibility = "hidden";
        divInTooltip.style.display = "block";

        chartDetails = new cfx.Chart();
        var divHolder = document.getElementById('detailsChart');
        chartDetails.setGallery(cfx.Gallery.Pie);

        var myPie = (chartDetails.getGalleryAttributes());
        myPie.setShowLines(false);
        
		chartDetails.getSeries().getItem(1).setVisible(false);
        
		chartDetails.getAllSeries().getPointLabels().setVisible(false);
        chartDetails.getAxisY().getLabelsFormat().setDecimals(2);
        chartDetails.getLegendBox().setVisible(false);
        chartDetails.getAllSeries().getPointLabels().setVisible(false);
        
        chartDetails.getPlotAreaMargin().setTop(1);
        chartDetails.getPlotAreaMargin().setBottom(1);
        chartDetails.getPlotAreaMargin().setLeft(1);
        chartDetails.getPlotAreaMargin().setRight(1);

        updateDetailsChart(args);

        chartDetails.create(divHolder);
        divInTooltip.style.visibility = "inherit";
    } else updateDetailsChart(args);

    args.replaceDiv = false;
}

function updateDetailsChart(args) {
    countryID = args.getPoint();
    doDataCountry(countryID, chartDetails);
    doDetailedInfo(countryID);
}

//Chart title settings
function doTitle(text) {
    var titles = chart1.getTitles();
    if (titles.getCount() === 0) {
        var title = new cfx.TitleDockable();
        title.setText(text);
        titles.add(title);
    } else {
        titles.clear();
    }
}

function doDataPopulation2() {
    items2 = [{
        "Country": "United States",
            "Population": 35061247
    }, {
        "Country": "United Kingdom",
            "Population": 9284033
    }, {
        "Country": "Canada",
            "Population": 4095721
    }, {
        "Country": "Australia",
            "Population": 2335850
    }, {
        "Country": "Turkey",
            "Population": 3930792
    }];
    chart2.setDataSource(items1);
}

//Main Chart Data Information
function doDataPopulation() {
    items1 = [{
        "Country": "United States",
            "Population": 35061247
    }, {
        "Country": "United Kingdom",
            "Population": 9284033
    }, {
        "Country": "Canada",
            "Population": 4095721
    }, {
        "Country": "Australia",
            "Population": 2335850
    }, {
        "Country": "Turkey",
            "Population": 3930792
    }];
    chart1.setDataSource(items1);
}

//Detailed data per Country
function doDataCountry(country, chart) {
    if (country === 0) items = [{
        "United States": "Male",
            "People": 14451697,
            "Percentage": 10.43
    }, {
        "United States": "Female",
            "People": 20609550,
            "Percentage": 14.34
    }];
    if (country == 1) items = [{
        "United Kingdom": "Male",
            "People": 3867259,
            "Percentage": 13.19
    }, {
        "United Kingdom": "Female",
            "People": 5416774,
            "Percentage": 17.94
    }];
    if (country == 2) items = [{
        "Canada": "Male",
            "People": 1739417,
            "Percentage": 11.29
    }, {
        "Canada": "Female",
            "People": 2356304,
            "Percentage": 15.02
    }];
    if (country == 3) items = [{
        "Australia": "Male",
            "People": 1022950,
            "Percentage": 10.76
    }, {
        "Australia": "Female",
            "People": 1312900,
            "Percentage": 13.75
    }];
    if (country == 4) items = [{
        "Turkey": "Male",
            "People": 1811599,
            "Percentage": 5.46
    }, {
        "Turkey": "Female",
            "People": 2119193,
            "Percentage": 6.53
    }];

    chart.setDataSource(items);
}

function doDetailedInfo(countrySelected) {

    var selectedC = countrySelected;
    
}

Thanks 

 

De Wet

Share this post


Link to post
Share on other sites
  • 0

We just uploaded a new pre-release version that should fix this issue. Please download it and let us know if it fixes the problem in your real-world scenario.

 

Also note that in order for our sample to work when you hover first over the "default tooltip" chart and later over the custom tooltip one, you will need to cleanup the tooltip div as follows

 

   if (divInTooltip === null) {

        divInTooltip = document.getElementById('tipChartInfo');
 
        // This makes sure tooltip is cleaned up if it was already shown on a default tooltip
        while(args.tooltipDiv.hasChildNodes())
             args.tooltipDiv.removeChild(args.tooltipDiv.lastChild);
        
        args.tooltipDiv.appendChild(divInTooltip);
 
The fix makes sure that once you customize a tooltip, we do not try to reuse that div for other charts tooltips.
 
Regards,
 
JuanC

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×