Jump to content
JChartFX Community


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by JuanC

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. >> 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
  14. 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
  15. 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
  16. JuanC

    Linear Gauge

    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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  • Create New...