Jump to content
JChartFX Community

timopu

Members
  • Posts

    14
  • Joined

  • Last visited

Posts posted by timopu

  1. Hello,

    for some reason I'm unable to change colors for trend control using Conditional and its setColorLessThanReference, setColorGreaterThanReference, setColorEqualToReference methods - JChartFX is sticking to default values.

    I tried this both in my custom code and with Trend sample package http://support.softwarefx.com/jChartFX/article/2502343?showassample=true .

    Snippet of the code (last example of the sample package):

    var conditional = trend1.getConditional();
    conditional.setAppliesTo(cfx.gauge.ConditionalApplies.Indicator);
    conditional.setColorLessThanReference("2f0000");
    conditional.setColorGreaterThanReference("#009090");
    conditional.setColorEqualToReference("#FFFFFF");

    br,

    Timo

  2. Hello JuanC,

    I did some further digging into this and found out that this is a classic Javascript type conversion bug - the code received the value for axes from a form field and the variable got passed to JChartFX as a string instead of being a Number. After I added explicit conversion to Number, the min/max values started to behave as expected.

    br,
    Timo

  3. Hello again,

    I'm encountering a strange issue with setMin/setMax when using this data:

    [{"myinfomonitor_ts":"2016-10-17T06:03:09.770Z","FI_max":0,"shift_sum":511,"engine_number_count":539},{"myinfomonitor_ts":"2016-10-24T06:03:09.770Z","FI_max":0,"shift_sum":339,"engine_number_count":534},{"myinfomonitor_ts":"2016-10-31T07:03:09.770Z","FI_max":0,"shift_sum":307,"engine_number_count":487},{"myinfomonitor_ts":"2016-11-07T07:03:09.770Z","FI_max":0,"shift_sum":418,"engine_number_count":445},{"myinfomonitor_ts":"2016-11-14T07:03:09.770Z","FI_max":0,"shift_sum":427,"engine_number_count":445},{"myinfomonitor_ts":"2016-11-21T07:03:09.770Z","FI_max":0,"shift_sum":371,"engine_number_count":387},{"myinfomonitor_ts":"2016-11-28T07:03:09.770Z","FI_max":0,"shift_sum":565,"engine_number_count":486},{"myinfomonitor_ts":"2016-12-05T07:03:09.770Z","FI_max":0,"shift_sum":620,"engine_number_count":698},{"myinfomonitor_ts":"2016-12-12T07:03:09.770Z","FI_max":0,"shift_sum":485,"engine_number_count":485},{"myinfomonitor_ts":"2016-12-19T07:03:09.770Z","FI_max":0,"shift_sum":155,"engine_number_count":213},{"myinfomonitor_ts":"2016-12-26T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-01-02T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-01-09T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-01-16T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-01-23T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-01-30T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-02-06T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0},{"myinfomonitor_ts":"2017-02-13T07:03:09.770Z","FI_max":0,"shift_sum":0,"engine_number_count":0}]


    1) When the min is set to -800 and max to 800, there is an additional -1000 line drawn on the chart ( pic1.png )
    pic1.png

    2) When min is set to 0 and max to 800, Y axis line is not drawn at all.
    pic2.png

    3) When min is set to 400 and max to 800, The chart gets inverted and stepping goes crazy.
    pic3.png

    Seems that this might not be related to the dataset I'm using, because the same effect is seen with other data sets. 

    How could I solve this?

    br,
    Timo

     

     

    pic1.png

  4. Hi JuanC,

    all right, this makes sense, thanks! I opted for a mechanism in which I create partial stylesheets dynamically and use the setTag method to override palette (in this way I can allow some of the colors to be changed by the user in the UI and at the same time allow the defaults from the palette to be used).

    Btw, is there an easy way to update the series colors in the overlay user interface? Your html for it looks like this

    <ul class="options second-level"><li><i class="jchartfx-icon-block" style="background-color:#57acda"></i><a class="process">Series 1</a><a class="next jchartfx-icon-arrow-right"></a></li><li><i class="jchartfx-icon-block" style="background-color:#93e24e"></i><a class="process">Series 2</a><a class="next jchartfx-icon-arrow-right"></a></li><li><i class="jchartfx-icon-block" style="background-color:#f26c5b"></i><a class="process">Series 3</a><a class="next jchartfx-icon-arrow-right"></a></li></ul>

    Of course I can set these using JS, but a bit of pain because there are no class / id specifications and the color is set in style attribute.

    br,

    Timo

  5. Hi,

    I'm unable to set the color of series using the API when JChartFX's stylesheets are included.

    Simple example: if I modify the presenter.js of the example "JS_Lines_and_Stripes_Charts.zip" by adding calls to the setColor method of both series and series border (see below), the palette defaults override my API calls (so nothing happens) until I comment out the line

    <link rel="stylesheet" type="text/css" href="http://www.jchartfx.com/libs/v7/current/styles/jchartfx.css"/>

     from index.html. After the removal the API calls work ok. The same behavior is seen in our app where JChartFX is embedded in. What am I doing wrong?

     

    function LineChartWithMarkers(chart1)
    {
    // test chart series color setting
    chart1.getSeries().getItem(0).setColor("#000000");
    chart1.getSeries().getItem(0).getBorder().setColor("#000000");
    chart1.getSeries().getItem(1).setColor("#BB0000");
    chart1.getSeries().getItem(1).getBorder().setColor("#BB0000");
    
    chart1.getSeries().getItem(2).setColor("#00CC00");
    chart1.getSeries().getItem(2).getBorder().setColor("#00CC00");
    
    	// RELEVANT CODE
    chart1.setGallery(cfx.Gallery.Lines);
    // END RELEVANT CODE
    PopulateCarProduction(chart1);
    var titles = chart1.getTitles();
    var title = new cfx.TitleDockable();
    title.setText("Vehicles Production by Month");
    titles.add(title);
    }

     

     

  6. Hi Juan,

     

    thanks for your reply. That makes sense. However, I tried to add the DateTime specification but X axis rendering didn't change at all. The same "hack" using step 0.01 instead of one produces the correct result.

                  this.chart.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.DateTime);
                  this.chart.getAxisX().setLabelAngle(0);
                  this.chart.getAxisX().getLabelsFormat().setCustomFormat("HH");
                  this.chart.getAxisX().setStaggered(true);
                  this.chart.getAxisX().setStep(0.01);
    

    I'm using 7.5.6022, is it the latest pre-production build?

     

     

    br, 

    Timo

  7. Hello,
     
    I'm having issues with X Axis labels not being properly shown when I use JChartFX to display hourly data as bar chart. JChartFX version is 7.5.6200 (tried also the earlier 5900).
     
    Example snippet of the data:
     
     

     [{"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}]
    

     
    The (hopefully) relevant parts of the code used for chart initialization are about the following:
     
     

    ...
    var field = new cfx.FieldMap();
    field.setName("myinfomonitor_ts");
    field.setUsage(cfx.FieldUsage.XValue);
    ...
    chart.getAxisX().getLabelsFormat().setCustomFormat("HH");chart.getAxisX().setStaggered(true);
    //chart.getAxisX().setLabelAngle(45);
    chart.getAxisX().setStaggered(true);
    chart.getAxisX().setStep(1);
    ...
    

    This produces an axis with only one visible label (see attached image). If I set the step to be 0.01, all labels are drawn as wanted, but this seems to be a bit of a hack. Resizing chart does not change the behavior. What might be going wrong?

     

    post-47834-0-15310900-1467716843_thumb.png

     

     

    br,

    Timo

     

     
     
     

     

     

  8. Hello,

     

    I'm having problems using pictographs, as the cfx.gauge/pictograph.PictoGraph() constructor fails with following error:

     

    angular.js:12416 TypeError: this._0_1 is not a function
        at Object.c [as PictoGraph] (jchartfx.pictograph.js:33)
        at Object._.extend.instance (gauges.js:211)
        at Object._.extend.getChartDOMElement (gauges.js:445)
        at Object.createChart (chartingCommons.js:314)
        at Object.requestChart (chartingCommons.js:360)
        at Object.fn (chartingCommons.js:114)
        at Scope.$digest (angular.js:15753)
        at Scope.$apply (angular.js:16024)
        at HTMLSelectElement.<anonymous> (angular.js:28243)
        at HTMLSelectElement.eventHandler (angular.js:3293)
     
     
    I've included coreVector, coreVector3d, gauges and pictograph js files through require-js. Other gauge types work ok, so what could I be missing here?

     

    JChartFX version 7.5.5900.27885 (Full).

×
×
  • Create New...