JuanC

January 15, 2016

We just uploaded a new pre-release version that should fix this issue. Please download it and let us know if it fixes the problem in your real-world scenario.

Also note that in order for our sample to work when you hover first over the "default tooltip" chart and later over the custom tooltip one, you will need to cleanup the tooltip div as follows

if (divInTooltip === null) {

divInTooltip = document.getElementById('tipChartInfo');

// This makes sure tooltip is cleaned up if it was already shown on a default tooltip

while(args.tooltipDiv.hasChildNodes())

args.tooltipDiv.removeChild(args.tooltipDiv.lastChild);

args.tooltipDiv.appendChild(divInTooltip);

The fix makes sure that once you customize a tooltip, we do not try to reuse that div for other charts tooltips.

Regards,

JuanC

January 12, 2016

I would recommend you download our most recent jChartFX version and try again. If the problem persists, please post or send us a small sample page that exhibits this behavior.

Regards,

JuanC

January 5, 2016

We have uploaded a new pre-release version that should fix this issue.

JuanC

December 23, 2015

Let me know if you are still experiencing this issue. I checked the face motif and it does not seem to use any constants named Centered (it should not need advanced for it to work).

Also try to create a simple page with a chart (no jquery or any other scripts other than jChartFX) and use the motif to see if it works.

JuanC

December 22, 2015

Some motifs require you to include jchartfx.advanced.js, this is something we will be fixing in future builds.

Regards,

JuanC

Attachments.zip

December 22, 2015

You should not have to dig for the svg node, the only case where we add the z-index (AFAIK) is when the div in question has child nodes, can you check if there is a script that might be adding something to your div before the chart code runs?

Also you might want to try with a simple page to see if it helps you find what is causing the z-index issue.

<!DOCTYPE html>

<html>

<head>

</script>

</script>

</head>

var chart1;

function onPageLoad()

{

chart1 = new cfx.Chart();

chart1.setGallery(cfx.Gallery.Pie);

chart1.create("myDiv");

};

</script>

<br/>

</body>

</html>

Regards,

JuanC

December 22, 2015

Try setting a width and height to the mychartid div, e.g.

Regards,

JuanC

December 17, 2015

It will be released in our next public build, it will likely be labeled 7.5 as it includes several changes including improvements in pie/doughnut labels and new APIs in areas such as annotations, titles, and others.

JuanC

December 10, 2015

Your code is correct, there is a bug in jChartFX where if you set per-point attributes, e.g. chart1.getPoints().getItem(...) then the per-series label attributes are not properly honored for some series.

If you comment the 3 or 4 lines of code that set per-point attributes (around line 30 in jsfiddle) you will see the per-series labels attributes are processed correctly.

Obviously you are setting per-point attributes because you need them so you will have to wait for the next build that will fix this issue.

JuanC

December 9, 2015

The bug only occurs when you set per-point attributes, it should be fixed on our next build.

Regards,

JuanC

December 1, 2015

Do you experience the latest thing you reported "if i increase the width and height of the window with the chart the top and bottom does not have as much extra space as the left and right side of the chart" using the stand alone sample code I posted?

As I said before, we need to find out if the problem happens at a specific chart size, or if the problem is because of the continuous resizing. To try that please change the page that I posted as follows

</br>

function onPageResize()

{

if (chart1 != null) {

chart1.doUpdate(true);

var divChart = document.getElementById("myDiv");

var elemSize = document.getElementById("divSize");

elemSize.innerHTML = "Width:" + divChart.clientWidth + " Height:" + divChart.clientHeight;

}

Then resize the browser until you get to the behavior you describe, and note the width and height reported inside the page, Now change the chart's div to have that fixed size. Let us know if the chart looks different or the same when resizing against using a fixed size. Also include screenshots or links to screenshots.

JuanC

November 30, 2015

Again please try commenting out the 3D and SliceSeparation calls to see if you still see the same behavior. Also note that pie charts have a target aspect ratio (square for 2D while 3D uses ovals to account for 3D effect) so if the size of the div does not match the target aspect ratio, there will be more empty space.

To rule out if the error is related to sizing, please try the fixed size approach with a "big" size, e.g. 1200x800

JuanC

November 30, 2015

To handle browser resize on this page you would need a different approach, shown on this page, note that chart div should not have a fixed size if you want the size of the chart to change. I recommended setting a fixed size to try to figure out if your problem was a general misuse of space or related to handling resizing.

<!DOCTYPE html>

<html>

<head>

</script>

</script>

</script>

</head>

var chart1 = null;

function onPageLoad()

{

chart1 = new cfx.Chart();

chart1.setGallery(cfx.Gallery.Pie);

chart1.getAllSeries().getPointLabels().setVisible(true);

//var pieAttr = chart1.getAllSeries().getGalleryAttributes();

var pieAttr = chart1.getGalleryAttributes();

pieAttr.setSliceSeparation(40);

pieAttr.setLabelsInside(true);

pieAttr.setExplodingMode(cfx.ExplodingMode.First);

chart1.getAllSeries().getPointLabels().setFormat("%p%%");

chart1.getAxisY().getDataFormat().setDecimals(2);

chart1.getView3D().setEnabled(true);

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

chart1.getLegendBox().setVisible(false);

chart1.getPlotAreaMargin().setTop(1);

chart1.getPlotAreaMargin().setBottom(1);

chart1.getPlotAreaMargin().setRight(1);

chart1.getPlotAreaMargin().setLeft(1);

chart1.create("myDiv");

};

function onPageResize()

{

if (chart1 != null)

chart1.doUpdate(true);

}

</script>

</body>

</html>

JuanC

November 30, 2015

Try the following page, click the Resize Div link and then the Resize Chart link. Do you get the same sizing behavior you describe? If so I would recommend to consider using 2D instead of 3D as a 3D Pie will shrink the space vertically to allow for 3D effect, also consider decreasing or removing slice separation as this also increases the white space around chart.

If you do not see the behavior with this chart, then change data or any other attributes needed to duplicate the behavior, note that this single page can be tested with no frameworks, server technologies, etc. so it is very easy for us to duplicate issues and try to find solutions.

<!DOCTYPE html>

<html>

<head>

</script>

</script>

</script>

</head>

var chart1;

function onPageLoad()

{

chart1 = new cfx.Chart();

chart1.setGallery(cfx.Gallery.Pie);

chart1.getAllSeries().getPointLabels().setVisible(true);

//var pieAttr = chart1.getAllSeries().getGalleryAttributes();

var pieAttr = chart1.getGalleryAttributes();

pieAttr.setSliceSeparation(40);

pieAttr.setLabelsInside(true);

pieAttr.setExplodingMode(cfx.ExplodingMode.First);

chart1.getAllSeries().getPointLabels().setFormat("%p%%");

chart1.getAxisY().getDataFormat().setDecimals(2);

chart1.getView3D().setEnabled(true);

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

chart1.getLegendBox().setVisible(false);

chart1.getPlotAreaMargin().setTop(1);

chart1.getPlotAreaMargin().setBottom(1);

chart1.getPlotAreaMargin().setRight(1);

chart1.getPlotAreaMargin().setLeft(1);

chart1.create("myDiv");

};

function resizeDiv()

{

var divElem = document.getElementById("myDiv");

divElem.style.width = "600px";

divElem.style.height = "600px";

}

function resizeChart()

{

chart1.doUpdate(true);

}

</script>

<br/>

<a href="javascript:resizeDiv()">Resize Div</a> <a href="javascript:resizeChart()">Resize Chart</a>

</body>

</html>

November 30, 2015

ChartFX will always create the outer svg with the size of the "host" div in pixels, any other objects will also be created of a specific size (not percentage).

It would be useful to break your problem in 2 smaller issues

1) Does the chart generate the pie slices of an appropriate size when using a fixed div size, e.g. 400x400

If this is not the case please post or send us a small repro case following our recommendations (start with simple page, try not using any unneeded frameworks, etc.)

2) Does the chart reacts to changes in div size

