JuanC

Other than passing the data, this code would generate the chart you are looking for chart.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.DateTime); chart.getAxisX().getLabelsFormat().setCustomFormat("HH"); chart.getAxisX().setStaggered(true); If you do not specify the Axis Format and we see a date time field we default to AxisFormat.Date, which has a "minimal" step of 1 day. Setting the format to DateTime should take care of this. Please note that if you set the Axis step in a date time field, it will be specified in days We recently fixed some issues with date time fields, if you notice any issues please try downloading our most recent pre-release version. Regards, JuanC

(1) In a pie chart we do not show the collection of series in the legend box, instead we show the points which are represented in the API using the X axis, please change line 2 of your code as follows var ial = ia.getItemList(c0.getAxisX()); (2) This is not possible in the current build, we support templates in most elements (galleries, titles, etc.) so in our next build we will support templates for the markers in the legend box, note that the XML we use is based on XAML but I am afraid is not documented anywhere. In future builds you would use something like this ial.setMarkerShape(cfx.MarkerShape.Template); ial.setMarkerTemplate('<DataTemplate xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:sys="clr-namespace:System;assembly=mscorlib">' + '<DataTemplate.Resources>' + '<sys:Double x:Key="cfxOSW">1</sys:Double>' + '</DataTemplate.Resources>' + '<Viewbox ViewWidth="25" ViewHeight="25">' + '<Path Data="M12,0L24,24L0,24Z" Fill="{Binding Path=Fill}" Stroke="{Binding Path=Stroke}" />' + '</Viewbox>' + '</DataTemplate>'); (3) Same as 2, in future builds ial.setMarkerShape(cfx.MarkerShape.Template); ial.setMarkerTemplate('<DataTemplate>' + '<Ellipse Fill="{Binding Path=Fill}"/>' + '</DataTemplate>'); Regards, JuanC

Feel free to post the sample code in this forum. You can also use http://www.jchartfx.com/libs/v7/current/js/jchartfx.full.jsif you prefer jsfiddle. JuanC

I am not sure what you mean by "when I have combined chart series" I tried this chart1.setGallery(cfx.Gallery.Bar); chart1.setDataSource([{"A":10, "B":14}, {"A":11, "B":9}, {"A": 13, "B":12}]); chart1.getSeries().getItem(1).getPointLabels().setVisible(true); chart1.getSeries().getItem(1).getPointLabels().setTextColor("#FF0000"); And in case you meant combining galleries, also tried this chart1.setGallery(cfx.Gallery.Bar); chart1.setDataSource([{"A":10, "B":14}, {"A":11, "B":9}, {"A": 13, "B":12}]); chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Lines); chart1.getSeries().getItem(1).getPointLabels().setVisible(true); chart1.getSeries().getItem(1).getPointLabels().setTextColor("#FF0000"); Can you post a small sample that shows the problem you are experiencing? Are you using CSS? If so please note that jChartFX can operate in one of 2 modes 1) Without including any of the jChartFX CSS files (typically one "attribute" and one "palette") In this mode you can change any colors/fonts using our API, e.g. this will generate red point labels for the second series chart1.setGallery(cfx.Gallery.Bar); chart1.setDataSource([{"A":10, "B":14}, {"A":11, "B":9}, {"A": 13, "B":12}]); chart1.getSeries().getItem(1).getPointLabels().setVisible(true); chart1.getSeries().getItem(1).getPointLabels().setTextColor("#FF0000"); In a similar way you could change the color for the bars as follows chart1.getSeries().getItem(1).setColor("#FFFF00"); 2) Including our CSS files In this mode, the SVG generated by jChartFX will not have colors but instead will use classes. In this mode you should configure colors/fonts/etc by modifying the appropriate colors. I noticed that when we generate Point Labels when using CSS, we only generate the labels with a class "PointLabel", we will fix in future builds by also including the series, e.g. "PointLabel PointLabel1" to make it easier to change colors on a per-series basis. Regards, JuanC

We just uploaded a new pre-release build that should fix the duplicate IDs issue. Regards, JuanC

Please try downloading our most recent pre-release version, we have fixed some issues with dates as well as some code that was incorrectly removed. Regards, JuanC

Our current internal build will not assign an ID to the first div (used for rendering). This should be part of the pre-release bits soon. Also note that if you have 2 charts in a page, we will be changing the ID of the second (and so on) svgs. In reality we do not need that ID at all but we are afraid we might break somebody who is using getElementById to get to the svg element. Regards, JuanC

We do generate those 2 divs, one for measuring and the second one is the svg rendering of the chart. We will research if we can rename the measuring one but you never specified which issue is caused in your app as maybe there is a workaround for it. JuanC

This is a bug recently introduced as we constantly try to optimize our scripts to reduce size and memory footprint. It has been fixed in build 5962 which can be downloaded as a pre-release build. Regards, JuanC

