Jump to content
JChartFX Community

JuanC

Administrators
  • Content Count

    418
  • Joined

  • Last visited

  • Days Won

    3

Everything posted by JuanC

  1. JuanC

    Tooltip delay

    chart1.getToolTips().setInitialDelay(200); The delay is specified in milliseconds. Regards, JuanC
  2. Have you tried using the render event as I showed on my post? It should give you the feature that you need. I do not understand why you cannot invoke the ApplyRuleBuilderOnBarLineUniversalAreaChart before the chart create call, the way you are doing it now the chart will be painted twice (one without the axis section and one with) and that may be visible to the user. Is there a particular reason why you need to wait for the chart to be rendered to create the axis section? But again, if that is what you need you should be able to use the render event. Regards, JuanC
  3. I am not entirely sure what you mean "fire shading chart function" but there is an event we fire after we are done generating the chart visuals, chart1.on("render", onRenderEvent); function onRenderEvent() { } Hope this helps. JuanC
  4. I was unable to duplicate the issues you describe (and are visible in the screenshots). Can you please provide the code you use to customize the chart? Regards, JuanC
  5. I am guessing you are talking about the user interface when you select the Series menu. This is created dynamically, we do not use classes in this code but we try to get the color for AttributeX. I noticed we do not try to use the series tag so that could explain a discrepancy between the color in the menu and the series. This has been fixed and the fix will be included in our next drop. Regards, JuanC
  6. You are doing nothing wrong, this is by design, when you use our CSS it means colors (and fonts, and line widths) are controlled through CSS instead of API, you have 3 options 1) Do not include our palette and attributes CSS, this is recommended if you will need to control several colors "dynamically" 2) Make a copy of the used CSS and change it as needed, e.g. .jchartfx .Attribute0 { fill: #D0C5E3; stroke: #D0C5E3; } Note that sometimes we generate several classes for an object (you can view this using Inspect in your browser), for example, axis sections generate a class such as "AxisSection AxisY_Section AxisY0_Section0" to give you a chance to change all axis sections, all Y axis sections or a particular section by index. 3) Most objects expose a setTag method that allows you to customize the generated class Regards, JuanC
  7. You can attach a handler to the gettip event and one of the fields will be the tooltip div, e.g. function onTipDiv(args) { var style = args.tooltipDiv.getAttribute("style"); args.tooltipDiv.setAttribute("style", style + ";background:#880015"); } chart1.on("gettip", onTipDiv); Hope this helps. JuanC
  8. If I run the following code (without using CSS) I get a section from 10 to 14 with a yellowish color (ffdb99) chart1 = new cfx.Chart(); chart1.setDataSource([8,12,14,13,9]); var sectionWarning = new cfx.AxisSection(); sectionWarning.setFrom(10); chart1.getAxisY().getSections().add(sectionWarning); sectionWarning.setBackColor("#ffdb99"); sectionWarning.getGrids().getMajor().setVisible(false); sectionWarning.getGrids().getMinor().setVisible(false); sectionWarning.getGrids().getMinor().setTickMark(cfx.TickMark.None); sectionWarning.getGrids().getMajor().setTickMark(cfx.TickMark.None); sectionWarning.setTextColor("#ffdb99"); sectionWarning.setText("Warning"); I noticed the pink section in your chart but I am not sure if you are using CSS, or if there is extra code that is causing this issue. If the problem persists, please try posting a small sample that reproduces the problem (include hardcoded data and other customizations, let us know if CSS is being used). Regards, JuanC
  9. You are probably including our CSS (attributes and/or palette), which means colors are controlled through CSS instead of API, you have 3 options 1) Do not include our palette and attributes CSS, this is recommended if you will need control several colors "dynamically" 2) Make a copy of the used CSS and change it as needed, e.g. .jchartfx .AxisY_Section { fill: #D0C5E3; stroke: #D0C5E3; } Note that sometimes we generate several classes for an object (you can view this using Inspect in your browser), sections generate a class such as "AxisSection AxisY_Section AxisY0_Section0" to give you a chance to change all axis sections, all Y axis sections or a particular section by index. 3) Most objects (including AxisSection) expose a setTag method that allows you to customize the generated class sectionWarning.setTag("Warning"); And include the following on either your page or a css included by your page .jchartfx .Warning { fill: #FFFF00; } Regards, JuanC
  10. You can modify any (or all) of the charts after any event captured on the client, e.g. <body> <select id="year" onchange="onYearChanged()"> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> </select><br/> <div id="ChartDiv" style="width:550px;height:400px;display:inline-block"></div> </body> JavaScript function onLoadDoc() { chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Bar); chart1.setDataSource([10,12,8,9,11]); chart1.create("ChartDiv"); } function onYearChanged() { var selectObj = document.getElementById("year"); if (selectObj.value == "1997") chart1.setDataSource([10,12,8,9,11]); else if (selectObj.value == "1998") chart1.setDataSource([8,7,12,14,11]); else chart1.setDataSource([3,4,8,1,12]); } Obviously instead of hardcoding data you would either request new data to the server or filter existing data, once you have the data you can invoke setDataSource on the chart to change its data, if necessary you can also change any of the charts visual attributes. We do not offer any APIs to filter data Regards, JuanC
  11. There are several ways to improve the plot area size in charts, including 1) Removing the border chart1.setBorder(null); 2) Hiding the legend box chart1.getLegendBox().setVisible(false); 3) Decreasing the margin size around the plot area var margin = chart1.getPlotAreaMargin(); margin.setLeft(5); margin.setTop(5); margin.setRight(5); margin.setBottom(5); 4) Decreasing the font size (assuming you are not using our attributes CSS) chart1.setFont("7pt Arial"); If this do not work, please post a small code snippet showing the customizations you are doing to the chart and the size you are using for the small divs Regards, JuanC
  12. The way motifs work, charts/gauges properties are modified when objects are constructed (to allow for your customizations to override motif customizations). Because of this, if you are going from motif A to motif B it is not trivial to try to "undo" the actions on motif A before trying to apply B. It does not need necessarily a full page reload but recreating the charts is the simple way to achieve this (if the motif change is happening on the client side). JuanC
  13. Please note that we want projected end date to be the first series because of the order we paint elements, also note that we are faking a FromValue for that series because we expect all series to be have the same shape. Finally note that we are setting the gallery for the first series to be Scatter. var usingDates = true; var ganttData; if (usingDates) { ganttData = [ { "ProjectName": "PROJECT 1", "StartValue": "2016-11-05T00:00:00+05:30", "EndValue": "2016-11-30T00:00:00+05:30", "ProjectedEndValue": "2016-12-10T00:00:00+05:30", "TimeStamp": "15/11/2016 12:33 PM", }, { "ProjectName": "PROJECT 2", "StartValue": "2016-11-12T00:00:00+05:30", "EndValue": "2016-12-05T00:00:00+05:30", "ProjectedEndValue": "2016-12-01T00:00:00+05:30", "TimeStamp": "15/11/2016 12:33 PM", }, ]; chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Date); } else { ganttData = [ { "ProjectName": "PROJECT 1", "StartValue": "2", "EndValue": "5", "ProjectedEndValue": "6", "TimeStamp": "15/11/2016 12:33 PM", }, { "ProjectName": "PROJECT 2", "StartValue": "3", "EndValue": "8", "ProjectedEndValue": "7", "TimeStamp": "15/11/2016 12:33 PM", }, ]; } var fields = chart1.getDataSourceSettings().getFields(); var field; field = new cfx.FieldMap(); field.setName("ProjectedEndValue"); field.setUsage(cfx.FieldUsage.FromValue); fields.add(field); field = new cfx.FieldMap(); field.setName("ProjectedEndValue"); field.setUsage(cfx.FieldUsage.Value); fields.add(field); field = new cfx.FieldMap(); field.setName("StartValue"); field.setUsage(cfx.FieldUsage.FromValue); fields.add(field); field = new cfx.FieldMap(); field.setName("EndValue"); field.setUsage(cfx.FieldUsage.Value); fields.add(field); field = new cfx.FieldMap(); field.setName("ProjectName"); field.setUsage(cfx.FieldUsage.Label); fields.add(field); chart1.setGallery(cfx.Gallery.Gantt); chart1.setDataSource(ganttData); chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Scatter); Hope this helps. JuanC
  14. We do not support using the "zoom" scrollbar on charts using multiple panes, actually we eve have code that tries to force the simple scrollbars in those situations. If you are ok with simple scrollbar, you can force them using the following code chart1.getZoom().setUseSimpleScrollBars(true); In our current builds (not made public yet) we are exploring an API that allows you to select a single pane or series to show in this "zoom" scrollbar, would this be something that helps you in your scenario? Can you tell us the version of jChartFX you are using and post sample code that duplicates the problem you are experiencing? Regards, JuanC
  15. I am including sample code on how to create a simple gantt chart using either numerical data or dates, please note that if you set the fields correctly you do not need to manually loop through the data. var usingDates = true; var ganttData; if (usingDates) { ganttData = [ { "ProjectName": "PROJECT 1", "StartValue": "2016-11-05T00:00:00+05:30", "EndValue": "2016-11-30T00:00:00+05:30", "TimeStamp": "15/11/2016 12:33 PM", }, { "ProjectName": "PROJECT 2", "StartValue": "2016-11-12T00:00:00+05:30", "EndValue": "2016-12-05T00:00:00+05:30", "TimeStamp": "15/11/2016 12:33 PM", }, ]; chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Date); } else { ganttData = [ { "ProjectName": "PROJECT 1", "StartValue": "2", "EndValue": "5", "TimeStamp": "15/11/2016 12:33 PM", }, { "ProjectName": "PROJECT 2", "StartValue": "3", "EndValue": "8", "TimeStamp": "15/11/2016 12:33 PM", }, ]; } var fields = chart1.getDataSourceSettings().getFields(); var field; field = new cfx.FieldMap(); field.setName("StartValue"); field.setUsage(cfx.FieldUsage.FromValue); fields.add(field); field = new cfx.FieldMap(); field.setName("EndValue"); field.setUsage(cfx.FieldUsage.Value); fields.add(field); field = new cfx.FieldMap(); field.setName("ProjectName"); field.setUsage(cfx.FieldUsage.Label); fields.add(field); chart1.setGallery(cfx.Gallery.Gantt); chart1.setDataSource(ganttData); Hope this helps. JuanC
  16. Please note that each motif is a js and each palette is a css file so if your solution is server side, the simple way to do this would be to allow these dropdowns to change some url parameters and regenerate the page in question using the appropriate motif/palette combination. If you want to change them "client side", you could include various/all motifs on the same page, to change a motif you would have to execute something like this cfx.motif = "block" And later recreate the charts/gauges in the page. Changing the palette is a little more involved because it would require you "unloading" a css before loading the new palette. I will check with the team that created that page and the motif page to see if they can provide extra details in this thread. Regards, JuanC
  17. We are uploading a "pre-release" build that includes this fix, it should be ready to download later today, please let us know if you experience any issues. Regards, JuanC
  18. Assuming this data and function to extract week number, note that I have no idea if this function implements the week number that you expect as week numbering seems to be vaguely defined var items = [ { "Date": "2016-07-06T08:45:10.280Z", "Value": 15}, { "Date": "2016-08-15T12:15:00.000Z", "Value": 12}, { "Date": "2016-08-25T23:45:10.280Z", "Value": 18}, ]; function getWeekOfYear(date) { var target = new Date(date.valueOf()), dayNumber = (date.getUTCDay() + 6) % 7, firstThursday; target.setUTCDate(target.getUTCDate() - dayNumber + 3); firstThursday = target.valueOf(); target.setUTCMonth(0, 1); if (target.getUTCDay() !== 4) target.setUTCMonth(0, 1 + ((4 - target.getUTCDay()) + 7) % 7); return Math.ceil((firstThursday - target) / (7 * 24 * 3600 * 1000)) + 1; } I see 3 choices, 1) If you are creating a bar chart or even if using a line/area chart you do not have holes in your data or do not want to plot holes in the data, you could add a field with the week number using the date and then tell jChartFX that you want to use that as the label, e.g. for(var i = 0; i < items.length; i++) { var item = items; item["Week"] = getWeekOfYear(new Date(Date.parse(item["Date"]))); } var fieldMap; fieldMap = new cfx.FieldMap(); fieldMap.setName("Week"); fieldMap.setUsage(cfx.FieldUsage.Label); chart1.getDataSourceSettings().getFields().add(fieldMap); fieldMap = new cfx.FieldMap(); fieldMap.setName("Value"); fieldMap.setUsage(cfx.FieldUsage.Value); chart1.getDataSourceSettings().getFields().add(fieldMap); 2) If you are creating a line/area chart and want to have holes in the display for missing weeks, just do the same as before but use cfx.FieldMap.XValue for the week field. 3) It is also possible to keep using the date field as the labels or X value and handle an event so that you can return a string used for the X axis labels, this would be a little more involved but I thought I should mention it in case it is useful in other scenarios. JuanC
  19. Unfortunately we do not support week number. d -> Day dd -> Day with trailing zero if necessary ddd- >Day of Week Abbreviated dddd -> Day of Week M -> Month MM -> Month with trailing zero if necessary MMM -> Month Name Abbreviated MMMM -> Month Name yy -> Last 2 digits of year yyyy -> Year h -> Hour hh -> Hour with trailing zero H -> Hour (24 hour format) HH -> Hour (24 hour format) with trailing zero m -> Minute mm -> Minute with trailing zero s -> Second ss -> Second with trailing zero t -> First letter of am/pm tt -> am/pm Regards, JuanC
  20. I tried this as the only code in a page var chart1 = new cfx.Chart(); chart1.setDataSource([{"myinfomonitor_ts":"2016-07-04T10:55:19.785Z","bundleweight_sum":14350},{"myinfomonitor_ts":"2016-07-04T11:55:19.785Z","bundleweight_sum":24950},{"myinfomonitor_ts":"2016-07-04T12:55:19.785Z","bundleweight_sum":7076},{"myinfomonitor_ts":"2016-07-04T13:55:19.785Z","bundleweight_sum":18148},{"myinfomonitor_ts":"2016-07-04T14:55:19.785Z","bundleweight_sum":21726},{"myinfomonitor_ts":"2016-07-04T15:55:19.785Z","bundleweight_sum":22326},{"myinfomonitor_ts":"2016-07-04T16:55:19.785Z","bundleweight_sum":9356},{"myinfomonitor_ts":"2016-07-04T17:55:19.785Z","bundleweight_sum":23432},{"myinfomonitor_ts":"2016-07-04T18:55:19.785Z","bundleweight_sum":25708},{"myinfomonitor_ts":"2016-07-04T19:55:19.785Z","bundleweight_sum":24546},{"myinfomonitor_ts":"2016-07-04T20:55:19.785Z","bundleweight_sum":24650},{"myinfomonitor_ts":"2016-07-04T21:55:19.785Z","bundleweight_sum":21070},{"myinfomonitor_ts":"2016-07-04T22:55:19.785Z","bundleweight_sum":27072},{"myinfomonitor_ts":"2016-07-04T23:55:19.785Z","bundleweight_sum":42356},{"myinfomonitor_ts":"2016-07-05T00:55:19.785Z","bundleweight_sum":38798},{"myinfomonitor_ts":"2016-07-05T01:55:19.785Z","bundleweight_sum":0},{"myinfomonitor_ts":"2016-07-05T02:55:19.785Z","bundleweight_sum":7146},{"myinfomonitor_ts":"2016-07-05T03:55:19.785Z","bundleweight_sum":13038},{"myinfomonitor_ts":"2016-07-05T04:55:19.785Z","bundleweight_sum":18630},{"myinfomonitor_ts":"2016-07-05T05:55:19.785Z","bundleweight_sum":12464},{"myinfomonitor_ts":"2016-07-05T06:55:19.785Z","bundleweight_sum":3540},{"myinfomonitor_ts":"2016-07-05T07:55:19.785Z","bundleweight_sum":0},{"myinfomonitor_ts":"2016-07-05T08:55:19.785Z","bundleweight_sum":0}]); chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.DateTime); chart1.getAxisX().setLabelAngle(0); chart1.getAxisX().getLabelsFormat().setCustomFormat("HH"); chart1.getAxisX().setStaggered(true); And the labels are shown correctly, note that I am not setting the step, and jChartFX should calculate an appropriate one, if the format is set to DateTime, we will consider the following steps: 1,2,3,6,12 hours 1,5,10,15,30 minutes or 1,5,10,15,30 seconds. Is it possible you are changing other property that is causing the labels not to appear? I tried both with 6022 as well as 5900 and in both cases it worked. About the step, the answer is yes. Setting the step to 2/24 would give you a label every 2 hours. Note that because of floating point limitations some specific combinations might not work properly, we will research if we can provide a way to specify the unit of the step (e.g. day, hour, minute) in future builds. JuanC
  21. BTW, note that if you wanted to change the color for the bar labels and setting the line alignment such that the labels are painted inside the bars, you would need to change the inside color. seriesItem2.getPointLabels().setVisible(true); seriesItem2.getPointLabels().setLineAlignment(0); seriesItem2.getPointLabels().setTextInsideColor("#FFFF00"); JuanC
  22. The bug is related to a behavior where galleries that paint their labels inside (e.g. pie, bar, etc.) can use a different color to make sure labels are more visible. You can workaround the bug by using the following line seriesItem.getPointLabels().setTextColorMethod(cfx.PointLabelColor.Outside); We will be fixing this issue in our next build. Regards, JuanC
  23. 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
  24. (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
  25. 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
×
×
  • Create New...