For this you have to make sure you handle the HTML global resize event and invoke chart.doUpdate(true)

JuanC

November 18, 2015

Are you including any css related to jChartFX? Are you defining any jChartFX related rules in any of your CSSs?

jChartFX have 2 modes of operation

1) If you do not include any of our CSS, we will generate all the elements in the chart with "hardcoded" colors in the resulting HTML. In this mode to change one of the colors you would use one of our APIs

<!DOCTYPE html>

<html>

<head>

</script>

</script>

var chart1;

function onLoadDoc()

{

chart1 = new cfx.Chart();

chart1.setGallery(cfx.Gallery.Bar);

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

chart1.getLegendBox().setVisible(false);

chart1.setBorder(null);

chart1.getAxisX().setVisible(false);

chart1.getAxisY().setVisible(false);

chart1.create("myDiv");

}

</script>

</head>

</body>

</html>

If you select Inspect Element in your browser you should see something like this

2) If you include our CSS (note that we ship a set of palettes and a set of attributes, normally you would include one of each), then jChartFX will generate the chart elements using classes. In this mode you would change colors by modifying the appropriate entries in the CSS

HTML same as 1 but include these 2 inside the head element

If you select Inspect Element in your browser you should see something like this

------

Your page seems to be using CSS, I would recommend you make sure you are including one of our palettes and attributes, also make sure these CSSs are up-to-date in relation to the scripts, i.e. they were downloaded at the same time.

Finally you can use Inspect Element to find out why the background is black, you will probably find a rectangle with class Border, and the palette CSS should have a rule for it.

Hope this helps.

If you cannot fix the problem, try modifying these simple pages with your code/css/js until you can reproduce the problem, that will allow you to find out what is causing the issue and/or send the page to us so that we can reproduce the issue on a small page.

JuanC

November 12, 2015

If you find something is not working with the chart, try it out without the chart, e.g. don't call chart.create or any other chart functions.

This results in a red div with fixed size

</div>

