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