JuanC

A contour is a surface chart seen from above so the Y axis is not visible, if you add labels to the series we will display them to the right, note that there might be a bug in our code that calculates the required space so I am setting manually var s = chart1.getSeries(); for(var i = 0;i<14;i++) { s.getItem(i).setText("Label " + (i + 1)); } chart1.getPlotAreaMargin().setRight(80); JuanC

You have our most recent public version, I meant that your code runs fine on our current development bits. You can increase the minimum space on the left with a call like this chart1.getPlotAreaMargin().setLeft(120); JuanC

DataElement in the condition does not indicate which series the condition uses, instead it is an enumeration where 0 means Series Y Value, 1 means Series X Value and 2 means Series Initial Value. In future builds we will add conditions that will allow you to check against any other field in your data (useful when passing json data) even if such field was not used to plot any data. With the current bits, you can tweak your sample so that instead of having an extra series (note that in the sample you were actually adding 3 extra series) use X values that TreeMap ignores, e.g. // Set green for percentages greater than 2%; percentage is in series 1 var condition1 = new cfx.ConditionalAttributes(); condition1.getCondition().setDataElement(1); condition1.getCondition().setFrom(.02) condition1.setColor("#008000"); chart1.getConditionalAttributes().add(condition1); // Set yellow for percentages between -2% and 2%; percentage is in series 1 var condition2 = new cfx.ConditionalAttributes(); condition2.getCondition().setDataElement(1); condition2.getCondition().setFrom(-0.02); condition2.getCondition().setTo(0.02); condition2.setColor("#FFFF00"); chart1.getConditionalAttributes().add(condition2); // Set red for percentages less than -2%; percentage is in series 1 var condition3 = new cfx.ConditionalAttributes(); condition3.getCondition().setDataElement(1); condition3.getCondition().setTo(-0.02); condition3.setColor("#FF0000"); chart1.getConditionalAttributes().add(condition3); // Data; 4 series var data = chart1.getData(); var xData = chart1.getData().getX(); data.setItem(0, 0, 175); xData.setItem(0, 0, 0.3); data.setItem(0, 1, 152); xData.setItem(0, 1, -0.010); data.setItem(0, 2, 115); xData.setItem(0, 2, -0.11); data.setItem(0, 3, 684); xData.setItem(0, 3, -0.040); var treeMap = new cfx.treemap.TreeMap(); chart1.setGalleryAttributes(treeMap); JuanC

I tested your code and the axis appears correct, we recently checked in a change where we fixed an issue related to this. The only change I would suggest in your code is that you are calling chart.create which will render the chart and then turning on the legend box which will cause the chart to be rendered again. JuanC

If you are using our jchartfx.css you can use a class named AxisY0_Text_Title or AxisX0_Text_Title. If you are not using our css then you can set the title color using the title's setColor method. JuanC

What do you mean by a Horizontal Zero Axis chart? Can you post a small sample that duplicates the axis cropped labels? JuanC

Unfortunately we have not had the chance to work on this as we have been focused on a new release adding support for maps, gauges and dashboards. JuanC

Both functions are called loadChart, try renaming them to be loadChart1 and loadChart2 and then add a loadChart function which is the one invoked in the onload event that calls both loadChart1 and loadChart2. JuanC

I just compared Firefox scrolling against IE and Chrome in Windows and also against Safari and Chrome in MAC and although it might be a little slower it does not look too bad in comparison. Can you provide more details on your chart so that we can try to duplicate your scenario? What version of Firefox are you using? JuanC

It is not possible to add line breaks to series or point labels in the current version. We will explore ways to support this in future versions of the product. JuanC

Unfortunately both the AxisX title as well as a title added to the chart getTitles() collection with position bottom would be drawn above the DataGrid. The only way to have a title show up below the data grid would be to create a border template that placed the main chart title at the bottom. JuanC

In order to have 2 X axis they both have to be strings, please see this thread http://community.jchartfx.com/forums/p/332/915.aspx#915 JuanC

