JuanC

See answer at http://community.jchartfx.com/topic/453-tooltip-for-pie-chart-does-not-work/ We need CSS and Scripts files in order to recreate issue so that we can try to fix it or provide a workaround. JuanC

In order to try to fix the bug or provide a workaround, we have to be able to recreate the problem, please post (or email if to products at softwarefx dot com if sensitive) a zip file containing the CSS files used in your page as well as the Scripts (javascript) used by the page. JuanC

In order to help you we will need the code that actually gets sent to the client (HTML page, including additional js scripts related to the chart), we cannot test server side code as we do not have the same environment you have. We need for you to use "View Page Source" and send us the HTML that gets to the client. We might also need additional scripts and/or CSS JuanC

Please see my answer to tooltip like feature in the other thread you posted. JuanC

In order to help you we will need the code that actually gets sent to the client (HTML page, including additional js scripts related to the chart), this allows to troubleshoot issues without the need to duplicate your server side architecture (ASP.NET, Perl, Python, MVC, etc.) Have you checked if there is an error displayed in your browser's console? Can you provide the version of jChartFX you are using? Are you able to replicate the error in a simple page (preferably a client-only HTML page)? JuanC

Can you describe what you mean by "an area of a chart"? If you mean one of the chart markers (bars, pie slices, etc.) we should already be displaying a tooltip when you hover. If you mean a separate "custom" area, you should be able to create an annotation and attach a tooltip to it, provided that the annotations we support allow you to define your area. Please post or send an image to understand your scenario better. Regards, JuanC

1) Our titles should support \r\n as a manual separator for multi line titles, there was a bug in 7.4.5649 that has been fixed in our internal builds that relates to the alignment used when painting multi line titles. 2) We will add support for a property called WordWrap to allow automatic word wrapping of titles, please note that this changes a little bit how our code allocates the sizes for titles, axes, etc. We will recommend only using word-wrap on either horizontal or vertical titles, but not both, as using word wrap on both could create situations where multiple passes are needed as each title could affect the space for titles on the other orientation which could in turn affect the first title and so on. Our next unstable build will also include both of these changes if you want to test it before it is released. Regards, JuanC

We do not have a method to hide the tooltip, but this is a div shared by all charts and gauges in the page, I would suggest you get it with document.getElementById("sfx_toolTip") and change its visibility to hidden. We will add a method to do this in future builds. JuanC

I apologize for the lack of docs. chart1.getAllSeries().getStackedLabels().setVisible(true); getStackedLabels returns a labels object so you can also change font and other visual attributes. JuanC

We are not aware of this issue, the code is written so that if you use our CSS then all series in the chart (and most elements in it) will use the CSS and Ignore the visual attributes (color, line width, etc) supplied through the API. We have never had code that can paint some series using CSS and others using the API (at least on purpose) I am not sure what you mean when you say "so long as the series was not in the CSS file". Can you provide a small repro case that exhibits this behavior? JuanC

chart1.getAllSeries().getStackedLabels().setVisible(true); getStackedLabels returns a labels object so you can also change font and other visual attributes. JuanC

I only see a scroll bar for the page, did not notice any scrollbars on any of the charts. Please send your zip file to products at softwarefx dot com Regards, JuanC

Please send your zip file (please make sure it only includes "client side" files such as the HTML page that gets processed by the client, your own scripts, etc.) to products at softwarefx dot com Regards, JuanC

In order to have 2 charts you will need 2 different divs in your page to "hold" them. Even though the script you attached seems to try to create multiple divs I only saw one div when using "Inspect" in your page. Also you are trying to reload the charts every X amount of time, have you tried commenting the setInterval call to see if the problem still persists? JuanC

Please check if you are getting any errors in the javascript console. Also check if you are using the most recent version for the jchartfx controls as you might be hitting an issue we already fixed. When posting samples, please try to post a "client side" sample, e.g. post the script that gets to the browser so that we can test it without having to recreate your server side environment, e.g. apache/perl/IIS/asp/etc. Another option would be to try to create a simple page duplicating the functionality you want and then try to increase its complexity, this will help you find out what causes the issue. This page, should work as is, and show the alert describing the series and point that was clicked. I tried to use as much of the features you are using. <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.js"> </script> <script type="text/javascript" src="jchartfx.system.js"> </script> <script type="text/javascript" src="jchartfx.coreVector.js"> </script> <script type="text/javascript" src="jchartfx.advanced.js"> </script> </head> <body> <div id="myDiv" style="width:600px;height:400px;display:inline-block"></div> <br/> <script language="javascript"> var chart1; $(document).ready(function($) { chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Pie); var title = new cfx.TitleDockable(); title.setText("Groups"); chart1.getTitles().add(title) var fields = chart1.getDataSourceSettings().getFields(); var field1 = new cfx.FieldMap(); field1.setName("group"); field1.setUsage(cfx.FieldUsage.Label); fields.add(field1); var field2 = new cfx.FieldMap(); field2.setName("hits"); field2.setUsage(cfx.FieldUsage.Value); fields.add(field2); chart1.getAllSeries().getPointLabels().setVisible(true); chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.Near); chart1.setDataSource([{"group":"First","hits":45},{"group":"Second","hits":15},{"group":"Third","hits":38}]); chart1.create("myDiv"); $("#myDiv").click(function(evt) { if (evt.hitType == cfx.HitType.Point) alert("Series " + evt.series + " Point " + evt.point); }); }); </script> </body> </html> JuanC

