Tooltips not appearing on single-series line charts

[LordParallax]

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

[JuanC]

I just tested this and it works fine with a single series line chart, can you specify the following to help us troubleshoot the issue

 

- jChartFX version, you can view this using alert(cfx.Version)

- Browser(s) tested

- Small sample code showing used API

 

If possible also check the characteristics of the div that is hosting the chart content and its parents, we have had some issues in older builds when a chart for example is hosted in a div whose parent div has relative positioning.

 

Regards,

 

JuanC

[LordParallax]

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

 

[JuanC]

Can you try the following

 

Try a page with this code

 

$(document).ready(function($) {

 

   var chart1 = new cfx.Chart();

   var divHolder = document.getElementById('ChartDiv');

   chart1.setGallery(cfx.Gallery.Lines);

   chart1.setDataSource([10,12,14,8,13]);

   chart1.create(divHolder);

 

}

 

If this works you might want to try calling all the code that customizes the chart between the new cfx.Chart() and the chart1.Create() call, this will also make sure the chart is only rendered once onto the HTML page.

 

Regards,

 

JuanC

 

 

 

[LordParallax]

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.