You can remove that space by adding the following code var plotMargin = chart1.getPlotAreaMargin(); plotMargin.setLeft(1); plotMargin.setTop(1); plotMargin.setRight(1); plotMargin.setBottom(1); Note that 1 is the minimum value for the margins as 0 means to use our defaults. Regards, JuanC

This would be the smallest page using pictograph (a type of gauge, defined inside jchartx.gauge.js) <!DOCTYPE html> <html> <head> <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> <script type="text/javascript" src="jchartfx.gauge.js"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function($) { var pictograph = new cfx.gauge.PictoGraph(); pictograph.getMainMeasure().setValue(3.4); pictograph.getTotal().setValue(10); pictograph.create("myDiv"); }); </script> </head> <body> <div id="myDiv" style="width:600px;height:400px;display:inline-block"></div> </body> </html> If you need a pictobar (a bar chart using pictographs) you would instead do something like this <!DOCTYPE html> <html> <head> <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> <script type="text/javascript" src="jchartfx.pictograph.js"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function($) { var chart1 = new cfx.Chart(); chart1.setDataSource([10,12,14,8]); var pictobar = new cfx.pictograph.PictoBar(); chart1.setGalleryAttributes(pictobar); chart1.create("myDiv"); }); </script> </head> <body> <div id="myDiv" style="width:600px;height:400px;display:inline-block"></div> </body> </html> Hope this helps. JuanC

If you know you will only have 2 elements in your pie and do not care to color each slice indepently chart1.setDataSource([8,20]); chart1.setBorder(null); chart1.setBackColor("#00FFFFFF"); chart1.setGallery(cfx.Gallery.Pie); chart1.getLegendBox().setVisible(false); chart1.getGalleryAttributes().setTemplate('<DataTemplate xmlns:x="a" xmlns:sys="b">' + '<Path Data="{Binding Path=Geometry}" Stroke="#00FF00" StrokeThickness="{Binding Path=StrokeThickness}"/>' + '</DataTemplate>'); If you do care about coloring each slice border with a different color chart1.getGalleryAttributes().setTemplate('<DataTemplate xmlns:x="a" xmlns:sys="b">' + '<Path Data="{Binding Path=Geometry}" Stroke="{Binding Path=Stroke}" StrokeThickness="{Binding Path=StrokeThickness}"/>' + '</DataTemplate>'); var points = chart1.getPoints(); points.getItem(-1,0).getBorder().setColor("#000000"); points.getItem(-1,1).getBorder().setColor("#FFFFFF"); Hope this helps. JuanC

We have to moderate the forum to avoid spam. JuanC

1) To change the line color of a line chart Please use the Series.Border, e.g. chart1.setGallery(cfx.Gallery.Lines); chart1.getGalleryAttributes().setTemplate("LineBasic"); chart1.setDataSource([{"A":10, "B":20},{"A":14, "B":18},{"A":13, "B":16}]); chart1.getSeries().getItem(0).getBorder().setColor("#FF0000"); 2) There are 2 elements that contribute to the background of a chart, the back color of the chart and the border (some borders will add some effects) In our default border, the border paints some effects on top of the background including some gradients, if you want a solid border and control over the round corners you would need something like this var borderTemplate = '<DataTemplate xmlns:x="a" xmlns:sys="b">' + '<DataTemplate.Resources>' + '<DataTemplate x:Key="internalRect">' + '<Border Background="{Binding Path=Fill}" BorderBrush="{Binding Path=Stroke}" />' + '</DataTemplate>' + '<DataTemplate x:Key="internal">' + '<Line Stroke="{Binding Path=Stroke}" X1="{Binding Path=X1}" X2="{Binding Path=X2}" Y1="{Binding Path=Y1}" Y2="{Binding Path=Y2}"/>' + '</DataTemplate>' + '</DataTemplate.Resources>' + '<Border Background="{Binding Path=Fill}" BorderBrush="{Binding Path=Stroke}">' + '</Border>' + '</DataTemplate>'; chart1.getBorder().setTemplate(borderTemplate); Unfortunately we did not expose this as a "prebuilt" template in the same way as "LineBasic", we will do so in future builds. If you want some roundness to the border, you can add CornerRadius="8" to the last <Border> tag. To change the background color and border color you would use chart1.setBackColor("#E0E0E0"); chart1.getBorder().setColor("#FF0000"); Hope this helps. JuanC

If using an OEM license and legend box is positioned at top, there will be extra space "stolen" from plot area at the bottom to make space for icon, even when icon is not visible. JuanC

