I can't display anything in a Multiple Y-axis and Date X-axis chart with JChartFX

Question

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": 341,"AirTemperature": 27,"SurfaceTemperature": 32,"Time": "2014-Apr-27T18:45:00"}, {"CoplanarIrradiance" 233,"AirTemperature": 31,"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 (C)");
        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 (C)");
        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

Answer 1

I can only see one or two issues with the code you are using:

1. The date time field in your data source must confirm to the ISO 8601 format yyyy-MM-ddTHH:mm:ss.fffZ, for example 2014-04-27T18:15:00.000Z.
2. I understand you only included a small sample of your data source and the original source may contain dates that span several days. If that is the case, using the Date format in the X axis would be correct. However, if you wanted to pass a smaller data set and focus mainly on the time instead of the date, you should format the X axis to use Time.

The rest of your code works perfectly fine. Using the latest build of jChartFX and the code below (which is pretty much your code with the two changes mentioned above), I get the expected chart.

var items = [
    { "CoplanarIrradiance": 760, "AirTemperature": 35, "SurfaceTemperature": 32, "Time": "2014-04-27T18:15:00.000Z" },
    { "CoplanarIrradiance": 460, "AirTemperature": 25, "SurfaceTemperature": 31, "Time": "2014-04-27T18:30:00.000Z" },
    { "CoplanarIrradiance": 341, "AirTemperature": 27, "SurfaceTemperature": 32, "Time": "2014-04-27T18:45:00.000Z" },
    { "CoplanarIrradiance": 233, "AirTemperature": 31, "SurfaceTemperature": 32, "Time": "2014-04-27T19:00:00.000Z" }
];


chart1.setDataSource(items);

// Eje de Tiempo (X)
var axisX = chart1.getAxisX();
axisX.getLabelsFormat().setFormat(cfx.AxisFormat.Time);

//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 (C)");
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 (C)");
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);

Make sure you are using the most updated bits.

I hope this helps.