Jump to content
JChartFX Community
  • 0
David.Harris

Time labels on XAxis

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

Share this post


Link to post
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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×