Jump to content
JChartFX Community

JuanC

Administrators
  • Content Count

    418
  • Joined

  • Last visited

  • Days Won

    3

Posts posted by JuanC


  1. Are you using the most recent jChartFX version? If not I would first recommend you download it and try again with the updated scripts.

    We do have an angular2 typescript wrapper for our control but it is not feature complete and has not been tested in recent angular versions, if you are interested in trying this please send me a message.

    Regards,

    JuanC


  2. I was checking the source of our motifs and the code that uses toUpperCase is generally associated with code that tries to customize the look of the control when the object is created.

    Are you passing any parameters to the new cfx.Chart() call ?

    PS: You might want to try making a backup copy of your jChartFX scripts and downloading our most recent build from jchartfx.com

    Regards,

    JuanC


  3. I would recommend making a backup copy of the jChartFX scripts you are using and download the most recent build, the build you are using is from 2015 so there have been several fixes as well as new functionality.

    You can download it at www.jchartfx.com, I will pass the outdated nuget information so that we can update it.

    Regards,

    JuanC


  4. I tried the code you attached and I am able to see the gauge. I only added a div to host the gauge control and the call to SetUpGauge when the document is ready.

    <div id="gauge" style="width:200px;height:200px;display:inline-block"></div>

    I would recommend you try alert(cfx.gauge.Version); and include the version reported, also if your js files are very old I would recommend downloading updated versions in case it is something that has already been fixed.

    Regards,

    JuanC


  5. 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


  6. 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

     

     

     


  7. 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

     


  8. 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


  9. 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


  10. 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


  11. A date like this  "2017-11-29T00:00:00.000Z" means November 29th at 12:00 am UTC (greenwich time), which means that the same date shown in an US east coast timezone will be displayed as November 28th (at 7 or 8 PM depending on daylight savings time or eastern standard time status).

    You could format your dates using the specific time zone instead of Z, e.g  "2017-11-29T00:00:00.000-05", alternatively by supplying a time of 1PM in "2017-11-29T13:00:00.000Z" you will get a display of Nov 29 in any time zone from -13 to +9 which would probably cover most of your target audience.

    Regards,

    JuanC


  12. Normally, the labels are provided along with the data, e.g.

        chart1.setGallery(cfx.Gallery.Pyramid);
        chart1.setDataSource([{"Value":10, "Product":"ABC"}, {"Value":18, "Product":"DEF"}, {"Value":6, "Product":"GHI"}]);
        var pointLabels = chart1.getAllSeries().getPointLabels();
        pointLabels.setVisible(true);
        pointLabels.setFormat("%l");

    Note that to show the label you should use lowercase L in the format.

    Regards,

    JuanC


  13. >> No, If i commit "chart.doUpdate(true);" then every thing is OK, But chart resize not possible

    What I meant was, can you try commenting the block of code where you customize the chart (chart gallery, colors, etc) and/or the block of code where you pass the data, WITHOUT commenting the doUpdate call to find out if there is a specific code that triggers the issue.

    >> When i load dashboard-01 first time then resize of chart is working perfect. When i come from same dashboard after dashboard-02 and try to resize then

    Are dashboard-01 and dashboard-02 different HTML pages? 

    We need to be able to duplicate the problem in-house in order to find a fix and test it.

    Can you try using console.log to log the sizes of the chart(s) just before you do the initial render as well as before the doUpdate calls? This could let you and us know which of the charts are failing and the sequence of events that triggers the issue, also knowing if the error happens without any of the chart customizations or data will be critical to try to reproduce and fix the issue.

    Regards,

    JuanC


  14. We will need more information about this issue, including

    1) Are there any chart settings relevant to the occurrence of this problem (i.e. does the problem still happens if you comment them out)
    2) Is the data relevant to the issue.
    3) Does the error happens on a particular scenario, e.g. the first time a chart is resized, when a chart is too big or too small, etc.

    Regard,

    JuanC


  15. We added this functionality somewhat recently as setTimeHover and it was later renamed to setInitialDelay.

    In order to use setTimeHover you need to use build 6114 or newer.
    In order to use setInitialDelay you need to use build 6162 or newer.

    I would recommend downloading our pre-release version which is 7.5.6127 and use setTimeHover. We should be uploading a new build soon.

    Regards,

    JuanC

×
×
  • Create New...