JuanC

jChartFX should work with IE9. Please post a small complete sample (HTML, CSS, etc.) that exhibits the problem on IE9. JuanC

It should be supported in Gantt. Can you post a small sample that duplicates this issue? Regards, JuanC

Are you using jQuery? Note that for our data (hitType, series, etc.) to be attached correctly to the event data you need to connect to the click event slightly different whether you are using jQuery or not. If the problem persists, please try posting a small sample that duplicates your issue, also letting us know the browsers you are using (and jQuery version if using jQuery). JuanC

If you are using jQuery you could use something like this $("#myDiv").click(function(evt) { if ((evt.hitType == cfx.HitType.Point) || (evt.hitType == cfx.HitType.Between)) { var s = "Series " + evt.series + " Point " + evt.point; if (evt.hitType == cfx.HitType.Between) s += " Between"; alert(s); } }); If you are not using jQuery var divHolder = document.getElementById('myDiv'); chart1.create(divHolder); divHolder.onclick = doClick; function doClick(evt) { if (evt.hitType == cfx.HitType.Point) alert("Series " + evt.series + " Point " + evt.point); } Regards, JuanC HighlightSample.zip

There are several elements in the chart so we include a css (jchartfx.css) that you can just include in your page and customize to your needs. To create a transparent chart you would need to modify the fill property for Border class. .jchartfx .Border { fill: #F5F5EE; stroke: #DBDBD9; stroke-width: 1; } All charts are generated with a jchartfx class but if you have multiple charts in a page you can control this class passing an extra string to the create call when you create the chart, e.g. In this case you will probably want to start by duplicating the jchartfx.css with the new class name. var chart2 = new cfx.Chart(); chart2.create('myDiv2',"jchartfx2"); JuanC

To increase the space between series you would use the IntraSeriesGap property as follows chart1.setGallery(cfx.Gallery.Bar); chart1.getGalleryAttributes().setIntraSeriesGap(20); Please note that this space is in pixels, because it is a float we will consider adding a feature in future builds to supply it as a percentage. Also note that the space shared by all the series in a point results after the Series.Volume property is used so if you see to much space between different points you can decrease that space by increasing the Volume as follows chart1.getAllSeries().setVolume(85); In this case volume is a percentage of the total space. Regards, JuanC Attachments.zip

You can increase the space between X axis points by setting the AllSeries.Volume property, e.g. chart1.getAllSeries().setVolume(50); JuanC

We were not aware of this bug, can you post a small self containing sample (including HTML page, etc.) that duplicates this issue? JuanC

To change the Y axis labels you have two options 1) Handle an event to change the axis label var axisY = chart1.getAxisY(); axisY.setNotify(true); chart1.on("getaxislabel", onAxisLabel); function onAxisLabel(args) { args.setText("$" + args.getText()); } 2) If the Y axis labels are "finite" you can set the labels and step as follows var items = [{"Month":"Jan", "Value":1},{"Month":"Feb", "Value":2},{"Month":"Mar", "Value":3},{"Month":"Apr", "Value":2}]; chart1.setDataSource(items); var axisy = chart1.getAxisY(); axisy.setStep(1); axisy.setLabelValue(1); var labels = axisy.getLabels(); labels.setItem(0, "Bad"); labels.setItem(1, "Low"); labels.setItem(2, "Med"); labels.setItem(3, "Avg"); JuanC

In an area chart there are 3 colors you could change 1) Chart Background 2) PlotArea Background 3) Area itself If you are including our jchartfx.css you would change the following classes 1) .jChartFX .Border 2) .jChartFX .PlotArea 3) .jChartFX .Attribute0 If you do NOT include our css, you can change the following properties 1) chart1.setBackColor("#FF0000"); 2) chart1.setPlotAreaColor("#0000FF"); 3) chart1.getSeries().getItem(0).setColor("#404000"); Hope this helps. JuanC

I am afraid you will not be able to place a table inside the legend box, one possibility would be to remove the chart border and place the chart control along with an independent HTML table, if these 2 elements are inside a div you could even get them to look like a single element. Another possibility would be to include jchartfx.advanced.js and set the DataGrid to be visible. JuanC

jChartFX is a javascript control that currently generates SVG, most mobile browsers should support this. JuanC

