All Activity

This stream auto-updates   

  1. Earlier
  2. Hi JuanC, First of all thank you for your reply. >> What I meant was, can you try commenting the block of code where you customize the chart (chart gallery, colors, etc) and/or the block of code where you pass the data, WITHOUT commenting the doUpdate call to find out if there is a specific code that triggers the issue. Yes, I had tried your suggestion and found that in background i forgot to clear previous charts object list that's why in second time it will find duplicate object and try to resize old one and generate error. I cleared previous old objects list and error was resolved. Thanks for your support and suggestion.
  3. >> No, If i commit "chart.doUpdate(true);" then every thing is OK, But chart resize not possible What I meant was, can you try commenting the block of code where you customize the chart (chart gallery, colors, etc) and/or the block of code where you pass the data, WITHOUT commenting the doUpdate call to find out if there is a specific code that triggers the issue. >> When i load dashboard-01 first time then resize of chart is working perfect. When i come from same dashboard after dashboard-02 and try to resize then Are dashboard-01 and dashboard-02 different HTML pages? We need to be able to duplicate the problem in-house in order to find a fix and test it. Can you try using console.log to log the sizes of the chart(s) just before you do the initial render as well as before the doUpdate calls? This could let you and us know which of the charts are failing and the sequence of events that triggers the issue, also knowing if the error happens without any of the chart customizations or data will be critical to try to reproduce and fix the issue. Regards, JuanC
  4. Hi JaunC, 1) Are there any chart settings relevant to the occurrence of this problem (i.e. does the problem still happens if you comment them out) -- No, If i commit "chart.doUpdate(true);" then every thing is OK, But chart resize not possible. 2) Is the data relevant to the issue. -- No 3) Does the error happens on a particular scenario, e.g. the first time a chart is resized, when a chart is too big or too small, etc. --May be Yes, because first time it's resize correctly. but after some time when i come for same it's generate above error. -- I try to explain my scenario. we have two dashboards and each dashboards have some charts. We using AngularJs and also use AngularJs Gridster to represent a chart. When i load dashboard-01 first time then resize of chart is working perfect. When i come from same dashboard after dashboard-02 and try to resize then "Error: <svg> attribute width: Expected length, "NaN"" and some other errors. All errors are show in attached file.
  5. We will need more information about this issue, including 1) Are there any chart settings relevant to the occurrence of this problem (i.e. does the problem still happens if you comment them out) 2) Is the data relevant to the issue. 3) Does the error happens on a particular scenario, e.g. the first time a chart is resized, when a chart is too big or too small, etc. Regard, JuanC
  6. Hello, I am a licensed JChartFX user. I am facing problem on resizing charts when window resize. I am using chart.doUpdate(true) on $(window).resize(), but when chart try to update it's give error message "Error: <svg> attribute width: Expected length, "NaN"". How can i resolve this issue with JchartFX? Thanks in advance
  7. Many thanks. in the pre-release setTimeHover is working but not with the horizontalGauge. How can i do it with horizontalGauge?
  8. We added this functionality somewhat recently as setTimeHover and it was later renamed to setInitialDelay. In order to use setTimeHover you need to use build 6114 or newer. In order to use setInitialDelay you need to use build 6162 or newer. I would recommend downloading our pre-release version which is 7.5.6127 and use setTimeHover. We should be uploading a new build soon. Regards, JuanC
  9. Thank you for your reply. If i try it on a horizontal gauge it does not work. I am getting an exception: Uncaught TypeError: hg.getToolTips(...).setInitialDelay is not a function. I have searched the whole sources and the method "setInitialDelay" does not exist.
  10. chart1.getToolTips().setInitialDelay(200); The delay is specified in milliseconds. Regards, JuanC
  11. Hello, we are evaluating jchartfx for using in our main application as the primary chart system. We are interested in the jChartFX+ version. It looks good and we can do all our things with jchartfx but we can not find how we can reduce the delay for the tooltip. It takes about 2 seconds until the tooltip will be shown. How can we reduce the delay? This is a very important feature for us and if it is not possible to reduce the time jChartFX+ is out of the question for us.
  12. Have you tried using the render event as I showed on my post? It should give you the feature that you need. I do not understand why you cannot invoke the ApplyRuleBuilderOnBarLineUniversalAreaChart before the chart create call, the way you are doing it now the chart will be painted twice (one without the axis section and one with) and that may be visible to the user. Is there a particular reason why you need to wait for the chart to be rendered to create the axis section? But again, if that is what you need you should be able to use the render event. Regards, JuanC
  13. Thanks @JuanC I saw comment #672 in forum. We need kind of that solution. let me clear this way. My requirements are, 1. Plotting a graph 2. Make some section according to some value and paint that section We plotted a graph and made section in this way chart1.create(document.getElementById("xychart" + xyChartData.widgetId)); //initialize rule builder $timeout(function () { ApplyRuleBuilderOnBarLineUniversalAreaChart(chart1, xyChartData.widgetNumber); }, 2000); function ApplyRuleBuilderOnBarLineUniversalAreaChart(Chart1, widgetID) { section = new cfx.AxisSection(); Chart1.getAxisY().getSections().add(section); section.setBackColor("#ffb2b2"); if (ruleList[Index].compareType == 1) { section.setFrom(someNumber); section.setTo(MaxPosition); } else { section.setFrom(someNumber); section.setTo(0); } section.getGrids().getMajor().setVisible(false); section.getGrids().getMinor().setVisible(false); section.getGrids().getMinor().setTickMark(cfx.TickMark.None); section.getGrids().getMajor().setTickMark(cfx.TickMark.None); section.setTextColor("#ffb2b2") ' ' . } I always need to change timeout when chart plot late due to large data or network problem. Meanwhile ApplyRuleBuilderOnBarLineUniversalAreaChart this function execution has no meaning. We want a event which confirms that chart plotting is completed and then we can execute function for create section to that particular chat. Thanks in advance
  14. I am not entirely sure what you mean "fire shading chart function" but there is an event we fire after we are done generating the chart visuals, chart1.on("render", onRenderEvent); function onRenderEvent() { } Hope this helps. JuanC
  15. Hello, I am a licensed JChartFX user. I am facing problem on shading charts/ making sections in chart when on very huge data. I want to shade chart after plotting entire chart. Temporary it is on time out but it is not good approch. I want to ask that is there any event that I can get line plotChatCompleted or complete chart event so I can fire shading chart function. Thanks in advance
  16. Hello JuanC, I did some further digging into this and found out that this is a classic Javascript type conversion bug - the code received the value for axes from a form field and the variable got passed to JChartFX as a string instead of being a Number. After I added explicit conversion to Number, the min/max values started to behave as expected. br, Timo
  17. I was unable to duplicate the issues you describe (and are visible in the screenshots). Can you please provide the code you use to customize the chart? Regards, JuanC
  18. Hello again, I'm encountering a strange issue with setMin/setMax when using this data: [{"myinfomonitor_ts":"2016-10-17T06:03:09.770Z","FI_max":0,"shift_sum":511,"engine_number_count":539},{"myinfomonitor_ts":"2016-10-24T06:03:09.770Z","FI_max":0,"shift_sum":339,"engine_number_count":534},{"myinfomonitor_ts":"2016-10-31T07:03:09.770Z","FI_max":0,"shift_sum":307,"engine_number_count":487},{"myinfomonitor_ts":"2016-11-07T07:03:09.770Z","FI_max":0,"shift_sum":418,"engine_number_count":445},{"myinfomonitor_ts":"2016-11-14T07:03:09.770Z","FI_max":0,"shift_sum":427,"engine_number_count":445},{"myinfomonitor_ts":"2016-11-21T07:03:09.770Z","FI_max":0,"shift_sum":371,"engine_number_count":387},{"myinfomonitor_ts":"2016-11-28T07:03:09.770Z","FI_max":0,"shift_sum":565,"engine_number_count":486},{"myinfomonitor_ts":"2016-12-05T07:03:09.770Z","FI_max":0,"shift_sum":620,"engine_number_count":698},{"myinfomonitor_ts":"2016-12-12T07:03:09.770Z","FI_max":0,"shift_sum":485,"engine_number_count":485},{"myinfomonitor_ts":"2016-12-19T07:03:09.770Z","FI_max":0,"shift_sum":155,"engine_number_count":213},{"myinfomonitor_ts":"2016-12-26T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-01-02T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-01-09T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-01-16T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-01-23T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-01-30T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-02-06T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-02-13T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0}] 1) When the min is set to -800 and max to 800, there is an additional -1000 line drawn on the chart ( pic1.png ) 2) When min is set to 0 and max to 800, Y axis line is not drawn at all. 3) When min is set to 400 and max to 800, The chart gets inverted and stepping goes crazy. Seems that this might not be related to the dataset I'm using, because the same effect is seen with other data sets. How could I solve this? br, Timo
  19. I am guessing you are talking about the user interface when you select the Series menu. This is created dynamically, we do not use classes in this code but we try to get the color for AttributeX. I noticed we do not try to use the series tag so that could explain a discrepancy between the color in the menu and the series. This has been fixed and the fix will be included in our next drop. Regards, JuanC
  20. Hi JuanC, all right, this makes sense, thanks! I opted for a mechanism in which I create partial stylesheets dynamically and use the setTag method to override palette (in this way I can allow some of the colors to be changed by the user in the UI and at the same time allow the defaults from the palette to be used). Btw, is there an easy way to update the series colors in the overlay user interface? Your html for it looks like this <ul class="options second-level"><li><i class="jchartfx-icon-block" style="background-color:#57acda"></i><a class="process">Series 1</a><a class="next jchartfx-icon-arrow-right"></a></li><li><i class="jchartfx-icon-block" style="background-color:#93e24e"></i><a class="process">Series 2</a><a class="next jchartfx-icon-arrow-right"></a></li><li><i class="jchartfx-icon-block" style="background-color:#f26c5b"></i><a class="process">Series 3</a><a class="next jchartfx-icon-arrow-right"></a></li></ul> Of course I can set these using JS, but a bit of pain because there are no class / id specifications and the color is set in style attribute. br, Timo
  21. You are doing nothing wrong, this is by design, when you use our CSS it means colors (and fonts, and line widths) are controlled through CSS instead of API, you have 3 options 1) Do not include our palette and attributes CSS, this is recommended if you will need to control several colors "dynamically" 2) Make a copy of the used CSS and change it as needed, e.g. .jchartfx .Attribute0 { fill: #D0C5E3; stroke: #D0C5E3; } Note that sometimes we generate several classes for an object (you can view this using Inspect in your browser), for example, axis sections generate a class such as "AxisSection AxisY_Section AxisY0_Section0" to give you a chance to change all axis sections, all Y axis sections or a particular section by index. 3) Most objects expose a setTag method that allows you to customize the generated class Regards, JuanC
  22. Hi, I'm unable to set the color of series using the API when JChartFX's stylesheets are included. Simple example: if I modify the presenter.js of the example "JS_Lines_and_Stripes_Charts.zip" by adding calls to the setColor method of both series and series border (see below), the palette defaults override my API calls (so nothing happens) until I comment out the line <link rel="stylesheet" type="text/css" href="http://www.jchartfx.com/libs/v7/current/styles/jchartfx.css"/> from index.html. After the removal the API calls work ok. The same behavior is seen in our app where JChartFX is embedded in. What am I doing wrong? function LineChartWithMarkers(chart1) { // test chart series color setting chart1.getSeries().getItem(0).setColor("#000000"); chart1.getSeries().getItem(0).getBorder().setColor("#000000"); chart1.getSeries().getItem(1).setColor("#BB0000"); chart1.getSeries().getItem(1).getBorder().setColor("#BB0000"); chart1.getSeries().getItem(2).setColor("#00CC00"); chart1.getSeries().getItem(2).getBorder().setColor("#00CC00"); // RELEVANT CODE chart1.setGallery(cfx.Gallery.Lines); // END RELEVANT CODE PopulateCarProduction(chart1); var titles = chart1.getTitles(); var title = new cfx.TitleDockable(); title.setText("Vehicles Production by Month"); titles.add(title); }
  23. Worked like a Charm! Thank you so much
  24. You can attach a handler to the gettip event and one of the fields will be the tooltip div, e.g. function onTipDiv(args) { var style = args.tooltipDiv.getAttribute("style"); args.tooltipDiv.setAttribute("style", style + ";background:#880015"); } chart1.on("gettip", onTipDiv); Hope this helps. JuanC
  25. Hi, I am unable to get tooltips for graphs that are displayed over bootstrap modal window. I guess this is an issue of z-index, but I am not able to figure out, how to modify the z-index of tooltip! Below is all the necessary reference required: BOOTSTRAP MODAL WINDOW REFERENCE : http://getbootstrap.com/javascript/#modals HTML CODE for MODAL WINDOW <!-- Modal --> <div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel"></h4> </div> <div class="modal-body"> <div id="graph-div" style="width: 870px;height: 450px;display:inline-block;background-color: white"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> JAVASCRIPT FUNCTION function loadModalChart(data,min,max) { var data=[{"CODE":"ABC","QTY":25},{"CODE":"BC","QTY":25},{"CODE":"AB","QTY":25},{"CODE":"AC","QTY":25}]; $('#graph-div').empty(); var chart1; chart1 = new cfx.Chart(); chart1.setDataSource(data); chart1.getAnimations().getLoad().setEnabled(true); //Enable Animation chart1.getData().setSeries(1); chart1.getAxisY().setMin(min); chart1.getAxisY().setMax(max); var series1 = chart1.getSeries().getItem(0); series1.setGallery(cfx.Gallery.Lines); var title = new cfx.TitleDockable(); title.setText("Sales Graph"); chart1.getTitles().add(title); chart1.getDataGrid().setVisible(true); chart1.getDataGrid().setDock(cfx.DockArea.Right); var divHolder = document.getElementById('graph-div'); chart1.create(divHolder); } Thanks in Advance.
  26. If I run the following code (without using CSS) I get a section from 10 to 14 with a yellowish color (ffdb99) chart1 = new cfx.Chart(); chart1.setDataSource([8,12,14,13,9]); var sectionWarning = new cfx.AxisSection(); sectionWarning.setFrom(10); chart1.getAxisY().getSections().add(sectionWarning); sectionWarning.setBackColor("#ffdb99"); sectionWarning.getGrids().getMajor().setVisible(false); sectionWarning.getGrids().getMinor().setVisible(false); sectionWarning.getGrids().getMinor().setTickMark(cfx.TickMark.None); sectionWarning.getGrids().getMajor().setTickMark(cfx.TickMark.None); sectionWarning.setTextColor("#ffdb99"); sectionWarning.setText("Warning"); I noticed the pink section in your chart but I am not sure if you are using CSS, or if there is extra code that is causing this issue. If the problem persists, please try posting a small sample that reproduces the problem (include hardcoded data and other customizations, let us know if CSS is being used). Regards, JuanC
  1. Load more activity