Jump to content
JChartFX Community


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by JuanC

  1. Please see my answer to tooltip like feature in the other thread you posted. JuanC
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. chart1.getAllSeries().getStackedLabels().setVisible(true); getStackedLabels returns a labels object so you can also change font and other visual attributes. JuanC
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. JuanC

    Legend box

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

    Legend box

    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
  16. 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
  17. 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
  18. JuanC

    CSS vs API

    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
  19. 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
  20. 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
  21. 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
  22. Currently the release version does not have an event fired when the user makes changes through the UI. JuanC
  23. The saveJson function was only added in the latest unstable build (5666). We should be publishing documentation for these 2 methods soon. To be notified of UI changes by the user you would set the uiNotify to a function as in my previous post. We might rename this event before pushing the changes to the stable channel (probably changedByUser) Regards, JuanC
  24. The reason to have a baseline is that 1) your code will make some changes to the chart and 2) if you are using a motif, it might make some changes to the chart. If you include these changes when serializing the user changes, it might make it impossible to change motifs at a later time. There is a method already in chart called saveJson. If you invoke it without parameters it will return a JSON that contains the serialization of the chart but only the values that are different than the default. If you pass an empty object, e.g. chart1.saveJson({}), it will return the complete serialization of the chart (all members will be serialized). There is also a method called loadJson that receives a JSON object and reads the chart settings from it. Both of these (loadJson and saveJson) are implemented in the persistence js JuanC
  25. The current version of jChartFX does not support wrapping of text in titles, if your chart size is fixed, you could create multiple titles but obviously this won't work if the chart size is dynamic. We will investigate adding support for this in future versions of the product. Regards, JuanC
  • Create New...