Jump to content
JChartFX Community

All Activity

This stream auto-updates     

  1. Earlier
  2. Mobile support

    You should be able to use jChartFX in any HTML based mobile platform, we have not tested Ionic but as long as they support plain javascript it should work. Sometimes a "wrapper" might be needed for certain web platforms, e.g. we have tested a wrapper to use jChartFX in Angular. As far as I know, Xamarin is more a native framework, we have an iOS native component as well as a beta Android component that could be used inside native platforms such as Xamarin or React Native. Regards, JuanC
  3. Mobile support

    Hello, I am using JChartFX in my web application. Now I am planning to develop mobile app with either ionic, xamarin or may be any other cross platform tool. So JChartFX providing support in Ionic or Xamarin? How can I use JChartXF in Ionic or Xamarin?
  4. We are presumed escort organization offering extensive variety of sexual administrations with our amazing models. On the off chance that you are hunting down dependable and reliable Escorts in Chennai who can give all of you the adoring delights than you are at the correct page. Chennai Escorts are totally insane when they are set up for a gathering with you. Every one of our models are knowledgeable, gifted and have every one of the abilities to turn your enticed. Their mellow touches are exceptionally relieving so you gets the extraordinary sexual joy with no issues.




    1 (7).jpg


  5. It works!! Thanks so much.
  6. We are researching this issue, in the meantime, if you know your min and max are fixed you can set the major step as follows scale.getTickmarks().getMajor().setStep(10); Regards, JuanC
  7. Hi, I need to show the scale value lables on a radial gauge. For certian value ranges the radial gauge does not show the scale labels. If I set the ranges as follows the gauge shows no scale value lables: scale.setMax(82) scale.setMin(0) sectionRed.setFrom(41) sectionRed.setTo(82) sectionYellow.setFrom(21) sectionYellow.setTo(41) sectionGreen.setFrom(0) sectionGreen.setTo(21) With these ranges the gauge shows the scale value labels: scale.setMax(80) scale.setMin(0) sectionRed.setFrom(40) sectionRed.setTo(80) sectionYellow.setFrom(20) sectionYellow.setTo(40) sectionGreen.setFrom(0) sectionGreen.setTo(20) Jchartfx version: 7.5.5900 jQuery version: 1.11.2 What do I have to do to show the scale labels always? Thanks for your help.
  8. NULL data in line chart

    Thanks Juan, I was able to use the cfx.Chart.Hidden trick to make it work
  9. NULL data in line chart

    There are 2 things in play in your code 1) There is a bug that will prevent you from using a field whose first value is null, we have fixed it internally so we expect to have a new build soon 2) Even with that bug fixed, our behavior to automatically use fields as values to be plotted or labels is to check the value for all the fields for the first object in the array, because of this the automatic detection will not work in your scenario. and you will have to explicitly tell us the fields you want to use, e.g. add this code before setDataSource var fieldMap; var fields = chart1.getDataSourceSettings().getFields(); fieldMap = new cfx.FieldMap(); fieldMap.setName("john smith"); fieldMap.setUsage(cfx.FieldUsage.Value); fields.add(fieldMap); fieldMap = new cfx.FieldMap(); fieldMap.setName("jane doe"); fieldMap.setUsage(cfx.FieldUsage.Value); fields.add(fieldMap); fieldMap = new cfx.FieldMap(); fieldMap.setName("paulie walnuts"); fieldMap.setUsage(cfx.FieldUsage.Value); fields.add(fieldMap); fieldMap = new cfx.FieldMap(); fieldMap.setName("Date"); fieldMap.setUsage(cfx.FieldUsage.XValue); fields.add(fieldMap); There is a workaround which should work on your bits which is to replace the value for any null field in the first object in your data array with cfx.Chart.Hidden, e.g. if your data was declared like this, you would get the expected result var items = [{ 'john smith' : cfx.Chart.Hidden, 'jane doe' : 30, 'paulie walnuts' : 50, 'Date' : '2018-03-01' }, { 'john smith' : 50, 'jane doe' : 20, 'paulie walnuts' : 10, 'Date' : '2018-03-02' }, { 'john smith' : 20, 'jane doe' : 10, 'paulie walnuts' : 60, 'Date' : '2018-03-03' }]; Regards, JuanC
  10. NULL data in line chart

    Sure. First, here is a working version: http://jsfiddle.net/L5fh0tsq/7/ Here is that same code with the second "Jane Doe" set to null, you'll see that you get points at date 1 and 3, but nothing at 2, which is the wanted and expected behavior: http://jsfiddle.net/66rhnp4x/2/ And finally the broken version: http://jsfiddle.net/qjLxv720/2/ In this case, I'm just getting the whole row rejected instead of the weird "Series1", but the result is still the same. Interestingly, if you change the first value in the first array (john smith) back to a number and then change the first "jane doe" to null, it works as I would expect, so it only seems upset if the very first value is a null
  11. NULL data in line chart

    Can you post a small client side script with hardcoded data that reproduces your issue, e.g. chart1.setDataSource([{"Value":10, "Label":"January"},{"Value":12, "Label":"February"},{"Value":18, "Label":"March"}, {"Value":6, "Label":"April"}, {"Value":8, "Label":"June"},{"Value":13, "Label":"July"}, {"Value":24, "Label":"August"},{"Value":21, "Label":"September"},{"Value":19, "Label":"October"}]); Regards, JuanC
  12. NULL data in line chart

    Good day, I'm trying to set up a line chart where I'm showing a change in data over time by person, but I want to account for if there is no data registered (which would show a break in the line). I'm using PHP on the back-end, so I create my array where I initialize each person to NULL, then when I loop through I fill in for each person that does have data. The problem is, if the first person in the array that makes it back to the front-end has null data, then the chart won't build... I just get a default "Series1" label and a straight line across 0. If I have people that have some data, and then others with nulls it works fine, but I'm trying to figure out if there is a way around this, or if there is another value I can pass in to show "no data" so I get the breaks in the line without resorting to using a 0 value (which would be a good thing in this case, higher numbers are bad so 0 would be a false positive). Thanks for any help/ideas
  13. Clickable Legend

    I would suggest you change your code so that chart.create is the last thing you do. The way you are doing it now, when you call chart.create we "render" the current plot (random data) and then your subsequent api calls will mark the chart as dirty so it will be repainted. This may cause some flickering on slow devices. To capture clicks, you need to use attach to the click event, note that the code is slightly different whether you are using jQuery or not. var divHolder = document.getElementById('ChartDiv');chart1.create(divHolder); if (window["jQuery"]) { $("#ChartDiv").click(doClick); } else { divHolder.onclick = doClick; } function doClick(evt) { console.log("Click on " + evt.series + " , " + evt.point); } Note that attaching to click event is one of the few things that HAS to be done after chart create is called. Also note that a click in the legend marker will generate evt.point="-1" and evt.series will hold the series index where a click on a bar/marker would set evt.point with the point index. I noticed that for now you cannot click on the legend text. We should be fixing this in a future build. Regards, JuanC
  14. Clickable Legend

    How would I make the Secured Sales in the Legend to the right clickable to take me to another url. CODE: chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Bar); chart1.getAllSeries().setStackedStyle(cfx.Stacked.Normal); var series0 = chart1.getSeries().getItem(0); series0.setGallery(cfx.Gallery.Area); // series0.setAxisY(chart1.getAxisY2()); // series1.getPointLabels().setVisible(true); var series1 = chart1.getSeries().getItem(1); //series1.setAxisY(chart1.getAxisY2()); series1.setGallery(cfx.Gallery.Bar); //series1.getPointLabels().setVisible(true); var series2 = chart1.getSeries().getItem(2); //series2.setAxisY(chart1.getAxisY2()); series2.setGallery(cfx.Gallery.Bar); //series2.getPointLabels().setVisible(true); //chart1.getSeries().getItem(1).setStackedStyle(cfx.Stacked.Normal); //chart1.getSeries().getItem(2).setStackedStyle(cfx.Stacked.Normal); cfx.AxisFormat.Currency //chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency); chart1.getAnimations().getLoad().setEnabled(true); chart1.getAxisY().getLabelsFormat().setDecimals(2); chart1.getAxisY2().getGrids().getMajor().setVisible(false); var titles = chart1.getTitles(); var title = new cfx.TitleDockable(); var divHolder = document.getElementById('ChartDiv'); chart1.create(divHolder); title.setText("Secured sales this year."); titles.add(title); var items = [ { "Month": "Nov <%=novOctYear%>", "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) %>, "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 11)%>, "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 11)%>, }, {"Month": "Dec <%=novOctYear%>", "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 2 %>, "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 12)%>, "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 12)%>, }, { "Month": "Jan <%=restYear%>", "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 3 %>, "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 1)%>, "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 1)%>, }, { "Month": "Feb <%=restYear%>", "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 4 %>, "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 2)%>, "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 2)%>, }, { "Month": "Mar <%=restYear%>", "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 5 %>, "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 3)%>, "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 3)%>, }, { "Month": "Apr <%=restYear%>", "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 6 %>, "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 4)%>, "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 4)%>, }, { "Month": "May <%=restYear%>", "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 7 %>, "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 5)%>, "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 5)%>, }, { "Month": "Jun <%=restYear%>", "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 8 %>, "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 6)%>, "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 6)%>, }, { "Month": "Jul <%=restYear%>", "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 9 %>, "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 7)%>, "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 7)%>, }, { "Month": "Aug <%=restYear%>", "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 10 %>, "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 8)%>, "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 8)%>, }, { "Month": "Sep <%=restYear%>", "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 11 %>, "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 9)%>, "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 9)%>, }, { "Month": "Oct <%=restYear%>", "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 12 %>, "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 10)%>, "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 10)%>, }, ]; chart1.setDataSource(items); Many Thanks.
  15. Tooltip for Candle Chart

    At the moment it does not display any popup window. What I would I like to have as it appears in the picture below. Change as hover over a chart.
  16. Tooltip for Candle Chart

    We consider tooltips a popup window that appears when you hover over a chart point/bar. Can you describe exactly what you mean by "how to configure and display the tooltip on the top"? If possible try to include diagrams or pictures to explain what you are looking for. Regards, JuanC
  17. Tooltip for Candle Chart

    Could you guide me on how to configure and display the tooltip on the top? At the moment chart is not able to display any tooltip. <script type="text/javascript"> //$(document).ready(function($){ loadChart(); }) var chart1; var annLT; annLT = new cfx.annotation.Annotations();var annListLT = annLT.getList(); var annMT; annMT = new cfx.annotation.Annotations();var annListMT = annMT.getList(); var annLTBB; annLTBB = new cfx.annotation.Annotations();var annListLTBB = annLTBB.getList(); var annMTBB; annMTBB = new cfx.annotation.Annotations();var annListMTBB = annMTBB.getList(); var annDiv; annDiv = new cfx.annotation.Annotations();var annListDiv = annDiv.getList(); var annEPS; annEPS = new cfx.annotation.Annotations();var annListEPS = annEPS.getList(); var annVol; annVol = new cfx.annotation.Annotations();var annListVol = annVol.getList(); function loadChart() { chart1 = new cfx.Chart(); chart1.getData().clear(); PassData2(); // AddBEC(); AddDiv(); AddEPS(); chart1.setGallery(cfx.Gallery.OpenHighLowClose); //chart1.setGallery(cfx.Gallery.Candlestick); chart1.getAxisY().setPosition(cfx.AxisPosition.Far); chart1.getAxisY().setForceZero(false); // chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency); chart1.getSeries().getItem(0).setColor("#99FF99"); // chart1.getSeries().getItem(1).setColor("#99FF99"); // chart1.getSeries().getItem(2).setColor("#FF9999"); chart1.getSeries().getItem(3).setColor("#9c9c9c"); chart1.getAxisX().setStep(60); chart1.getAxisY().getDataFormat().setDecimals(2); chart1.getAxisY().getLabelsFormat().setDecimals(2); chart1.getLegendBox().setVisible(false); //SB var series5 = chart1.getSeries().getItem(5); series5.setGallery(cfx.Gallery.Step); series5.setMarkerShape(cfx.MarkerShape.None); series5.setColor("#32CD32"); //LimeGreen series5.setVisible(document.getElementById("LTSwitch").checked); //SR var series6 = chart1.getSeries().getItem(6); series6.setGallery(cfx.Gallery.Step); series6.setMarkerShape(cfx.MarkerShape.None); series6.setColor("#ff0000"); // Opaque Red series6.setVisible(document.getElementById("LTSwitch").checked); //UB var series7 = chart1.getSeries().getItem(7); series7.setGallery(cfx.Gallery.Step); series7.setMarkerShape(cfx.MarkerShape.None); series7.setColor("#32CCDD"); //LimeGreen series7.setVisible(document.getElementById("MTSwitch").checked); //UR var series8 = chart1.getSeries().getItem(8); series8.setGallery(cfx.Gallery.Step); series8.setMarkerShape(cfx.MarkerShape.None); series8.setColor("#4FFF0000"); //pink series8.setVisible(document.getElementById("MTSwitch").checked); //UB0 - Downtrend resistance band var series9 = chart1.getSeries().getItem(9); series9 .setGallery(cfx.Gallery.Step); series9 .setMarkerShape(cfx.MarkerShape.None); series9 .setColor("#ff0000"); //red series9 .getLine().setWidth(2); //LB1 - Uptrend support band var series10 = chart1.getSeries().getItem(10); series10 .setGallery(cfx.Gallery.Step); series10 .setMarkerShape(cfx.MarkerShape.None); series10 .setColor("#0000ff"); //light blue series10 .getLine().setWidth(2); var volumePane = new cfx.Pane(); chart1.getPanes().add(volumePane); volumePane.getTitle().setText("Volume (in 100k)"); //volumePane.setProportion(1); chart1.getPanes().getItem(1).setProportion(.1); var volumeSeries = chart1.getSeries().getItem(4); volumeSeries.setPane(volumePane); volumeSeries.setGallery(cfx.Gallery.Bar); volumeSeries.setVolume(100); volumeSeries.conditionalVolume = true; volumeSeries.getAxisY().setScaleUnit(100000); volumeSeries.getAxisY().setPosition(cfx.AxisPosition.Far); volumeSeries.conditionalVolume = true; AddLT_Annotations(); AddMT_Annotations(); var ForecastLT = document.getElementById("LTForecast").checked; if(ForecastLT) {} else {chart1.getExtensions().remove(annLT);} var ForecastMT = document.getElementById("MTForecast").checked; if(ForecastMT) {} else {chart1.getExtensions().remove(annMT);} document.getElementById("LTSwitch").addEventListener("click", function() { var DisplayedLT = document.getElementById("LTSwitch").checked; if(DisplayedLT) {series5.setVisible(true);series6.setVisible(true);} else {series5.setVisible(false);series6.setVisible(false);} }); document.getElementById("MTSwitch").addEventListener("click", function() { var DisplayedMT = document.getElementById("MTSwitch").checked; if(DisplayedMT) {series7.setVisible(true);series8.setVisible(true);} else {series7.setVisible(false);series8.setVisible(false);} }); document.getElementById("STSwitch").addEventListener("click", function() { var DisplayedST = document.getElementById("STSwitch").checked; if(DisplayedST) { series9.setVisible(true); series10.setVisible(true); } else {series9.setVisible(false); series10.setVisible(false); } }); document.getElementById("LTForecast").addEventListener("click", function() { var ForecastLT = document.getElementById("LTForecast").checked; if(ForecastLT) {AddLT_Annotations();} else {chart1.getExtensions().remove(annLT);} }); document.getElementById("MTForecast").addEventListener("click", function() { var ForecastMT = document.getElementById("MTForecast").checked; if(ForecastMT) {AddMT_Annotations();} else {chart1.getExtensions().remove(annMT);} }); var divHolder = document.getElementById('ChartDiv'); chart1.create(divHolder); } function GetXAxisPosition(date, chart1) { var covertedAxisDate = cfx.Chart.dateToDouble(date); for (var i = 0; i < chart1.getData().getPoints() ; i++) { var datefromData = chart1.getData().getX().getItem(-1, i); if (datefromData == covertedAxisDate) { return i; } } } </script> OHLC_AAPL.js
  18. jChartFX can work with or without jQuery. We only interact with it to send mouse click events the "jQuery" way. We used to offer a jQueryUI plugin (jchartfx.ui.js) but this is not supported anymore. Regards, JuanC
  19. I currently use jchartFX version 7.5.5962.21446 . What version of jQuery do you recommend using for this version of jchartFX? What about 7.5.6127?
  20. Comination Chart

    No. It is not possible to combine horizontal and vertical plots. JuanC
  21. Comination Chart

    Can this be achieved by combining with the bar chart?
  22. Comination Chart

    Unfortunately it is not possible to achieve the chart you are trying to create. Regards, JuanC
  23. Comination Chart

    JuanC, Please have a look at the chart below, I am trying to achieve what my production system is producing. Is it possible to achieve it using any other method?
  24. Comination Chart

    Unfortunately density cannot be combined with Candlestick. When I tried visiting the jsfiddle I see no chart, just some javascript code. I would suggest you try to explain with more detail how do you want to combine candlestick, annotations and density including a drawing if possible. Regards, JuanC
  25. Comination Chart

    Is it possible to combine Candlestick chart, annotation chart including density chart? I have got chart working with Candlestick and annotation. I have made an attempt to draw one. However, I am struggling. Can you pls help. I have got an example of the chart on the jsfiddle. https://jsfiddle.net/lucidtrend/26b3xzks/9/
  26. Date(s) are 1 day behind

    Alternatively you could try something like this, I have NOT tested this code in all time zones but it should work var date = new Date(); // Round this to avoid handling fractional time zones var timeZone = Math.floor(date.getTimezoneOffset() / 60); var absTimeZone = Math.abs(timeZone); var strTimeZone = absTimeZone.toString(); if (absTimeZone < 10) strTimeZone = "0" + strTimeZone; if (timeZone > 0) strTimeZone = "-" + strTimeZone; else strTimeZone = "+" + strTimeZone; strTimeZone = "T12:00:00" + strTimeZone + ":00"; var items = [{"Value":10, "Date":"2017-11-29" + strTimeZone}, {"Value":10, "Date":"2017-12-15" + strTimeZone}] Note that the code is getting the "local" time zone offset and making sure it is a valid time zone format including leading zeros and minutes. We will research if we can support a scheme where you don't supply time and let us know through a flag that you do not care about times but the code would essentially do the same as shown here. Regards, JuanC
  1. Load more activity