There is bug that prevents us from showing a legend where all items cannot be painted completely horizontally (when it is at the bottom/top), we will try to fix this in future builds. In the meantime you could try to 1) reduce the font used in the legend box chart1.getLegendBox().setFont("6pt Arial"); 2) Allow the legend box to use full width instead of the plot area width (note texts are aligned with doughnut) chart1.getLegendBox().setPlotAreaOnly(false); Regards, JuanC

I also tested both 7.2, 7.4 and our current development versions and they all showed the legend box correctly. JuanC

I retested the code I submitted in both Mac and Windows and they both look fine in all browsers tested. Are you using any other framework or script that could be changing some settings, e.g. I have seen where certain frameworks include a css that changes line-height for the whole page. Can you try a very simple page like this <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jchartfx.system.js"> </script> <script type="text/javascript" src="jchartfx.coreVector.js"> </script> <script type="text/javascript" language="javascript"> var chart1; function onLoadDoc() { chart1 = new cfx.Chart(); chart1.setDataSource([{"Auto Loan Balances":68206872.03,"30 Days Delinquent":2313403.43},{"Auto Loan Balances":67602034.03,"30 Days Delinquent":1708217.61}]); chart1.setGallery(cfx.Gallery.Bar); chart1.getLegendBox().setDock(cfx.DockArea.Bottom); chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near); chart1.create("myDiv"); } </script> </head> <body onload="onLoadDoc()"> <div id="myDiv" style="width:600px;height:400px;display:inline-block"></div> </body> </html> JuanC

The problem is that the chart does not assume strings can be plotted as numbers, and your posts field is being returned as a string 1) Solution 1 Change the page/process that generates the JSON so that it looks like this (note that the numbers should have no quotes) [{ "username" : "Jill", "posts" : 106, "friends" : "", "status" : "", "polls" : ""},{ "username" : "Carly", "posts" : 93, "friends" : "", "status" : "", "polls" : ""},{ "username" : "Chris", "posts" : 11, "friends" : "", "status" : "", "polls" : ""}] 2) Solution 2 Manually tell us which fields should be used as values to be plotted var fields = chart1.getDataSourceSettings().getFields(); var field1 = new cfx.FieldMap(); field1.setName("username"); field1.setUsage(cfx.FieldUsage.Label); fields.add(field1); var field2 = new cfx.FieldMap(); field2.setName("posts"); field2.setUsage(cfx.FieldUsage.Value); fields.add(field2); Regards, JuanC

This is the simplest HTML page (no server side needed) to test the jChartFX doUpdate functionality, the only external requirement is jQuery, note that there are 2 links, you should first click Resize Div and later click Resize Chart <!DOCTYPE html> <html> <head> <script type="text/javascript" src="Include/jquery.js"> </script> <script type="text/javascript" src="jchartfx.system.js"> </script> <script type="text/javascript" src="jchartfx.coreVector.js"> </script> </head> <body> <div id="myDiv" style="width:400px;height:300px;display:inline-block"></div> <script language="javascript"> var chart1; $(document).ready(function($) { chart1 = new cfx.Chart(); chart1.create("myDiv"); }); function resizeDiv() { var divElem = document.getElementById("myDiv"); divElem.style.width = "600px"; divElem.style.height = "400px"; } function resizeChart() { chart1.doUpdate(true); } </script> <br/> <a href="javascript:resizeDiv()">Resize Div</a> <a href="javascript:resizeChart()">Resize Chart</a> </body> </html> If this works in your system it means doUpdate is working as expected, if it doesn't it might be that you are using a very old version of jChartFX that obfuscates the name of doUpdate. After this test, you will then need to if the resize function is in fact being called and also if the div that holds the chart has the size you expect. Regards, JuanC

Actually, when using CSS, all API calls that relate to colors, fonts and line attributes are ignored and should be set using CSS. There are only a couple of situations where we do not have a boolean property (e.g. border around point labels is one of these corner cases) so you need to use a setColor call and even there we will receive the "intent" of using borders when you use setColor API but the actual color will be used from CSS. JuanC

You can start evaluating it today by downloading the unstable branch (any build marked 7.4.5666 or later) JuanC a7.4. 7.4.56665666

The ChangedByUser Event does not exist (the documentation is incorrect). If you need to be notified of user changes and need to save changes you should download the unstable channel and look at this thread for details. http://community.jchartfx.com/topic/409-persisting-changes-made-using-the-new-menu/ JuanC

Edge (like IE) does no support part of the SVG standard that relates to vertically aligning text, so we added a couple of months ago some code so that we handle that manually. Can you check the version of jChartFX you are using, e.g. alert(cfx.Version) If you do not have the most recent build, please try downloading the latest build from our site, if the problem persists, please include a code sample and a screenshot of how the issue looks in your browser. JuanC

Currently the release version does not have an event fired when the user makes changes through the UI. JuanC