About the spacing between legend box, title and plot area Sample Chart Code chart1.setBorder(null); chart1.setGallery(cfx.Gallery.Bar); chart1.setDataSource([{"Male":9.2, "Female":8.4, "Year":"2007"},{"Male":3, "Female":4, "Year":"2008"},{"Male":4, "Female":4, "Year":"2009"}]); var title = new cfx.TitleDockable(); title.setText("Birth Variation by Gender"); chart1.getTitles().add(title); var legendBox = chart1.getLegendBox(); legendBox.setDock(cfx.DockArea.Top); Sample Code to minimize empty space var plotAreaMargin = chart1.getPlotAreaMargin(); // Measured in pixels, minimum space at top of plot area // Might result in top axis label clipped if set to minimum value (1) and no title is present plotAreaMargin.setTop(3); // Measured in pixels, extra vertical space if legend is positioned at top/bottom // this method is only exposed in build 5900 or later legendBox.setExternalGap(0); // Measured in pixels, if set to 0 legend marker might be slightly clipped legendBox.setMarginY(2); // Measured in percentage, defaults to 2 legendBox.setLineSpacing(1); // Measured in pixels title.setSeparation(0); // Alignment center (default) might create some spacing between legend (top) and title title.setLineAlignment(cfx.StringAlignment.Near); Please note that setExternalGap is only available in build 5900 or later, all other methods should be available. JuanC

We have uploaded a new pre-release build (7.5.5896) that should fix this issue. JuanC

We try to use dates or strings using ISO 8601 format as dates, e.g. the following data will create a chart where we identify the field Date as holding dates, notice that we used lines as this gallery supports XY data so it is easier to see that the distance between the first 2 points is not the same as the last 2 points. chart1.setDataSource([{"Value":12, "Date":"2016-02-15"}, {"Value":14, "Date":"2016-02-16"}, {"Value":11, "Date":"2016-02-18"}]); chart1.setGallery(cfx.Gallery.Lines); To workaround this you need to specify how each field will be used, e.g. var fields = chart1.getDataSourceSettings().getFields(); var field; field = new cfx.FieldMap(); field.setName("Value"); field.setUsage(cfx.FieldUsage.Value); fields.add(field); field = new cfx.FieldMap(); field.setName("Date"); field.setUsage(cfx.FieldUsage.Label); fields.add(field); Note that you have to assign the fields before using setDataSource, you will notice that the points in the line are equally spaced but there is a bug that will still format the dates on the user's culture. This will be fixed in our next build. A workaround before this issue is fixed would be to add a character (e.g. a whitespace) in the first element's date to trick our detection code. JuanC

Sorry for the typo, I think it was autocorrect gone wrong as it happened twice, I will be fixing the posts. Note that we only declare one public global object (cfx) to avoid pollution. JuanC

That is what we used to do but feedback from customers moved us to the current design. Although I can understand your point of view that a bar with 0 should not be visible, specially now that we use a thicker border, the current approach has a certain consistency with connected galleries (line, area, curve) where a 0 will still connect the previous value with 0 while a "special" value (cfx.Chart.Hidden) breaks the line/area in 2 segments. Bars with a 0 value are drawn with just the border while bars with Hidden are completely invisible. We will research adding a flag that would treat 0 as hidden for bars, whether we change that to be the default is trickier because we would be changing the behavior for all customers. JuanC PS: In the meantime you could quickly loop through your data before passing it to the chart replacing 0 with cfx.Chart.Hidden

I am afraid this is by design, You can change the 0 with cx.Chart.Hidden and the bar will not be displayed at all for that particular value. cfx.Chart.Hidden also has the behavior of breaking up a connected gallery (such as line or area) in 2 segments. JuanC

Please try the following page, it does the minimum job required to have a bar chart and alert when you click one of them. <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.js"> </script> <script type="text/javascript" src="jchartfx.system.js"> </script> <script type="text/javascript" src="jchartfx.coreVector.js"> </script> <script type="text/javascript" language="javascript"> var chart1; function onLoadDoc() { chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Bar); chart1.setDataSource([10,12,14,8]); chart1.create("myDiv"); $("#myDiv").click(function (evt) { if (evt.hitType == cfx.HitType.Point) alert("Series " + evt.series + " Point " + evt.point); }); } $(document).ready(function($) { onLoadDoc(); }); </script> </head> <body> <div id="myDiv" style="width:600px;height:400px;display:inline-block"></div> </body> </html>

Make sure you attach your click handler after the chart.create call, that is the place where will attach our handler that will add the series, point and other properties to event parameter, and handlers run in the order they are attached. Your code should be chart1.create("myjChartFX"); ... $("#myjChartFX").click(function(evt) { alert(evt.point); }); I tested both orders and can confirm that it will NOT work if you attach the handler before the create call. JuanC

It has been addressed, please download the pre-release build and let us know if it fixes this issue for you. Regards, JuanC

We have not tried to integrate jChartFX in a meteor application. We will try to do so and post here the results. I noticed the errors you posted relate to motif files. Can you try including the "minimum" number of jChartFX files to see if you still get errors. You should try just including jchartfx.system.js and jchartfx.coreVector.js. Regards, JuanC