Jump to content
JChartFX Community

dewetellis

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by dewetellis

  1. Custom ToolTip Weird Issue

    in General Questions

    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

  2. Custom ToolTip Weird Issue

    in General Questions

    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
×
×
  • Create New...