JuanC

Administrators
  • Content count

    396
  • Joined

  • Last visited

Community Reputation

3 Neutral

About JuanC

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  1. >> 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
  2. 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
  3. 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
  4. chart1.getToolTips().setInitialDelay(200); The delay is specified in milliseconds. Regards, JuanC
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. You are probably including our CSS (attributes and/or palette), which means colors 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 control several colors "dynamically" 2) Make a copy of the used CSS and change it as needed, e.g. .jchartfx .AxisY_Section { fill: #D0C5E3; stroke: #D0C5E3; } Note that sometimes we generate several classes for an object (you can view this using Inspect in your browser), 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 (including AxisSection) expose a setTag method that allows you to customize the generated class sectionWarning.setTag("Warning"); And include the following on either your page or a css included by your page .jchartfx .Warning { fill: #FFFF00; } Regards, JuanC
  13. You can modify any (or all) of the charts after any event captured on the client, e.g. <body> <select id="year" onchange="onYearChanged()"> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> </select><br/> <div id="ChartDiv" style="width:550px;height:400px;display:inline-block"></div> </body> JavaScript function onLoadDoc() { chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Bar); chart1.setDataSource([10,12,8,9,11]); chart1.create("ChartDiv"); } function onYearChanged() { var selectObj = document.getElementById("year"); if (selectObj.value == "1997") chart1.setDataSource([10,12,8,9,11]); else if (selectObj.value == "1998") chart1.setDataSource([8,7,12,14,11]); else chart1.setDataSource([3,4,8,1,12]); } Obviously instead of hardcoding data you would either request new data to the server or filter existing data, once you have the data you can invoke setDataSource on the chart to change its data, if necessary you can also change any of the charts visual attributes. We do not offer any APIs to filter data Regards, JuanC
  14. There are several ways to improve the plot area size in charts, including 1) Removing the border chart1.setBorder(null); 2) Hiding the legend box chart1.getLegendBox().setVisible(false); 3) Decreasing the margin size around the plot area var margin = chart1.getPlotAreaMargin(); margin.setLeft(5); margin.setTop(5); margin.setRight(5); margin.setBottom(5); 4) Decreasing the font size (assuming you are not using our attributes CSS) chart1.setFont("7pt Arial"); If this do not work, please post a small code snippet showing the customizations you are doing to the chart and the size you are using for the small divs Regards, JuanC
  15. The way motifs work, charts/gauges properties are modified when objects are constructed (to allow for your customizations to override motif customizations). Because of this, if you are going from motif A to motif B it is not trivial to try to "undo" the actions on motif A before trying to apply B. It does not need necessarily a full page reload but recreating the charts is the simple way to achieve this (if the motif change is happening on the client side). JuanC