In order to have an extra X axis you will need your "primary" X axis to be strings instead of dates, so you will need the following changes, var axis = chart1.getAxisX(); axis.getLabelsFormat().setFormat(cfx.AxisFormat.Date); axis.getLabelsFormat().setCustomFormat("hh:mm"); And field4.setName("Time"); field4.setUsage(cfx.FieldUsage.Label); fields.add(field4); Note that we are using Label for the Time field instead of XValue. To create an extra X axis you will need code like this var axisx2 = new cfx.AxisX(); var axisLabels = axisx2.getLabels(); axisLabels.setItem(0, ''); var dateOld = ""; for(var i = 0;i<items.length;i++) { var date = Date.parse(items["Time"]); var d = new Date(date); var s = d.getDate() + "-" + d.getMonth(); if (s != dateOld) { axisLabels.setItem(i + 1, s); dateOld = s; } } axisx2.setVisible(true); axisx2.setMin(0); axisx2.setMax(items.length); axisx2.setStep(1); axisx2.getGrids().getMajor().setVisible(false); axisx2.setStyle(axisx2.getStyle() | cfx.AxisStyles.Centered); axisx2.setPosition(cfx.AxisPosition.Near); chart1.getAxesX().add(axisx2); In this code we are parsing the strings in your data set and assigning labels when the date changes. One more thing, please note that when using date.getDay() and internally when we parse the dates, they are shown in local time. Currently when parsing strings as dates we only support strings that end with Z (UTC), in future builds we will also support strings with a specific time zone, e.g. +05.00 If you need to show the dates in UTC you might need to write your own loop that parses the dates and add a field to the JSON items with a string resulting from getUTCHours and use this for the labels (which means you would not need the axis.getLabelsFormat() calls. JuanC

Sorry that we did not answer this post before, currently the treemap extension does not honor labels, we are hoping to include this fix in our future builds. JuanC

Couple of problems 1) Date format you used is incorrect, it is missing the Z at the end, it is missing milliseconds and month should be numeric 2) Not important but code that retrieves axis X is incorrect although you are not using the axis variable in the code 3) FieldUsage.Value should be used instead of Number, also if you want dates in the X axis you need to add a field map for Time with Usage set to X value Modified code var items = [ {"CoplanarIrradiance": 760,"AirTemperature": 35,"SurfaceTemperature": 32,"Time": "2014-04-27T18:15:00.000Z"}, {"CoplanarIrradiance": 460,"AirTemperature": 25,"SurfaceTemperature": 31,"Time": "2014-05-27T18:30:00.000Z"}, {"CoplanarIrradiance": 341,"AirTemperature": 27,"SurfaceTemperature": 32,"Time": "2014-06-27T18:45:00.000Z"}, {"CoplanarIrradiance": 233,"AirTemperature": 31,"SurfaceTemperature": 32,"Time": "2014-07-27T19:00:00.000Z"} ]; // Eje de Tiempo (X) var axis = chart1.getAxisX(); axis.getLabelsFormat().setFormat(cfx.AxisFormat.Date); axis.getLabelsFormat().setCustomFormat("MMM-dd"); // Eje de Coplanar Irradiance(Y) var axis1 = chart1.getAxisY(); axis1.getTitle().setText("Coplanar Irradiance (W/m2)"); axis1.getGrids().getMajor().setVisible(false); axis1.getDataFormat().setFormat(cfx.AxisFormat.Number); axis1.getDataFormat().setDecimals(2); // Eje de Air Temperature (Y) var axis2 = chart1.getAxisY2(); axis2.getTitle().setText("Air Temperature ©"); axis2.setPosition(cfx.AxisPosition.Near); axis2.getGrids().getMajor().setVisible(false); chart1.getAxisY2().getDataFormat().setFormat(cfx.AxisFormat.Number); axis2.getDataFormat().setDecimals(2); // Eje de Surface Temperature (Y) var axis3 = new cfx.AxisY(); chart1.getAxesY().add(axis3); axis3.getTitle().setText("Surface Temperature ©"); axis3.setVisible(true); axis3.setPosition(cfx.AxisPosition.Far); axis3.getLabelsFormat().setFormat(cfx.AxisFormat.Number); axis3.getDataFormat().setDecimals(2); chart1.getData().setSeries(3); var series1 = chart1.getSeries().getItem(0); var series2 = chart1.getSeries().getItem(1); var series3 = chart1.getSeries().getItem(2); series1.setAxisY(axis1); series2.setAxisY(axis2); series3.setAxisY(axis3); series1.setGallery(cfx.Gallery.Lines); series2.setGallery(cfx.Gallery.Lines); series3.setGallery(cfx.Gallery.Lines); // ----Assign data fields-------- var fields = chart1.getDataSourceSettings().getFields(); var field = new cfx.FieldMap(); var field2 = new cfx.FieldMap(); var field3 = new cfx.FieldMap(); var field4 = new cfx.FieldMap(); field.setName("CoplanarIrradiance"); field.setUsage(cfx.FieldUsage.Value); fields.add(field); field2.setName("AirTemperature"); field2.setUsage(cfx.FieldUsage.Value); fields.add(field2); field3.setName("SurfaceTemperature"); field3.setUsage(cfx.FieldUsage.Value); fields.add(field3); field4.setName("Time"); field4.setUsage(cfx.FieldUsage.XValue); fields.add(field4); chart1.setDataSource(items); JuanC

