JuanC

Can you reproduce this in all browsers? Do you have a sample page where we can try to reproduce the same issue? JuanC

In future builds we will attach ourselves to the touchend events on apple devices, so you will not need the detectEvent call. This code can be placed after the chart.create call var userAgent = navigator.userAgent; var isMobile = userAgent.match(/iPhone/i) || userAgent.match(/iPod/i) || userAgent.match(/iPad/i); if (isMobile) { divHolder.addEventListener("touchend", function (evt) { // This will be unnecessary on future builds // You might still need this if you want to handle touchmove or other events chart1.detectEvent(evt); if (evt.hitType == cfx.HitType.Point) alert("Series " + evt.series + " Point " + evt.point); }, false); } Hope this helps. JuanC

If you only had 2 series in your chart, the easiest way would be to use the CurveArea or Area gallery making sure you pass one of the series as the FromValue as follows var items = [{"Low":40, "High":60},{"Low":44, "High":58},{"Low":35, "High":54}]; var fields = chart1.getDataSourceSettings().getFields(); var field1 = new cfx.FieldMap(); field1.setName("Low"); field1.setUsage(cfx.FieldUsage.FromValue); fields.add(field1); var field2 = new cfx.FieldMap(); field2.setName("High"); field2.setUsage(cfx.FieldUsage.Value); fields.add(field2); chart1.setDataSource(items); chart1.setGallery(cfx.Gallery.Area); Unfortunately this approach might not work when combining with other galleries so you might have to use a separate gallery type (script) called HighLow, the main difference between Area and HighLow is that HighLow is designed to allow "crossing" of the 2 values and the area will be painted with the "winner" color. A drawback of this approach is that currently highlow will not smooth out the values but instead connect the values with straight lines. var items = [{"Low":40, "High":60, "Middle":50},{"Low":44, "High":58, "Middle":45},{"Low":35, "High":54, "Middle":40}]; chart1.setGallery(cfx.Gallery.Lines); var fields = chart1.getDataSourceSettings().getFields(); var field1 = new cfx.FieldMap(); field1.setName("Middle"); field1.setUsage(cfx.FieldUsage.Value); fields.add(field1); var field2 = new cfx.FieldMap(); field2.setName("Low"); field2.setUsage(cfx.FieldUsage.Value); fields.add(field2); var field3 = new cfx.FieldMap(); field3.setName("High"); field3.setUsage(cfx.FieldUsage.Value); fields.add(field3); chart1.setDataSource(items); var highLow = new cfx.highlow.HighLow(); chart1.getSeries().getItem(1).setGalleryAttributes(highLow); chart1.getSeries().getItem(2).setGalleryAttributes(highLow); JuanC

Everything in your chart looks monochrome so there might be some code you did not posted that is causing this, I removed the data related from your code, added some customization for the last 2 series and got a chart where the curve is green, the bars are red and the area blue. chart1.getData().setSeries(3); chart1.getAnimations().getLoad().setEnabled(true); chart1.getLegendBox().setVisible(true); chart1.getAxisX().setLabelAngle(45); var panes = chart1.getPanes(); var pane1 = new cfx.Pane(); var pane2 = new cfx.Pane(); var pane0 = panes.getItem(0); panes.add(pane1); panes.add(pane2); pane0.setProportion(2); pane0.getTitle().setText("Elapsed"); chart1.getAxisY().getTitle().setText("Milliseconds"); pane1.setProportion(1); pane1.setSeparation(20); pane1.getTitle().setText("Volume"); pane1.getAxisY().getTitle().setText("Transactions"); pane2.setProportion(1); pane2.setSeparation(20); pane2.getTitle().setText("Memory Usage (JVM)"); pane2.getAxisY().getTitle().setText("Percent"); var seriesList = chart1.getSeries(); var series = seriesList.getItem(0); series.setColor("#93E24E"); //Green series.getBorder().setColor("#6FAA3B"); //Dark Green series.getLine().setWidth(6); series.setMarkerShape(cfx.MarkerShape.None); series.setPane(pane0); chart1.setGallery(cfx.Gallery.Curve); series = seriesList.getItem(1); series.setColor("#FF0000"); series.setGallery(cfx.Gallery.Bar); series.setPane(pane1); series = seriesList.getItem(2); series.setColor("#0000FF"); series.setGallery(cfx.Gallery.Area); series.setPane(pane2); JuanC

The following code generates a green line, note that to change the width of the line/curve you have to use getLine() instead of getBorder(), getBorder() is used for other galleries such as Bar charts. Make sure you are not including the jchartfx.css to change the attributes programmatically. var items = [10,14,13,8,9,11,10,13]; chart1.setDataSource(items); var series = chart1.getSeries().getItem(0); series.setColor("#93E24E"); //Green series.getBorder().setColor("#6FAA3B"); //Dark Green series.getLine().setWidth(6); series.setMarkerShape(cfx.MarkerShape.None); chart1.setGallery(cfx.Gallery.Curve); JuanC

There is no way of correcting this, unfortunately in order to draw a smooth curve that passes exactly through the points, most algorithms (including the one we use) have to adjust the pixels painted before and after points. I am attaching the same data plotted in Excel 2013, you will notice that the curve also seems to be slightly negative before the point labeled 10 JuanC

To change colors and border width programmatically your code would look like the following var series = chart1.getSeries().getItem(0); series.setColor("#57ACDA"); series.getBorder().setColor("#4281A4"); series.getBorder().setWidth(1); This code would change attributes for the first series, if you want to change attributes for other series please change the getItem parameter accordingly. If you are using gradients and want to change the other color in the gradient, you would use series.setAlternateColor Regards, JuanC

Please check the version of jChartFX you are using, we have tested the most recent build (7.1.5044) and it seems to work fine in IE11 including the default (edge) mode. You can check the version by doing alert(cfx.Version) JuanC

Currently we do not provide an API for hightlighting, this is something we have considered supporting in future releases. Feel free to expand on the scenario you are trying to achieve as this will help us make sure we support the features you need. JuanC

Something like this var data = [ {"Date": "2013-11-11T12:00:00.000Z", "Value": 4, "Failed": 2 }, {"Date": "2013-11-11T14:00:00.000Z", "Value": 17, "Failed": 5 }, {"Date": "2013-11-11T15:00:00.000Z", "Value": 8, "Failed": 1 }, {"Date": "2013-11-11T16:00:00.000Z", "Value": 1, "Failed": 0 } ]; JuanC

cfx.Chart.Hidden is not a string it is a value that you must use as a number, e.g. assume you have an incomplete json similar to your original post var items = [{"Date": "2013-11-12 19:45", "MY-HOST": 66}, {"Date": "2013-11-12 19:46", "MY-HOST": 48},{"Date": "2013-11-12 19:47", "AVG": 50, "COMPLETED": 1, "ABORTED": 0, "MY-HOST": 36},{"Date": "2013-11-12 19:48", "AVG": 40, "COMPLETED": 2, "ABORTED": 0, "MY-HOST": 28},{"Date": "2013-11-12 19:49","AVG": 25, "COMPLETED": 1, "ABORTED": 0, "MY-HOST": 31}, {"Date": "2013-11-12 19:50", "MY-HOST": 35}]; If you know the fields that you expect in your json you could code it like this var obj = items[0]; if (obj["MY-HOST"] === undefined) obj["MY-HOST"] = cfx.Chart.Hidden; if (obj["AVG"] === undefined) obj["AVG"] = cfx.Chart.Hidden; if (obj["COMPLETED"] === undefined) obj["COMPLETED"] = cfx.Chart.Hidden; if (obj["ABORTED"] === undefined) obj["ABORTED"] = cfx.Chart.Hidden; If you don't know the fields you might have to write a more complex code that iterates through all the objects, finds out all numeric properties and then add the missing properties to the first object of the collection. Hope this helps. JuanC

You should use cfx.Chart.Hidden as your default value. This value is interpreted as a hidden value, in the case of bar charts, bars with a value hidden are not drawn, in the case of connected galleries such as line, curve, area, a hidden value in the middle of a series will cause the line/curve/area to be broken in two (or more) segments. JuanC

We only check the first object in the collection, you will have to "preprocess" the data before you pass it to jChartFX, if you do not find the Avg, Completed or Aborted properties you will want to add those properties to the first object and use cfx.Chart.Hidden as the value. A value of hidden is what we also assume when a property is missing. JuanC

Instead of using getItem(0,3), use getItem(-1, 3) The -1 means for all series so it should be picked up by the legend. JuanC

We do not provide a method to find a series by name, but we do provide the text property so you can loop through the series elements and find the field used for each series. var items = [{"Month":"Jan", "V1":15, "V2":12},{"Month":"Feb", "V1":9, "V2":11},{"Month":"Mar", "V1":18, "V2":16}]; chart1.setDataSource(items); alert(chart1.getSeries().getItem(0).getText()); alert(chart1.getSeries().getItem(1).getText()); This code will show V1 and then V2 as alerts. JuanC

Certain galleries such as Bar, Line, Area, Curve, Pie, Step, Doughnut are built-in into our core script, as such they are declared as an enumeration that you set using the Gallery property and do not require any additional scripts (other than coreVector or coreBasic), e.g. chart1.setGallery(cfx.Gallery.Area); Other galleries are also built-in from an API point of view but were separated to keep our scripts as small as possible including Pyramid, Radar, Pareto, HighLowClose, OpenHighLowClose and surface. You still use the enumeration to use these galleries but you have to make sure you include the script for the specific gallery, e.g. <script type="text/javascript" src="jchartfx.pyramid.js"></script> chart1.setGallery(cfx.Gallery.Pyramid); Finally, other galleries are built as extensions, these are Bullet, Density, Equalizer, Funnel, HeatMap, HighLow, Rose and TreeMap. To use any of these galleries you have to include an extra script, create a new object and assign using the GalleryAttributes property, e.g. In a chart with 2 series <script type="text/javascript" src="jchartfx.highlow.js"></script> var highlow = new cfx.highlow.HighLow(); chart1.setGalleryAttributes(highlow); To create the chart you are looking for that combines Bar and HighLow (note that this HighLow gallery is not related to the financial HighLowClose) you will need code like this. var items = [{"DATE": "2013-10-30", "HIGH": 523, "LOW": 110, "COMPLETED": 8},{"DATE": "2013-10-31","HIGH": 429,"LOW": 143, "COMPLETED": 16}, {"DATE": "2013-11-01", "HIGH": 520, "LOW": 114, "COMPLETED": 13}]; chart1.setDataSource(items); var highlow = new cfx.highlow.HighLow(); chart1.setGalleryAttributes(highlow); var panes = chart1.getPanes(); var pane1 = new cfx.Pane(); panes.add(pane1); var lastSeries = chart1.getSeries().getItem(2); lastSeries.setGallery(cfx.Gallery.Bar); lastSeries.setPane(pane1); Hope this helps. JuanC

The doUpdate function is still obfuscated so you still have to use _ud Note the function is not exposed in the SVG element or Div, It is exposed in the javascript object you create when you do new cfx.Chart() JuanC

I just tested 1.8.2, 1.9.2 and 1.10.3 and they all seemed to run fine. Can you check the version of jChartFX you are using? I remember we fixed an issue with a recent (maybe 1.9) jQuery UI change so you might need to download a newer jChartFX build. You can check the version of jChartFX like this alert(cfx.Version); JuanC

>> Are there any caveats that I should be aware of right off the bat regarding IE9 compatibility? We try to be compatible with IE9 and later (IE8 does not support SVG). Please note that IE9 uses "quirks mode" to try to be compatible with older pages, to change your page so that IE9 uses standards mode you need to add the following directive at the beginning of your page <!DOCTYPE html> There are certain minor differences in IE9 compared to other browsers, for example, we use blur effects on the chart border and shadows for the lines. IE9 does not support SVG effects (IE10 and above does support SVG effects) so you will not see those effects in IE9 If the problems in IE9 persist, I would recommend you start with a simple javascript page (no jquery, no jquery UI, just javascript) to try to minimize the number of moving parts, then I would add multiple charts, jquery UI and then last (if desired) I would switch to using our jquery UI plugin. Although our jQuery UI plugin allows you to create (and modify) the chart using the same jquery UI syntax as other plugins, the chart API is a little more complex that the typical plugin so you might have an easier time using our "standard" javascript component instead of our jquery UI plugin. Note that this does not mean you cannot use jquery UI for your page. Regards, JuanC

The problem is that IE9 defaults to "quirks" mode if your HTML page does not start with the following <!DOCTYPE html> As soon I add that to your page the chart appear in my tests, if you show the Developer Tools you will notice that without the directive IE9 is in "quirks mode" and when you add the directive is in "Standards mode". You can also change the mode from the developer tools. AFAIK this is the same for IE10. About the page not being pretty to look at. This is by design. We obfuscate and minify the code. Regards, JuanC

One more thing related to the chart you posted, if you are using coreBasic you might want to consider using coreVector instead, when using coreVector you have more flexibility on how galleries (bar, line, etc.) are painted, one of the things we do differently is that in coreBasic lines are painted as a collection of 2-point segments while in coreVector they will be painted as a single line, this will improve performance as well as the appearance of the "connection" between those segments. coreVector is a little bigger than coreBasic but I think the pros will outweigh the script size difference. JuanC

setCustomFormat is currently not supported. To get the chart to display degrees you can set the Axis to be currency and change the currency symbol so that it matches what you need. Unfortunately in current builds you have to replace all the currency settings so you will need code like this chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency); chart1.setCulture({ "shortDate": "M/dd/yyyy", "longDate": "dddd, MMMM dd, yyyy", "dateTime": "M/dd/yyyy h:mm:ss tt", "longTime" : "h:mm:ss tt", "days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], "abbDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], "abbMonths": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], "am": "AM", "pm": "PM", "dateSepa": "/", "timeSepa": ":", // Numeric "decSymb": ".", "groupNumb": 3, "groupCurr": 3, "groupSymb": ",", "currSymb": "\u00B0C", "currPos": 3, "currNeg": 3, "percSymb": "%", "percPos": 1, "percNeg": 1 }); CurrPos (positives) and CurrNeg (for negatives) can be one of the following 0 -> Prefix without space 1 -> Suffix without space 2 -> Prefix with extra space 3 -> Suffix with extra space In future builds (any build marked 5051 or later) you will be able to replace only the desired attributes, which will allow us to add new culture attributes if needed without breaking your code, so you will be able to write something like this instead chart1.setCulture({ "replace": true, "currSymb": "\u00B0C", "currPos": 3, "currNeg": 3, }); Hope this helps. JuanC

You can add shadows to all texts in the chart by using the following code chart1.setTextShadowColor("#000000"); chart1.setTextShadowOffset("0,-1"); The shadow offset has X and Y components. Note that these shadows are painted in all texs (axis labels, point labels, titles, etc.). There is no way to add shadows individually. About changing the color of the watermark, currently this is not supported. Can you post a sample of your chart (or email to support at softwarefx dot com) so that we can check if it is being painted with an incorrect color? JuanC

One possible explanation would a custom grid line in the X axis. Another possibility would be if you are updating the chart's data using the realtime API. Are you using any of these APIs? JuanC

We have only seen issues with absolute/relative positioning related to tooltips, those issues have been fixed in our latest builds. We have not seen any reports of the chart not appearing. We will need a sample page that we can use to reproduce the problem. I am guessing it is related to the structure of the page. You can email a sample to support at softwarefx dot com JuanC