JuanC

As far as I know there is no event on an element when it is resized but you can attach to the window resize event. e.g. $(window).resize(function() { if (chart1 != null) chart1.doUpdate(true); }); Note that if the browser sends this event while the window is being resized, and your page have lots of content, performance might not be ideal, you could start/reset a time in the resize function so that you delay the chart repainting until the window stops resizing. var timerResize = null; $(window).resize(function() { if (chart1 != null) { if (timerResize != null) clearTimeout(timerResize); timerResize = setTimeout(function() { chart1.doUpdate(true); }, 250); } }); JuanC

The misunderstanding is that trying to get a specific series (last loop) or setting its text does not create a series so the chart is not aware of the existence of such series. One way to fix this would be for you to tell us the size of your data set before you pass the values, i.e. before you call chartdata.setItem chartdata.setPoints(2); chartdata.setSeries(5); This will also result in better performance as we can preallocate the right size of buffers and not have to "grow" them as needed when you pass the data without telling us the size of the data set. Also this means you do not need the try/catch in the loop that sets the series labels, you needed that because the last series does not exist so when you say getSeries().getItem(4) it was probably failing or returning null JuanC

Can you post an independent code snippet that duplicates the problem? We have been trying to duplicate this issue but are unable to do so. There might be some API you are using that is causing this issue. JuanC

1. No, there are no required changes in your code 2. I think we are in the process of publishing those, we added a menu to allow users to customize certain aspects of the chart, a new way of scrolling where the "scrollbar" shows a map of the chart, a new gallery called AxisTrend and small enhancements/fixes JuanC

The export image will launch a new page where the chart will be rendered as an <img> so that the user can copy it to the clipboard. There is no API because AFAIK there is no standard API in javascript to interact with the clipboard, this will for sure have security implications so I would not expect a standard any time soon. JuanC

Add this code inside your click handler if (evt.hitType == cfx.HitType.Other) { var shape = evt.targetObject; var layer = shape.getLayer(); var state = shape.getFieldValue("STUSPS"); alert(state); } Note that evt.targetObject when using maps will contain a reference to the shape the user clicked, from there you can get the layer (in case the map has multiple layers such as roads, rivers, etc.), you can also get to any field stored in the map. In the case of US_ContinentalStates the field with the state abbreviation is called STUSPS. Regards, JuanC

