Jump to content
JChartFX Community
  • 0

Tooltips not appearing on single-series line charts


Question

4 answers to this question

Recommended Posts

  • 0

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

Link to post
Share on other sites
  • 0

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

 

Link to post
Share on other sites
  • 0

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

 

 

 

Link to post
Share on other sites
  • 0

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...