Jump to content
JChartFX Community

JuanC

Administrators
 View Profile  See their activity

  • Posts

    421

  • Joined

  • Last visited

  • Days Won

    3

 Content Type 

Everything posted by JuanC

  1. JuanC
    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
  2. JuanC
    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
  3. JuanC
    We have uploaded a new pre-release version that should fix this issue. JuanC
  4. JuanC
    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
  5. JuanC
    Some motifs require you to include jchartfx.advanced.js, this is something we will be fixing in future builds. Regards, JuanC Attachments.zip
  6. JuanC
    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 type="text/javascript" src="jchartfx.system.js"> </script> <script type="text/javascript" src="jchartfx.coreVector.js"> </script> </head> <body onload="onPageLoad()"> <div id="myDiv" style="width:400px;height:400px;display:inline-block"></div> <script language="javascript"> var chart1; function onPageLoad() { chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Pie); chart1.create("myDiv"); }; </script> <br/> </body> </html> Regards, JuanC
  7. JuanC
    Try setting a width and height to the mychartid div, e.g. <div id="mychartid" style="width:600px;height:400px"></div> Regards, JuanC
  8. JuanC
    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
  9. JuanC
    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
  10. JuanC
    The bug only occurs when you set per-point attributes, it should be fixed on our next build. Regards, JuanC
  11. JuanC
    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 <div id="divSize"></div> </br> <div id="myDiv" style="width:100%;height:100%;position:absolute;top:20px"></div> 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
  12. JuanC
    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
  13. JuanC
    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 type="text/javascript" src="jchartfx.system.js"> </script> <script type="text/javascript" src="jchartfx.coreVector.js"> </script> <script type="text/javascript" src="jchartfx.coreVector3d.js"> </script> </head> <body onload="onPageLoad()" onresize="onPageResize()"> <div id="myDiv" style="width:100%;height:100%;position:absolute"></div> <script language="javascript"> 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
  14. JuanC
    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 type="text/javascript" src="jchartfx.system.js"> </script> <script type="text/javascript" src="jchartfx.coreVector.js"> </script> <script type="text/javascript" src="jchartfx.coreVector3d.js"> </script> </head> <body onload="onPageLoad()"> <div id="myDiv" style="width:400px;height:400px;display:inline-block"></div> <script language="javascript"> 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>
  15. JuanC
    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
  16. JuanC
    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 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.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 onload="onLoadDoc()"> <div id="myDiv" style="width:600px;height:400px;display:inline-block"></div> </body> </html> If you select Inspect Element in your browser you should see something like this <rect sfxid="P,0,0" style="fill:#57acda;stroke:#4281a4;stroke-width:1" x="52.5" y="121.5" width="100" height="228"></rect> 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 <link rel="stylesheet" type="text/css" href="../Styles/Palettes/jchartfx.palette.css" /> <link rel="stylesheet" type="text/css" href="../Styles/Attributes/jchartfx.attributes.css" /> If you select Inspect Element in your browser you should see something like this <rect sfxid="P,0,0" class="Attribute Attribute0" x="52.5" y="121.5" width="100" height="228"></rect> ------ 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
  17. JuanC

    Pie Chart Size

    JuanC replied to jko's question in General Questions

    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 id="myDiv" style="width:600px;height:400px;display:inline-block;background-color:#FF0000"> </div> This results in no red div <div id="myDiv" style="width:100%;height:100%;display:inline-block;background-color:#FF0000"> </div> This results in a red div that reacts to browser sizing <div id="myDiv" style="width:100%;height:100%;position:absolute;background-color:#FF0000"> </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
  18. JuanC

    Pie Chart Size

    JuanC replied to jko's question in General Questions

    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 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(); // Customize chart here chart1.create("myDiv"); } </script> </head> <body onload="onLoadDoc()"> <div id="myDiv" style="width:600px;height:400px;display:inline-block"></div> </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
  19. JuanC
    >> 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
  20. JuanC
    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
  21. JuanC
    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
  22. JuanC
    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
  23. JuanC
    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
  24. JuanC
    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
  25. JuanC
    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
×
×
  • Create New...