Jump to content
JChartFX Community
  • 0

Time labels on XAxis


David.Harris

Question

I am trying to create a chart with time displayed on the XAxis. I have set the format to HH:mm:ss on the axis and I have data from the last 2 minutes to display in the chart but when the chart renders the tooltips have the properly formatted time value in but the xaxis is blank. Am I missing something?

GenerateChartData();

    chart1 = new cfx.Chart();

    chart1.setGallery(cfx.Gallery.Bar);

    chart1.getView3D().setEnabled(true);


           var fields = chart1.getDataSourceSettings().getFields();

    //Create and add the temperature field

    var temperatureField = new cfx.FieldMap();

    temperatureField.setName('temperature');

    temperatureField.setUsage(cfx.FieldUsage.Value);

    fields.add(temperatureField);

    //Create and add the pressure field

    var pressureField = new cfx.FieldMap();

    pressureField.setName('pressure');

    pressureField.setUsage(cfx.FieldUsage.Value);

    fields.add(pressureField);

    //Create and add the recordTimeField (for the x axis)

    var recordTimeField = new cfx.FieldMap();

    recordTimeField.setName('recordTime');

    recordTimeField.setUsage(cfx.FieldUsage.XValue);

    fields.add(recordTimeField);


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

           chart1.getAxisX().getLabelsFormat().setCustomFormat("HH:mm:ss");

           chart1.getAxisX().getTitle().setText("Log Time");

           chart1.getAxisX().setStep(1);


           //chart1.getAxisX().setStaggered(true);

    chart1.setDataSource(data);

    var titles = chart1.getTitles();

var title = new cfx.TitleDockable();

title.setText("Pressure and Temperature over Time");

titles.add(title);

chart1.getAllSeries().getPointLabels().setVisible(false);

    var divHolder = document.getElementById('ChartDiv');

      chart1.create(divHolder);  

 

The data generated for the chart looks like this

[{"recordTime":"2014-07-03T11:02:29.031Z","temperature":159.79,"pressure":78},{"recordTime":"2014-07-03T11:02:30.033Z","temperature":116.2,"pressure":34},{"recordTime":"2014-07-03T11:02:31.034Z","temperature":123.73,"pressure":34},{"recordTime":"2014-07-03T11:02:32.034Z","temperature":132.29,"pressure":90},{"recordTime":"2014-07-03T11:02:33.035Z","temperature":134.95,"pressure":88},...]

 Even when I reduce the number of points down I still cannot get any values to appear on the xAxis, has anyone come across this or tried to do this before? 

 

  • Like 1
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Not sure if its exactly what you are looking for but I was able to get the time data values to render on the x axix by changing

recordTimeField.setUsage(cfx.FieldUsage.XValue);

to

recordTimeField.setUsage(cfx.FieldUsage.Label);

Here is a screenshot of your code, with this one change, in action:

post-46655-0-35906500-1406577592_thumb.png

 

Link to comment
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...
×
×
  • Create New...