jChartFX has 2 "modes" of work. If you include jchartfx.css we will pick up most (if not all) the colors from this file. In the case of a custom grid line we will generate an object that looks like this class="CustomGridLine AxisY_CustomGridLine AxisY0_CustomGridLine0" Which means you can set the color for all custom grid lines, for all the custom gridlines in the Y axis or for a specific custom grid line by editing the CSS. e.g. .jchartfx .CustomGridLine { stroke: #00F035; } .jchartfx .CustomGridLineLabel { fill: #660066; } If you DO NOT include jChartFX.css you can control the colors using our API (I am guessing this is what you are trying already but because you are including the CSS it takes priority over the API calls) To control the label alignment in a CustomGridLine you should use setAlignment and/or setLineAlignment as follows customGridLine.setAlignment(cfx.StringAlignment.Center); The other possible alignments are Near and Far. About the documentation, our control was first developed as a .NET control so I am afraid some of the documentation has not been properly changed. The current build also has an issue aligning text to the top so LineAlignment.Far will not work as expected, we should be fixing this in a future build. Regards, JuanC

Unfortunately the annotation attach functionality is only supported in "Cartesian-axes" charts, i.e. Bar, Line, Area, Curve, CurveArea, Step, HighLowClose, OpenHighLowClose or any combination of these. It is NOT supported on Pie, Doughnut, Pyramid, Radar or any of the other galleries. In the case of radar it is clear we could use polar coordinates but in the others it is not clear how would you describe the position of an object. Have you checked our point labels? If the position of the point labels is near where you would want them, it is possible to turn on a point label for a specific serie/point combination using the Chart.getPoints() collection. Regards, JuanC

We have no getDirty() method since we have no UI to change/update the chart. Regards, JuanC

You should be able to change properties on a per-series basis chart1.getSeries().getItem(1).getPointLabels().setVisible(true); Pareto is a special case since with only 1 series, two "galleries" are painted, I will check if we can add a property in pareto to control the label visibility in the second series. JuanC

I was not able to duplicate this issue with our most recent bits so maybe it is something we already fixed and will be included in a future build. In the meantime can you try the following chart1.getAxisY().setMin(1); chart1.getAxisY().setMax(39); chart1.getAxisY().setInverted(true); JuanC

Scrolling is currently not supported on the data grid, obviously the scrollbar should not have appeared. We should rectify this in our next build, if we cannot get scrolling working we will then hide the scrollbar until this functionality is implemented. Regards, JuanC Muster_Graph.pdf

jChartFX is a javascript component that generates charts using HTML5 (SVG). As far as I know you cannot use it in a java app (swing based or not). The only way to use it would be if you are using a java framework (or library) that allows you to host javascript components. I am not aware of such a framework. JuanC

It would be something like this (using jQuery), it would obviously need code to handle an invalid number entry, in this sample I am hardcoding a table with 3 numbers, on a real page this table would be generated dynamically to control number of items. <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="Include/jchartfx.css" /> <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> Handle Data Change <br/> <div id="myDiv" style="width:600px;height:400px;display:inline-block"></div> <br/> <form> <input class="target" type="text" data-row="0" value="10.5" /> <input class="target" type="text" data-row="1" value="14.5" /> <input class="target" type="text" data-row="2" value="8.5" /> </form> <script language="javascript"> var chart1; $(document).ready(function($) { chart1 = new cfx.Chart(); var data = chart1.getData(); data.setSeries(1); data.setPoints(3); data.setItem(0, 0, 10.5); data.setItem(0, 1, 14.5); data.setItem(0, 2, 8.5); chart1.setGallery(cfx.Gallery.Bar); var divHolder = document.getElementById('myDiv'); chart1.create(divHolder); $('.target').change(function() { var row = $(this).data("row"); var value = $(this).attr("value"); data.setItem(0, row, value); }); }); </script> </body> </html> Hope this helps. JuanC

It is possible to have a chart that reflects changes in a table. At this moment I do no think we have a sample, as soon as we have one we will post a link here. Basically the sample has to detect changes on a table, figure out the row/column and use chart.getData().setItem(series, point) to change the appropriate value in the chart. JuanC

Unfortunately animations are not supported at this time. Regards, JuanC

The problem is that AxisSection setFrom and setTo are currently not prepared to handle a string representation of a date. In the next version (which should be released in a couple of days) there will be a new Chart method called dateToDouble that translates a JavaScript date object (not a string) into a numeric value so that you can pass it to AxisSection.setFrom and setTo. In future builds we will try to do this translation automatically but for the short term the dateToDouble helper method should do the trick. JuanC

This issue has been fixed and new bits should be released in a couple of days Regards, JuanC

You must set the ContentLayout property as follows chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Center); JuanC