Jump to content
JChartFX Community
  • 0
Sign in to follow this  
timopu

Hourly data, problem with X Axis rendering

Question

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

 

 
 
 

 

 

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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?

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...