Multi Y-axis and Date X axis

[Miguel]

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 

[JuanC]

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 

[Miguel]

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. 

 

[Miguel]

Hi!!

I'm still working with my date chart
and I don't get to draw a correct X-axis.

I have the next dataSource;

[{AirTemperature: "20.9852222222222

[JuanC]

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