Hourly data, problem with X Axis rendering

[timopu]

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?

 

 

 

br,

Timo

 

 

 

 

 

 

[JuanC]

I tried this as the only code in a page

 

var chart1 = new cfx.Chart();

chart1.setDataSource([{"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}]);

chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.DateTime);

chart1.getAxisX().setLabelAngle(0);

chart1.getAxisX().getLabelsFormat().setCustomFormat("HH");

chart1.getAxisX().setStaggered(true);

 

And the labels are shown correctly, note that I am not setting the step, and jChartFX should calculate an appropriate one, if the format is set to DateTime, we will consider the following steps: 1,2,3,6,12 hours 1,5,10,15,30 minutes or 1,5,10,15,30 seconds.

 

Is it possible you are changing other property that is causing the labels not to appear? I tried both with 6022 as well as 5900 and in both cases it worked.

 

About the step, the answer is yes. Setting the step to 2/24 would give you a label every 2 hours. Note that because of floating point limitations some specific combinations might not work properly, we will research if we can provide a way to specify the unit of the step (e.g. day, hour, minute) in future builds.

 

JuanC

[JuanC]

Other than passing the data, this code would generate the chart you are looking for

 

chart.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.DateTime);

chart.getAxisX().getLabelsFormat().setCustomFormat("HH");

chart.getAxisX().setStaggered(true);

 

If you do not specify the Axis Format and we see a date time field we default to AxisFormat.Date, which has a "minimal" step of 1 day. Setting the format to DateTime should take care of this.

 

Please note that if you set the Axis step in a date time field, it will be specified in days

 

We recently fixed some issues with date time fields, if you notice any issues please try downloading our most recent pre-release version.

 

Regards,

 

JuanC

[timopu]

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

[timopu]

Noted also your comment about the step parameter - to be clear, I also tried the code without setting the step. As the step is specified as a day, should it be okay to use, for example, 1/24 to get hour steps?