I noticed that after you are calling BringToFront you are setting the series labels (getSeries().getItem(X).setText("AA"), can you try setting the series labels before using BringToFront? I think this will generate the desired result. Once you invoke BringToFront or SendToBack we reorder the series collection so anything done after that would have to use the "new" series indices. JuanC

We do not have the capability of adding id (or any other attributes) to the SVG elements but we use the sfxid attribute so that you can handle events on chart elements, e.g. Note that we inject properties to the event object sent in HTML that includes the hitType, the series index and the point index. If you are using jQuery $("#myDiv").click(function(evt) { if (evt.hitType == cfx.HitType.Point) { var s = "Series " + evt.series + " Point " + evt.point; alert(s); } } If you are not using jQuery var divHolder = document.getElementById('myDiv'); chart1.create(divHolder); divHolder.onclick = doClick; function doClick(evt) { alert("Series " + evt.series + " Point " + evt.point); } Regards, JuanC

Changing the data source has the disadvantage that we have to reprocess the data (even though nothing has changed). In the current version of the scripts (and this will not change moving forward) you can invoke doUpdate as follows lineChart.doUpdate(true) In previous builds this function was being "minified". Regards, JuanC

Unfortunately we did not made public a Format property that would allow you to format the scale labels, in our next build we will expose it and allow you to choose None, Number (thousand separators), Currency or Percentage as options (similar to those exposed for the trend control). JuanC

We are testing a new build and it should be made available shortly. Regards, JuanC

There is a bug in our code (which should be fixed on our next public build) but you can workaround it by setting the Gallery and GalleryAttributes globally instead of on a per-series basis, e.g. mychart.setGallery(cfx.Gallery.Lines); mychart.getGalleryAttributes().setTemplate("LineBasic"); JuanC

I informally tested a 700 series chart with 40 points and got the following on an OSX laptop Safari: Between 3 and 4 seconds while the page is loaded (blue progress on address bar) and between 5 and 6 seconds for the chart to appear Firefox: Between 6 and 7 seconds for the chart to appear Chrome: Between 3 and 4 seconds for the chart to appear The code I tried is something like this var data = doRandomData(700, 40, 100, 0, 2); chart1.setDataSource(data); chart1.getLegendBox().setVisible(false); chart1.getAllSeries().setMarkerShape(cfx.MarkerShape.None); var divHolder = document.getElementById('myDiv'); chart1.create(divHolder); Note that the last thing you want to do is chart.Create, if you use any API after this call that modifies the chart, the chart will be rendered more than once which in your case (700 series, 40 points) would make the page very slow. Something to test would be to switch between CoreBasic and CoreVector, CoreBasic has a simpler code (as it does not allow you to style the galleries) but it might be slower as it draws each line segment independently. If you want to test apples against apples you might want to use a simpler line style while using vector as follows chart1.getGalleryAttributes().setTemplate("LineBasic"); This will draw a line without a shadow which in your case will slow things down and probably make the chart even harder to understand. On my tests this improves the time that takes to see the chart on the page. Finally about your question about jChartFX and ChartFX for WinForms and their speed comparison, they both share the same source code, obviously the javascript version has to be interpreted and/or compiled by your browser, additionally we chose in jChartFX to render using SVG, this allows you to modify the chart's appearance using CSS but is known to be slower than using Canvas. When rendering using SVG our code is actually pushing objects to the browser's DOM which will be eventually painted by the browser later. We have been researching providing an alternate canvas implementation but do not have firm plans yet, the tricky part when using canvas would be hit testing beside the fact that you will not be able to use CSS to customize the chart and also certain effects (such as the line shadow using blur) would not be practical on a canvas implementation. Regards, JuanC

Can you try the following Try a page with this code $(document).ready(function($) { var chart1 = new cfx.Chart(); var divHolder = document.getElementById('ChartDiv'); chart1.setGallery(cfx.Gallery.Lines); chart1.setDataSource([10,12,14,8,13]); chart1.create(divHolder); } If this works you might want to try calling all the code that customizes the chart between the new cfx.Chart() and the chart1.Create() call, this will also make sure the chart is only rendered once onto the HTML page. Regards, JuanC

I just tested this and it works fine with a single series line chart, can you specify the following to help us troubleshoot the issue - jChartFX version, you can view this using alert(cfx.Version) - Browser(s) tested - Small sample code showing used API If possible also check the characteristics of the div that is hosting the chart content and its parents, we have had some issues in older builds when a chart for example is hosted in a div whose parent div has relative positioning. Regards, JuanC

I tried Firefox, Chrome and Safari on Mac as well as Firefox and Internet Explorer on Windows and could not replicate the overlap issue you are experiencing. I also could not find any recent checkin where we could have fixed this. I tried both our current public build (7.2.5289) as well as our development build and they both worked fine. Has anybody else seen this? Are you doing something special on the CSS used on the page or the div where the chart is created? Maybe related to fonts? JuanC

Can you duplicate the problem with a chart with only this code? chart1.setDataSource([{"Auto Loan Balances":68206872.03,"30 Days Delinquent":2313403.43},{"Auto Loan Balances":67602034.03,"30 Days Delinquent":1708217.61}]); chart1.setGallery(cfx.Gallery.Bar); chart1.getLegendBox().setDock(cfx.DockArea.Bottom); chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near); Can you specify the build you are using alert(cfx.Version); The same code generates the right spacing in the legend box in my tests. JuanC

We support incomplete data, if there is a missing property (note that we discover available properties by looking at first object in the array), e.g. chart1.setDataSource([{"A":10},{"A":12},{"A":14},{},{"A":20},{"A":17},{"A":13},{},{"A":20},{"A":17},{"A":13}]); We also define a value that we use to break the lines (we do not use NaN or null for this purpose) so you could also pass the following array chart1.setDataSource([{"A":10},{"A":12},{"A":14},{"A":cfx.Chart.Hidden},{"A":20},{"A":17},{"A":13},{"A":cfx.Chart.Hidden},{"A":20},{"A":17},{"A":13}]); We have discovered an issue in a recent build of CoreVector where only the last line segment might be displayed and should have a bug fix soon, in the meantime if you experience this problem you can use CoreBasic. Regards, JuanC

Note the use of -1 when using getItem to modify the color for all series of the particular point. Even though you only have 1 series, it is better to use this in case you decide to show the legend box. chart1.getAllSeries().setMultipleColors(true); var points = chart1.getPoints(); points.getItem(-1, 0).setColor("#FF0000"); points.getItem(-1, 1).setColor("#00FF00"); points.getItem(-1, 2).setColor("#FFFF00"); JuanC

See answer in duplicate thread JuanC

For performance reasons we only inspect the first object to query for its properties, you might have to loop through your objects, checking for additional fields that do not exist on the first object and them as properties to the first object, you can use the cfx.Chart.Hidden value to make sure no value is drawn for those elements. For example the field "13-020866-01" would have to be added to the first element in your array. I also noticed that for most dates you have 2 properties in the same object with the same name, I am not sure is that valid in javascript as the field name is the key in a dictionary so an object should not have 2 property values using the same key. JuanC

We have fixed an issue in the rotate method for the annotation objects. This should be included in our next public build. JuanC

The default "dock" position is to the right of the chart, if you want move it to the top you need chart1.getLegendBox().setDock(cfx.DockArea.Top); Note that the legend will "take" the space from the top of the chart, but will be aligned to the left. To align it to the right you would then use chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Far); JuanC

For performance reasons we only inspect the first object to query for its properties, so from our point of view your data source has 3 "fields": Date, CrewA and CrewB. So we create a chart with 3 points but for the last point the values for both series (CrewA and CrewB) are hidden/not shown. JuanC

We understand copying an image to the clipboard is important in some scenarios, and we continue researching on a canvas renderer for future releases, once we decided on using SVG we took advantage of some features (easy CSS support, simplified hittest for click/hover) that makes it difficult to fully switch to a canvas scenario so we are also investigating if we can support a paintToCanvas method while maintaining our renderer as SVG on the screen. As of now we do not have a firm date for releasing a canvas renderer but I though I would pass along a trick that we are using internally to get screenshots for our documentation This uses the fact that canvas support an image whose source is an SVG, normally the image src would be a different URL but you can also provide the SVG as base64, the tricky part is actually saving an image to a file, this works in Chrome but not in Safari or Firefox (have not tested IE yet) but maybe your requirements are different or you can provide this functionality to your chrome users. var html1 = $("svg.jchartfx").parent().html(); // Filter the SVG tag only var html = html1.substring(html1.indexOf("<svg")); // If CSS is used, a reference to the external css must be added to the SVG. This is not needed if CSS is not used // html = "<?xml-stylesheet href=\"http://yoursite/include/jchartfx.css\" type=\"text/css\"?>" + html; var canvas = document.querySelector("canvas"); var context = canvas.getContext("2d"); var imgsrc = 'data:image/svg+xml;base64,' + btoa(html); var image = new Image; image.src = imgsrc; // This function creates the PNG and saves it to disk image.onload = function() { context.drawImage(image, 0, 0); var canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.download = "sample.png"; a.href = canvasdata; a.click(); }; As I said in our tests, an image gets saved in Chrome but not in other browsers, maybe you can use the part of the code that generates the image without actually saving it to disk. JuanC