Jump to content
JChartFX Community
  • 0

Custom ToolTip Weird Issue

Falkon

Asked by Falkon,

 Share

Question

Falkon Newbie

Falkon

Posted
Posted

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. 

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
dewetellis Newbie

dewetellis

Posted
Posted

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
Link to comment
Share on other sites
  • 0
dewetellis Newbie

dewetellis

Posted
Posted

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

Link to comment
Share on other sites
  • 0
JuanC Newbie

JuanC

Posted
Posted

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
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to question listing
×
×
  • Create New...