Jump to content
JChartFX Community
  • 0

Multi Y-axis and Date X axis


Question


Hello everybody,

 I'm trying to paint a chart with three Y-axis and a Date X-axis. When I parse my Json, I have this data array:

 var items = [
		{"CoplanarIrradiance": 760,"AirTemperature": 35,"SurfaceTemperature": 32,"Time": "2014-Apr-27T18:15:00"},                                                                 {"CoplanarIrradiance": 460,"AirTemperature": 25,"SurfaceTemperature": 31,"Time": "2014-Apr-27T18:30:00"},                                                                 {"CoplanarIrradiance": 34,"AirTemperature": 2,"SurfaceTemperature": 32,"Time": "2014-Apr-27T18:45:00"},                                                                 {"CoplanarIrradiance": ,"AirTemperature": ,"SurfaceTemperature": 32,"Time": "2014-Apr-27T19:00:00"}, ... ]
But I don't get to paint the chart. It only appears the X-axis, and it's incorrect. 
This is my code:
 			chart1.setDataSource(data);	

// Eje de Tiempo (X)

var axis = chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date);

chart1.getAxisX().getLabelsFormat().setCustomFormat(";MMM-dd");

// Eje de Coplanar Irradiance(Y)

var axis1 = chart1.getAxisY();

axis1.getTitle().setText("Coplanar Irradiance (W/m2)");

axis1.getGrids().getMajor().setVisible(false);

axis1.getDataFormat().setFormat(cfx.AxisFormat.Number);

axis1.getDataFormat().setDecimals(2);

// Eje de Air Temperature (Y)

var axis2 = chart1.getAxisY2();

axis2.getTitle().setText("Air Temperature ©");

axis2.setPosition(cfx.AxisPosition.Near);

axis2.getGrids().getMajor().setVisible(false);

chart1.getAxisY2().getDataFormat().setFormat(cfx.AxisFormat.Number);

axis2.getDataFormat().setDecimals(2);

// Eje de Surface Temperature (Y)

var axis3 = new cfx.AxisY();

chart1.getAxesY().add(axis3);

axis3.getTitle().setText("Surface Temperature ©");

axis3.setVisible(true);

axis3.setPosition(cfx.AxisPosition.Far);

axis3.getLabelsFormat().setFormat(cfx.AxisFormat.Number);

axis3.getDataFormat().setDecimals(2);

// Especificamos que hay tres series de datos.

chart1.getData().setSeries(3);

var series1 = chart1.getSeries().getItem(0);

var series2 = chart1.getSeries().getItem(1);

var series3 = chart1.getSeries().getItem(2);

series1.setAxisY(axis1);

series2.setAxisY(axis2);

series3.setAxisY(axis3);

series1.setGallery(cfx.Gallery.Lines);

series2.setGallery(cfx.Gallery.Lines);

series3.setGallery(cfx.Gallery.Lines);

// ----Assign data fields--------

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

var field = new cfx.FieldMap();

var field2 = new cfx.FieldMap();

var field3 = new cfx.FieldMap();

field.setName("CoplanarIrradiance");

field.setUsage(cfx.FieldUsage.Number);

fields.add(field);

field2.setName("AirTemperature");

field2.setUsage(cfx.FieldUsage.Number);

fields.add(field2);

field3.setName("SurfaceTemperature");

field3.setUsage(cfx.FieldUsage.Number);

fields.add(field3);

var legendBox = chart1.getLegendBox();

legendBox.setDock(cfx.DockArea.Bottom);

legendBox.setContentLayout(cfx.ContentLayout.Center);

// ----Set Sample Data------------

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

chart1.create(divHolder);

 And this is the result chart:
 
 What is the problem? The dataset is correct. 
Thanks in advance 
Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Couple of problems

1) Date format you used is incorrect, it is missing the Z at the end, it is missing milliseconds and month should be numeric

2) Not important but code that retrieves axis X is incorrect although you are not using the axis variable in the code

3) FieldUsage.Value should be used instead of Number, also if you want dates in the X axis you need to add a field map for Time with Usage set to X value

Modified code

 var items = [

    {"CoplanarIrradiance": 760,"AirTemperature": 35,"SurfaceTemperature": 32,"Time": "2014-04-27T18:15:00.000Z"},

    {"CoplanarIrradiance": 460,"AirTemperature": 25,"SurfaceTemperature": 31,"Time": "2014-05-27T18:30:00.000Z"},

    {"CoplanarIrradiance": 341,"AirTemperature": 27,"SurfaceTemperature": 32,"Time": "2014-06-27T18:45:00.000Z"},

    {"CoplanarIrradiance": 233,"AirTemperature": 31,"SurfaceTemperature": 32,"Time": "2014-07-27T19:00:00.000Z"}

];


// Eje de Tiempo (X)

var axis = chart1.getAxisX();

axis.getLabelsFormat().setFormat(cfx.AxisFormat.Date);