>>Is it all or nothing? ... Or once I use CSS in any way the API is out of the picture? Currently CSS vs API is an all or nothing mode. Early on the painting code we decide whether you included a CSS or not and there are several places in the code where this mode is used to decide whether we should generate an SVG object with brush,stroke,etc. or if we should generate class="xyz" So unfortunately yes, once you use CSS the API to change colors, stroke thickness, etc. is out of the picture. >> I think the chart has defaults that are embedded in the JS code. Is there anywhere we can see those? The chart has defaults embedded in the JS code and they are almost identical to the "default" CSS. I had to write a small app to "descramble" our default palette but I think these are the colors we are currently using, the first 2 lines are the fill colors for the first 16 data series (we darken the color a little bit to get the border colors) #57ACDA, #93E24E, #F26C5B, #F5D34A, #F89553, #65C773, #5ABEC7, #CE9884 #5F6775, #E9EA52, #E04E61, #6FE4C8, #ECA63F, #99D0A0, #CE8FBE, #8DC3E0 Background #F5F5EE Alternate Background #F5F5EE Plot Area #00FFFFFF Border #DBDBD9 Axes and Gridlines #DBDBD9 Axes Alternate #F5F5EE Constant Lines #FC4B35 Stripes #FFFFFF Labels #666666 Point Labels #666666 Marker Border #00FFFFFF Titles #0296B1 Titles Back #00FFFFFF LegendText #666666 LegendBackground #00FFFFFF Data Background #F5F5F2 DataForeground #666666 DataAlternateBack #FFFFFF DataAlternateFore #000000 DataTitlesBack #DDE3E7 DataTitlesFore #6D7D8A DataGridlines #DEDAD3 DataBackground #F5F5EE >> Although we would be walking away from giving users the ability to skin the charts to match their business situation. Can you expand on this? Giving users ability to skin the charts could mean giving the users ability to choose a CSS that you ultimately include in the page (assuming this is a server-side scenario). One thing we will be supporting in future builds is to change the default palette of the chart by declaring an array of colors in the JS, this code is part of the new release we are planning that includes maps and gauges so we do not have a firm release date yet but if this sounds like it could help you we could set you up with pre-release bits. >> Has anyone requested a flag that determines this behavior. Not really but it would be hard, internally our code is really API based, so we are always painting all elements with colors, widths, etc that are controlled by the API but obviously we have to have a default in case you never set those colors, this means it is not really easy for us to differentiate between a color/thickness that is there because it is default or a color/thickness you set with the API so we would have to set flags whenever you set a property to convert that "object" into API based, also sometimes there are several cluster of properties that affect related items, e.g. point labels for a particular series, so if you change the color for the point labels for series 2, does that means you are also changing series 2 to be API-based? It is certainly not impossible and it would be more flexible but it would add a level of complexity to the code. There might be alternate approaches for example what about a flag that turn off CSS for all series in the chart, please try to include (if possible) more information about your scenario. Regards, JuanC

When the legend is docked at the bottom you cannot control its width, there is a property called PlotAreaOnly that controls if the legend should be restricted to the plotarea or use all the available space. You can also control the horizontal alignment using ContentLayout. To set the distance between different series in the same point, setIntraSeriesGap(0) should work, note that if you want to control the distance between different points you need to use getAllSeries().setVolume(100). If none of this seem to affect your output please try posting a link to an image and include the code used to generate such image. JuanC

