Jump to content
JChartFX Community

dewetellis

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

dewetellis's Achievements

Newbie

Newbie (1/14)

0

Reputation

  1. dewetellis
    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. dewetellis
    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...