Jump to content
JChartFX Community


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by JuanC

  1. 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
  2. We just uploaded a new pre-release build that should fix the duplicate IDs issue. Regards, JuanC
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. We have to moderate the forum to avoid spam. JuanC
  11. 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
  12. 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
  13. 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
  14. We have uploaded a new pre-release build (7.5.5896) that should fix this issue. JuanC
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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>
  20. 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
  21. It has been addressed, please download the pre-release build and let us know if it fixes this issue for you. Regards, JuanC
  22. 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
  23. We just uploaded a new pre-release version that should fix this issue. Please download it and let us know if it fixes the problem in your real-world scenario. Also note that in order for our sample to work when you hover first over the "default tooltip" chart and later over the custom tooltip one, you will need to cleanup the tooltip div as follows if (divInTooltip === null) { divInTooltip = document.getElementById('tipChartInfo'); // This makes sure tooltip is cleaned up if it was already shown on a default tooltip while(args.tooltipDiv.hasChildNodes()) args.tooltipDiv.removeChild(args.tooltipDiv.lastChild); args.tooltipDiv.appendChild(divInTooltip); The fix makes sure that once you customize a tooltip, we do not try to reuse that div for other charts tooltips. Regards, JuanC
  24. I would recommend you download our most recent jChartFX version and try again. If the problem persists, please post or send us a small sample page that exhibits this behavior. Regards, JuanC
  25. We have uploaded a new pre-release version that should fix this issue. JuanC
  • Create New...