This results in no red div

</div>

This results in a red div that reacts to browser sizing

</div>

If you add the chart creation code and remove the background-color, you would also need to attach a handler to the body onresize event to call chart.doUpdate. Because this event only exists in the page we decided not to attach handlers to it so you have to do it manually.

JuanC

Attachments.zip

November 12, 2015

Please provide a reproducible small page showing the issue. As always we recommend you start with a simple page with a chart, e.g.

<!DOCTYPE html>

<html>

<head>

</script>

</script>

var chart1;

function onLoadDoc()

{

chart1 = new cfx.Chart();

// Customize chart here

chart1.create("myDiv");

}

</script>

</head>

</body>

</html>

Then add the minimum amount of code (chart data, important attributes such as gallery, etc.) to show the issue you are experiencing.

This will allow us to either suggest workarounds to your code, new properties to mitigate the issues or try to fix bugs or provide new functionality if possible.

JuanC

November 12, 2015

>> I also noticed there was a jchartfx JS error. I am not sure if this may be causing the pie chart to not fill out more of the white space on the page.

Probably not, to make sure you would have to follow my instructions to prepare a repro case that we can use (start from a simple page, customize div, add chart if necessary, etc.)

>> I am having problems trying to include an image on the pie chart to show you the white space around the pie chart.

Feel free to email an image or try posting a link to such image.

>> I used % values for width and heoght so that as the widget is resized the jChartFX chart is resized

Even if you use % values for a div, we do not receive any events when such div is resized, there is an event fired at the page level that you can receive (<body onresize="onResizePage()">, you will need to invoke chart.doUpdate(true) to regenerate the svg with the new size.

JuanC

November 10, 2015

We received the credentials, unfortunately although we can see the issue there is no way for us to try to fix our code or provide a workaround as we have no way of modifying the code that is running on your server (or the JS provided by your server).

In general, when posting an issue you should try the following

1) Start with an empty HTML page that creates a chart

2) If necessary change the div's size and chart attributes to match your chart using hardcoded data

3) Slowly try to match your page scenario (e.g. Div hierarchy, additional scripts such as jQueryUI, bootstrap, etc.)

Once you duplicate the problem in a stand-alone fashion, post or send us a zip containing the page and all additional scripts and CSS files.

Note that in this particular case, the fact that the tooltip is rendered behind has nothing to do with how your customize the chart (colors, fonts, API) but only with the hierarchy of divs in your page and possibly with interaction with other scripts jQueryUI, bootstrap, etc.

JuanC

November 10, 2015

It is hard to figure out exactly why there is "a lot" space around the pie as you do not provided a screenshot and we cannot run the code you provided as we have no idea of the final size of the chart or the data provided to it (and we do not have all your server side data/code)

1) Pies are drawn as a circle so if the chart is "too" wide/tall there will be more wasted space.

2) In recent builds we improved pie layout code to avoid wasting space for outside labels in certain scenarios. I am afraid we have not released any builds (stable or unstable) with these changes yet.

JuanC

November 10, 2015

We have a flag to avoid showing the labels inside but we do not have a flag to force the labels to be inside. If we calculate the size of the label and decide it will be bigger than the slice it will be drawn outside.

JuanC

November 10, 2015

Using setBackColor or fill-opacity in .Border was a direct answer to your question about transparent background.

It has nothing to do with the tooltip position in relation to other page elements.

JuanC

November 9, 2015

By modifying .jchartfx you are modifying the opacity of every drawing, text, etc. for both the chart and tooltip. Please set the fill-opacity for the .jChartFX .Border as suggested in my post.

JuanC

November 9, 2015

To remove the background you probably will have to remove or change the border, as some of the borders may paint effects after the background is painted.

// Remove the border

chart1.setBorder(null);

// If you are NOT using CSS, this should remove the background, you can test a simple page with a chart and change the background-color for the body

chart1.setBackColor("#00FFFFFF");

If you are using CSS, you can make the chart's background transparent by modifying the jchartfx palette CSS in use and set the fill-opacity to 0 for the Border attribute, you could also add this inline CSS which should overwrite the one from the palette

<style>

.jchartfx .Border {

fill-opacity: 0;

}

</style>

JuanC

Sign In

JuanC

Posts

Joined

Last visited

Days Won

Content Type

Profiles

Forums

Events

Posts posted by JuanC

Custom ToolTip Weird Issue

Custom ToolTip Weird Issue

Not possible to set label colors and offset per series

Error on including motif js

Error on including motif js

Pie chart not rendering

Pie chart not rendering

Not possible to set label colors and offset per series

Not possible to set label colors and offset per series

Not possible to set label colors and offset per series

Size of chart

Size of chart

Size of chart

Size of chart

Size of chart

Rendering Issue in Safari

Pie Chart Size

Pie Chart Size

Size of chart

Tooltip for Pie chart does not work

Size of chart

set Labels Inside Pie Chart nomatter what size the page is

transparent background

Tooltip for Pie chart does not work

transparent background

Browse

Activity