axis.getLabelsFormat().setCustomFormat("MMM-dd");


// Eje de Coplanar Irradiance(Y)

var axis1 = chart1.getAxisY();

axis1.getTitle().setText("Coplanar Irradiance (W/m2)");

axis1.getGrids().getMajor().setVisible(false);

axis1.getDataFormat().setFormat(cfx.AxisFormat.Number);

axis1.getDataFormat().setDecimals(2);


// Eje de Air Temperature (Y)

var axis2 = chart1.getAxisY2();

axis2.getTitle().setText("Air Temperature ©");

axis2.setPosition(cfx.AxisPosition.Near);

axis2.getGrids().getMajor().setVisible(false);

chart1.getAxisY2().getDataFormat().setFormat(cfx.AxisFormat.Number);

axis2.getDataFormat().setDecimals(2);


// Eje de Surface Temperature (Y)

var axis3 = new cfx.AxisY();

chart1.getAxesY().add(axis3);

axis3.getTitle().setText("Surface Temperature ©");

axis3.setVisible(true);

axis3.setPosition(cfx.AxisPosition.Far);

axis3.getLabelsFormat().setFormat(cfx.AxisFormat.Number);

axis3.getDataFormat().setDecimals(2);


chart1.getData().setSeries(3);


var series1 = chart1.getSeries().getItem(0);

var series2 = chart1.getSeries().getItem(1);

var series3 = chart1.getSeries().getItem(2);


series1.setAxisY(axis1);

series2.setAxisY(axis2);

series3.setAxisY(axis3);


series1.setGallery(cfx.Gallery.Lines);

series2.setGallery(cfx.Gallery.Lines);

series3.setGallery(cfx.Gallery.Lines);


// ----Assign data fields--------

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


var field = new cfx.FieldMap();

var field2 = new cfx.FieldMap();

var field3 = new cfx.FieldMap();

var field4 = new cfx.FieldMap();

 

field.setName("CoplanarIrradiance");

field.setUsage(cfx.FieldUsage.Value);

fields.add(field);


field2.setName("AirTemperature");

field2.setUsage(cfx.FieldUsage.Value);

fields.add(field2);


field3.setName("SurfaceTemperature");

field3.setUsage(cfx.FieldUsage.Value);

fields.add(field3);

 

field4.setName("Time");

field4.setUsage(cfx.FieldUsage.XValue);

fields.add(field4);


chart1.setDataSource(items);  

 

JuanC 

Link to post
Share on other sites
  • 0

Thanks for your reply. It'works.

But I have some doubts about my X-axis.

I have date values of three diferent days, and I want to paint values that represent the hour, with a interval of 4 hour(00:00,04:00,08:00.......). And I would like another x-axis, placed above of the chart, with the 3 diferents days of my dataset. Would It be this possible?

I only get to paint 1 X-axis with 2 values (02:00,02:00) and I don't know why paint this values. If I change the step of the axis- I can't see anything.

 

Some idea.

The series are correct, It only doesn't work the X-axis value. 

Thanks in advance. 

 

Link to post
Share on other sites
  • 0

In order to have an extra X axis you will need your "primary" X axis to be strings instead of dates, so you will need the following changes,

    var axis = chart1.getAxisX();

    axis.getLabelsFormat().setFormat(cfx.AxisFormat.Date);

    axis.getLabelsFormat().setCustomFormat("hh:mm");

And

    field4.setName("Time");

    field4.setUsage(cfx.FieldUsage.Label);

    fields.add(field4);

Note that we are using Label for the Time field instead of XValue.

To create an extra X axis you will need code like this

    var axisx2 = new cfx.AxisX();

    var axisLabels = axisx2.getLabels();

    axisLabels.setItem(0, '');

    var dateOld = "";

    for(var i = 0;i<items.length;i++) {

          var date = Date.parse(items["Time"]);

          var d = new Date(date);

          var s = d.getDate() + "-" + d.getMonth();

          if (s != dateOld) {

              axisLabels.setItem(i + 1, s);

              dateOld = s;

          }

    }

    axisx2.setVisible(true);

    axisx2.setMin(0);

    axisx2.setMax(items.length);

    axisx2.setStep(1);

    axisx2.getGrids().getMajor().setVisible(false);

    axisx2.setStyle(axisx2.getStyle() | cfx.AxisStyles.Centered);

    axisx2.setPosition(cfx.AxisPosition.Near);


    chart1.getAxesX().add(axisx2);  

 

In this code we are parsing the strings in your data set and assigning labels when the date changes.

 

One more thing, please note that when using date.getDay() and internally when we parse the dates, they are shown in local time. Currently when parsing strings as dates we only support strings that end with Z (UTC), in future builds we will also support strings with a specific time zone, e.g. +05.00

If you need to show the dates in UTC you might need to write your own loop that parses the dates and add a field to the JSON items with a string resulting from getUTCHours and use this for the labels (which means you would not need the axis.getLabelsFormat() calls.

JuanC 

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