What happens when you only execute the first 4/5 lines of code + the chart.create call? Please post all details about error messages you receive, each browser will provide slightly different ways to retrieve the debug/error console. Also post which jchartfx scripts are you including in your page. As long as you include jchartfx.system.js and ONE of the following (jchartfx.coreVector.js OR jChartFX.coreBasic.js) this code copied from your code should work as expected chartStats = new cfx.Chart(); chartStats.setGallery(cfx.Gallery.Pie); var ldata = [{ "Count": 10, "status": "Successful calculation" }, { "Count": 90, "status": "UnSuccessful calculation"}]; chartStats.setDataSource(ldata); var divHolder = document.getElementById('divStats'); chartStats.create(divHolder); JuanC

Unfortunately this is not possible, we will resize the legend to make sure its size is appropriate for its contents,this will in turn reduce the size available for the "plot area" of the chart. If you can produce abbreviations or any other form of short string that represents the legend, you could try using smaller strings for the legend and then customizing the tooltips to show the "full" legend. Another possibility would be to hide the legend, decrease the size of its font, or move it to the side/bottom in case this allows you to better use the available space for your particular scenario (number of points, size of label strings, etc.) JuanC

You are passing strings in the calls to data.setItem instead of numbers, please try this data.setItem(0, j, Number(posa[j])); data.setItem(1, j, Number(nega[j])); Also, possibly a typo when creating the simplified sample, you are not using neg when splitting into nega. Finally, you can remove the recalculateScale call as it is not needed. JuanC

It seems to be a bug in FireFox, I tested FF28 in both Windows (8.1 x64) and MacOS, the line shadow looks ok in Windows but looks wrong in MacOS. I was able to simplify to the following svg, this looks good in IE10 / IE11, it also looks good in Chrome, Safari in MacOS but fails to render correctly in FF in MacOS (apparently it also fails for you in Windows so it might be driver related as it looks ok in FF28 in Windows for me). <svg width="600" height="400" x="0" y="0"> <defs> <clipPath id="C0sStyle0"> <rect x="35" y="30" width="535" height="340"></rect> </clipPath> <filter id="C0sStyle1"> <feGaussianBlur stdDeviation="2"></feGaussianBlur> <feOffset dx="0" dy="2"></feOffset> </filter> </defs> <g> <polyline filter="url(#C0sStyle1)" clip-path="url(#C0sStyle0)" points="88.9,127.35714285714283 195.7,175.78571428571428 302.5,78.92857142857144 409.3,103.14285714285711 516.0999999999999,30.5 " style="stroke:#000000;stroke-width:3;stroke-opacity:0.30196078431372547;fill:none"></polyline> <polyline clip-path="url(#C0sStyle0)" points="88.9,127.35714285714283 195.7,175.78571428571428 302.5,78.92857142857144 409.3,103.14285714285711 516.0999999999999,30.5 " style="stroke:#4281a4;stroke-width:3;fill:none"></polyline> </g> </svg> JuanC If I remove the clip-path from the first polyline (that generates the shadow) it looks ok so the bug seems to be related to this. I have tested FF in the same MacOS machine before and it looked ok so it might be a new bug in FF28. JuanC

To remove the shadow of the line you can do this chart1.setGallery(cfx.Gallery.Lines); chart1.getGalleryAttributes().setTemplate("LineBasic"); I noticed in the screenshot you posted the shadow does not really "match" the green line, is this the behavior you are getting? If so, can you tell us the browser you are using and possibly post a small sample that duplicates this? Sorting the list of series in the tooltips is currently not supported but is something interesting so we will consider this for future versions/builds. JuanC Desktop.zip

One possibility would be that you are letting the chart to initialize with random data and after that we are not resetting the min/max to the real data scale. Can you clarify when are you passing the data to the chart? Can you post a small sample page that duplicates the issue you are experiencing? JuanC

Can you post an image of the line and bar charts you are getting? How many points are you displaying in such charts? JuanC

Unfortunately annotations are restricted to the plot area (or plotarea + margins if setPlotAreaOnly is set to false). At this moment we do not support annotations on top of the chart as a whole. In the case of the legend box you can add custom legend items but they will be shown in a similar way to other items in the legend box such as the series legend so I am not sure if this functionality would work for you. Feel free to post an image of the chart you are looking for, it will help us suggest other workarounds or design new features for future versions of the product. JuanC