Jump to content
JChartFX Community

LordParallax

Members
  • Content count

    3
  • Joined

  • Last visited

Community Reputation

1 Neutral

About LordParallax

  • Rank
    Newbie
  1. Tooltips not appearing on single-series line charts

    So you were right, it was an issue with customising after the chart's creation. Now I do all customisation beforehand, then create the chart. However, interestingly I need to call: chart.setDataSource(json); title.setText(chartTitle); chart.getLegendBox().setWidth(legendWidth); After the chart creation or their respective changes did not take effect. But this issue is now resolved, tool-tips are working as expected. Thanks for your help.
  2. Tooltips not appearing on single-series line charts

    Hi Juan, thanks for getting back to me. jChartFX version: 7.2.5289.19355 Broswers tested: Chrome & Firefox (These are the only browsers I want/need this to work on) Some sample code: (Sorry for the loss of indentation!) var cfx; var chart = new cfx.Chart(); var customGridLine = []; var maxCustomGridLines = 0; var titles = chart.getTitles(); var title = new cfx.TitleDockable(); function initialiseGraph() { chart.getLegendBox().setWidth(400); var divHolder = document.getElementById('ChartDiv'); chart.create(divHolder); chart.setFont("bold 40pt Arial"); titles.add(title); chart.setCulture({ "shortDate": "dd/MM/yyyy", "days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], "abbDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], "abbMonths": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], "am": "AM", "pm": "PM", "dateSepa": "/", "timeSepa": ":", // Numeric "decSymb": ".", "groupNumb": 3, "groupCurr": 3, "groupSymb": ",", "currSymb": "£", "currPos": 0, "currNeg": 0, "percSymb": "%", "percPos": 1, "percNeg": 1 }); } function createLineGraph(json, yAxisNames, yAxisFormat, chartTitle, legendWidth, targetValues, targetNames) { $('#ChartDiv').fadeOut(1000, function() { if (isValidJson(json, yAxisNames)) { $('#NoDataAvailable').hide(); chart.getAxisY().setMin(0); chart.getAxisY().setMax(Math.max(getJsonMax(json, yAxisNames), getTargetValuesMax(targetValues)) * 1.1); chart.getLegendBox().setWidth(legendWidth); if (yAxisFormat === 'Number' || typeof yAxisFormat === 'undefined') { chart.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number); } else if (yAxisFormat === 'Currency') { chart.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency); } else if (yAxisFormat === 'Percentage') { chart.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Percentage); } else { chart.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number); } var numberOfSeries = yAxisNames.length; chart.getData().setSeries(numberOfSeries); var series = new Array(numberOfSeries); for (var i = 0; i < numberOfSeries; i++) { series[i] = chart.getSeries().getItem(i); series[i].setGallery(cfx.Gallery.Lines); } chart.getToolTips().setAllSeries(true); chart.getToolTips().setEnabled(true); alert(cfx.Version); if (targetValues) { clearCustomGridLines(); var numberOfTargets = targetValues.length; if (numberOfTargets > maxCustomGridLines) { maxCustomGridLines = numberOfTargets; } for (i = 0; i < numberOfTargets; i++) { if (typeof customGridLine[i] === 'undefined') { customGridLine[i] = new cfx.CustomGridLine; } customGridLine[i].setValue(targetValues[i]); customGridLine[i].setText(targetNames[i]); customGridLine[i].setShowText(false); customGridLine[i].setColor("#0000FF"); chart.getAxisY().getCustomGridLines().add(customGridLine[i]); } } else { clearCustomGridLines(); } chart.setDataSource(json); chart.update(); title.setText(chartTitle); $('#ChartDiv').fadeIn(2000, function() {}); } else { $('#NoDataAvailable').html('No Data Available<br/>' + chartTitle); $('#NoDataAvailable').show(); } }); } As for the div holding the content, it is simply this div inside the body, nothing fancy going on: <div id="ChartDiv" class="b-chart-div"></div> I look forward to your response. Thanks, LordP
  3. The title pretty much says it all. On charts with 2 or more series' the tooltips work correctly as you'd expect. However on single-series charts hovering over points will not display the tooltip. Is there a way to change this? Thanks
×