Jump to content
JChartFX Community

JuanC

Administrators
  • Posts

    421
  • Joined

  • Last visited

  • Days Won

    3

Everything posted by JuanC

  1. The saveJson function was only added in the latest unstable build (5666). We should be publishing documentation for these 2 methods soon. To be notified of UI changes by the user you would set the uiNotify to a function as in my previous post. We might rename this event before pushing the changes to the stable channel (probably changedByUser) Regards, JuanC
  2. The reason to have a baseline is that 1) your code will make some changes to the chart and 2) if you are using a motif, it might make some changes to the chart. If you include these changes when serializing the user changes, it might make it impossible to change motifs at a later time. There is a method already in chart called saveJson. If you invoke it without parameters it will return a JSON that contains the serialization of the chart but only the values that are different than the default. If you pass an empty object, e.g. chart1.saveJson({}), it will return the complete serialization of the chart (all members will be serialized). There is also a method called loadJson that receives a JSON object and reads the chart settings from it. Both of these (loadJson and saveJson) are implemented in the persistence js JuanC
  3. The current version of jChartFX does not support wrapping of text in titles, if your chart size is fixed, you could create multiple titles but obviously this won't work if the chart size is dynamic. We will investigate adding support for this in future versions of the product. Regards, JuanC
  4. We are almost ready to push this functionality on the unstable build. The way it will work (suggestions are welcome) would be as follows 1) Besides coreVector you will need to include the userInterface and persistence scripts 2) After you create and customize your chart you would do the following in order to save the current settings as the baseline as well as be notified of any changes on the UI (you could ignore the uiNotify call if you plan to save changes manually) chart1.recordBaseline(); chart1.uiNotify = onChartChange; 3) After the recordBaseline call you should incorporate the end-user changes, in this sample we are using localStorage but in order to save these personalizations on the server, you would probably connect to SQL (or any other storage API) on the server to generate a JSON that will be loaded on the client, note that to avoid the chart painting twice, you would not want use XMLHttpRequest but instead make sure the end-user customizations are sent back on the HTML page rendered by the client var userChanges = localStorage.getItem("chart"); if ((userChanges !== undefined) && (userChanges != null)) { // alert(userChanges); chart1.loadJson(JSON.parse(userChanges)); } 4) In the function invoked by our UI (or in the code that saves the user changes manually) function onChartChange() { var json = this.changesFromBaseline(); var text = JSON.stringify(json); localStorage.setItem("chart", text); // alert(text); } In a server approach you would use XMLHttpRequest (or ajax if you are using jQuery) to send the JSON string to the server. These bits should be available soon on the unstable channel. Please let us know if this approach would work on your scenarios. JuanC
  5. There is a new build that supports markers in bubble when using coreVector. To customize the tooltips, you could use the following approach var data = [ {"X": 10, "Y": 20, "Sales":45, "UserName":"John"}, {"X": 14, "Y": 30, "Sales":25, "UserName":"Peter"}, {"X": 22, "Y": 20, "Sales":15, "UserName":"Michael"} ]; var fields = chart1.getDataSourceSettings().getFields(); var field1 = new cfx.FieldMap(); field1.setName("X"); field1.setUsage(cfx.FieldUsage.XValue); fields.add(field1); var field2 = new cfx.FieldMap(); field2.setName("Y"); field2.setUsage(cfx.FieldUsage.Value); fields.add(field2); var field3 = new cfx.FieldMap(); field3.setName("X"); field3.setUsage(cfx.FieldUsage.Value); fields.add(field3); chart1.setDataSource(data); chart1.setGallery(cfx.Gallery.Bubble); chart1.getAxisX().setMax(30); chart1.getAxisY().setMax(40); var tipTemplate = '<DataTemplate xmlns:x="a">' + '<Grid Margin="3,0,3,3">' + '<Grid.ColumnDefinitions>' + '<ColumnDefinition Width="Auto"/>' + '<ColumnDefinition Width="Auto"/>' + '</Grid.ColumnDefinitions>' + '<Grid.RowDefinitions>' + '<RowDefinition Height="Auto"/>' + '<RowDefinition Height="Auto"/>' + '<RowDefinition Height="Auto"/>' + '</Grid.RowDefinitions>' + '<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Path=SeriesTX}" Foreground="{Binding Path=ItemFill}" Margin="0,2,12,1"/>' + '<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=ValueX}" FontWeight="Bold" HorizontalAlignment="Right" Margin="0,2,0,1"/>' + '<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Path=SeriesTY}" Foreground="{Binding Path=ItemFill}" Margin="0,2,12,1"/>' + '<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Value}" FontWeight="Bold" HorizontalAlignment="Right" Margin="0,2,0,1"/>' + '<TextBlock Grid.Row="2" Grid.Column="0" Text="Name:" Foreground="{Binding Path=ItemFill}" Margin="0,2,12,1"/>' + '<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=DataUserName}" FontWeight="Bold" HorizontalAlignment="Right" Margin="0,2,0,1"/>' + '</Grid>' + '</DataTemplate>'; chart1.getToolTips().setContentTemplate(tipTemplate); The important part of the template is the last 2 text blocks that show the extra information, if you need extra rows you also need to add Grid.RowDefinition to the list of rows. There is another approach where we call a function to obtain extra strings (that you could use to get info from your array) but I would recommend if possible to have the data packaged in one JSON object. JuanC
  6. We uploaded a new build that supports shapes in bubble, you can now use getGalleryAttributes().setUseMarkers(true) after setting the gallery to bubble and it will support the same set of markers as other galleries such as line or scatter. JuanC
  7. 1) In our next build, bubble will support using markers (or pictures) in coreVector using the following code chart1.setGallery(cfx.Gallery.Bubble); chart1.getGalleryAttributes().setUseMarkers(true); 2) I am not sure if it was just a demo but the screenshot you showed does not seem to change the size of the marker for any of the bubbles, if this is the case, you might be able to switch to using scatter with coreVector in the current builds in order to use markers/pictures. 3) We will fix some issues with tooltips in coreBasic in our next build, please let us know which version of jChartFX you are using, alert(cfx.Version) to see if we can offer a workaround to fix the tooltip appearance. Note that coreVector and coreBasic are mutually exclusive, you should only use one of those. JuanC
  8. The following code would modify the markers in a line/scatter/curve chart to use an image, note that the URL includes the actual width/height of the image as we need that to properly generate the SVG. You can then control the size used to paint the markers using setMarkerSize. var allSeries = chart1.getAllSeries(); allSeries.setPicture("Include/Images/MarkerTest.png,16,16"); allSeries.setMarkerShape(cfx.MarkerShape.Picture); allSeries.setMarkerSize(10); I noticed that in some builds (including the current one) we are drawing a rectangular border on top of the image, this will be fixed on our next build. Please note that currently we do not support Picture or MarkerShapes in a bubble chart. We do support an XML template that would allow you to tweak how the bubbles look (vector based). We will research adding the functionality in future builds to allow you to use marker shapes or pictures in bubble. JuanC
  9. I would recommend you test this page in FireFox (it works in all my tests), and then try step-by-step to migrate this page to your server side environment and see where it breaks. <!DOCTYPE html> <html> <head> <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.getData().setSeries(1); chart1.getData().setPoints(5); chart1.setGallery(cfx.Gallery.Pie); chart1.create("myDiv"); } </script> </head> <body onload="onLoadDoc()"> <div id="myDiv" style="width:600px;height:400px;display:inline-block"></div> </body> </html> JuanC
  10. Not sure if this look like this in your browser or was a problem introduced when posting to the forum, these are the things I noticed 1) Even though you say IE works fine, the page you posted has a <body> tag and after that the page seems to start again (e.g. doctype, html tag, etc.) 2) The page you posted as the one Firefox gets does not seem to have the scripts for jChartFX or the code that creates the chart. Have you tried moving the scripts and code that creates the chart inside the <body> tag in your cshtml file? JuanC
  11. It does not matter whether it is an MVC application, PHP, Perl, etc. You can always use right-click in Firefox, View Page source and send us the page that gets to the client, if the page is doing additional HTTP requests using Ajax we will also need the content of those. JuanC
  12. In order for us to be able to help you without duplicating your server side environment we need the HTML source that gets to the client. JuanC
  13. If you do not specify how fields are used we will use the first string field we find for your labels and all numeric fields as series to be plotted, you can change this behavior using code similar to this var fields = chart1.getDataSourceSettings().getFields(); var field1 = new cfx.FieldMap(); field1.setName("AssetTypeCd"); field1.setUsage(cfx.FieldUsage.Label); fields.add(field1); var field2 = new cfx.FieldMap(); field2.setName("MarketValue"); field2.setUsage(cfx.FieldUsage.Value); fields.add(field2); I also noticed that in your page you are including both coreBasic and coreVector, you are only supposed to include one of those. CoreVector is the recommended one as it allows us to customize several visuals of the chart (including all out motifs) CoreBasic could be considered legacy as there is a lot of new functionality that is not present on it, it was intended to be used in case coreVector was too big and the charts you were looking for were visually simple (note that you can also generate simple charts using coreVector by changing the templates). JuanC
  14. The rationale for this decision is that in most cases there are more points than series and also we try (if possible) to align the data grid values with the markers. In our next build, data grid will expose a setTransposed(bool) method that will allow you to flip our default behavior. Regards, JuanC
  15. We normally test in Chrome, FireFox, IE and Safari. Please post the HTML source of the page that gets to the browser (View Source) and check if Tools/Web Developer/Web Console shows any errors/warnings and also include the version of FireFox you are using. Regards, JuanC
  16. >> The value for the legend box is truncated to one character. The legend box should display the acual value not just one charaxcter. (exhibit A from attached image) I am guessing there is an issue with the server-side JSON generated for the data, can you please post a sample of what that JSON looks like? >> The value in the pie chart is in percentage but it rounds up to the next vallue. Ex: 11.59 % should display 11.59% not 12% (exhibit B from attached image) chart1.getAxisY().getDataFormat().setDecimals(2); >> How can we place the legend full value notjust one character outside the pie chart with an arrow pointng to the section of the pie? The fact that the legend is truncated is probably due to how the JSON is formed as we do not truncate the legend labels (at least on purpose). Having an arrow pointing from the legend to the pie slice is not supported. You might want to check if the following calls give you something close to what you want chart1.setGallery(cfx.Gallery.Pie); var pieAttr = chart1.getAllSeries().getGalleryAttributes(); pieAttr.setLabelsInside(false); chart1.getAllSeries().getPointLabels().setFormat("%l %p%%"); chart1.getLegendBox().setVisible(false); This will force the labels to be painted outside (with an arrow from the slice to the label) and will change the label displayed to include the label and percentage. Note that this might cause your slices to be smaller, specially if your labels are very long (after fixing the truncation issues) Regards, JuanC
  17. 1) Internally there are certain scenarios where we cannot honor the ToolTips.AllSeries property to display all series, one of them is related to multiple stack groups and unfortunately there is a bug where we are incorrectly deciding we cannot display all series values when you mix bars and lines, this should be fixed on our next build. 2) The code that calculates the tooltip position is incorrectly using the main axis which is why some tooltips show in the wrong place, this will be fixed on our next build. As a workaround you could revert to our old tooltip behavior where the tooltip shows on the mouse instead of the marker value using the following call chart1.getToolTips().setTriggerMode(cfx.TooltipTriggerMode.Marker); Regards, JuanC
  18. Unfortunately the current build does not support inverting the scale for a linear or radial gauge. We will add support in our next build for this through a setInverted(bool) method in the scale, if you are interested in getting an early build, please check as soon as the unstable build's minor revision is 5617 or later or drop a message to our support team and point to this message. Regards, JuanC
  19. Unfortunately the current build does not support inverting the scale for a linear or radial gauge. We will add support in our next build for this through a setInverted(bool) method in the scale, if you are interested in getting an early build, please check as soon as the unstable build's minor revision is 5617 or later or drop a message to our support team and point to this message. Regards, JuanC
  20. Unfortunately scrolling is currently not supported in conjunction with realtime. I apologize if the documentation mislead you, we will try to correct it as soon as possible. JuanC
  21. You are correct, there is an issue because Funnel charts will sort the values before painting but the data grid is currently not aware of the reordering. We will try to fix this in future builds. I am not entirely sure why you would want to show the point labels, the legend box and the data grid as you are showing the same information in 3 different ways. Regards, JuanC
  22. Currently there is no way, we have worked on enabling persistence and there is an extra script (jchartfx.persistence.js) that currently has the code so that a chart can read all its settings from a json object, but we do not support saving the current settings yet. We will consider adding support for this for future builds. JuanC
  23. This is something already developed (we are on the final phases of tweaking defaults and looks) and will be supported on our next version. The way it will work is that tooltips will expose a property (currently called TriggerMode) which you will be able use to control how tooltips are triggered, in current builds you have to mouse over a marker (bar, point, etc.), with the new trigger modes you will have 2 extra options -The first tooltip is triggered on a marker but subsequent mouse moves will trigger tooltips depending on the marker closest to the X axis of the mouse - Any mouse move will trigger a tooltip Independently we will expose a new tooltip mode where we draw a vertical line, highlight the markers and show the tooltip text tied to the X position of the mouse or in a fixed position. We will post here as soon as we have a preview version for you to work with. Regards, JuanC
  24. You have to make sure the chartok variable is defined globally or that you keep a reference to it. If you are declaring var chartok = .... inside a function, the chartok variable will not be defined outside such function. JuanC
  25. We stopped obfuscating doUpdate in version 7.2 If you are using an older version you might have to use chart._ud(true) Note that the doUpdate (or _ud) function is exposed by the chart object not the div. chart1 in my sample is the result of new cx.Chart() JuanC
×
×
  • Create New...