How to change date format for category axis of a serial chart

Support
#1

Hi

I struggle to change the date format displayed on a category axis on a serial chart. They are printed as YYYY-MM-DD MM:SS, and I would like them to be DD-MMM (e.g “02-Sep”)

image

I’ve tried the following in the screen controller with no effect.

        CategoryAxis ca = chart.getCategoryAxis();
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.MILLISECONDS).setFormat("DD-MMM"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.SECONDS).setFormat("DD-MMM"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.MINUTES).setFormat("DD-MMM"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.HOURS).setFormat("DD-MMM"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.DAYS).setFormat("DD-MMM"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.WEEKS).setFormat("DD-MMM"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.DAYS).setFormat("DD-MMM"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.MONTHS).setFormat("DD-MMM"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.YEARS).setFormat("DD-MMM"));
        ca.setMinPeriod(DatePeriod.DAYS);

I probably miss something obvious.

Screens.xml attached.

screen.xml (1.9 KB)

#3

Hi,

Currently, your chart doesn’t know that the category axis values are dates. You need to provide the following fixes:

  1. Set type for an item property:
    <chart:property name="date" value="2017-09-01 00:00" type="date"/>
  2. Sort items by dates, as charts don’t do it by themselves (currently 09-02 goes before 09-01).
  3. Make a chart date based by adding byDate="true" to a chart root element: <chart:serialChart byDate="true" ...
  4. Additionally, you can define periods date formats either programmatically (as you tried before) or in XML using the nested dateFormats element of categoryAxis.

Note: Steps 1 and 3 are necessary only for manual data adding. While using a datasource they added automatically.

Regards,
Gleb

1 Like
#5

Thanks Gleb.

I managed to make it using manual data, but now it does not work anymore when I use an Entity (key value or regular).

Tried to set parseDates but then everything goes on one random date.

image

testchart.zip (88.3 KB)

#6

The problem is incorrect data date format you set (chart.setDataDateFormat("D-MMM");), which is used for dates parsing. By default dates are serialized as yyyy-MM-dd HH:mm:ss:S, so you don’t need to change this setting.

Regards,
Gleb

#7

Still no luck.

The number in the format string is there to help me understand which format the chart is selecting. No warning, no error, which makes difficult to understand what’s wrong.

Would you mind edit attached project and make it display ‘01-09-18’ on the category axis ?

   @Override
    public void init(Map<String, Object> params) {
        super.init(params);
        chart.setDataProvider( new EntityDataProvider(ds));
        CategoryAxis ca = chart.getCategoryAxis();
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.MILLISECONDS).setFormat("D-MMM 1"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.SECONDS).setFormat("D-MMM 2"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.MINUTES).setFormat("D-MMM 3"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.HOURS).setFormat("D-MMM 4"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.DAYS).setFormat("D-MMM 5"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.WEEKS).setFormat("D-MMM 6"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.DAYS).setFormat("D-MMM 7"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.MONTHS).setFormat("D-MMM 8"));
        ca.addDateFormats(new DateFormat().setPeriod(DatePeriod.YEARS).setFormat("D-MMM 9"));
        ds.refresh();

    }

testchart.zip (82.5 KB)

#8

I did not find any way to define the date format, guidance would be much appreciated.

Michael

#9

Hi,

Because you don’t define a datasource you need to make a chart date based by adding byDate="true" to a chart root element: <chart:serialChart byDate="true" .... So, after definig the byDate="true" attribute, your demo project wors as expected.

Without custom date formats:
before

With custom date formats:
after

#10

Thanks Gleb, it works. As my plan is to generate graphs, I used the programmatic version CategoryAxis.setParseDates(true)

Interesting thing is that this demo project reveals that for first day of month, the date format is not the DAYS (number 7) one but the MONTHS (number 8) one. Same for 1/1 of the year, YEARS format (number 9) will be used. Something to know.

#11

Just adding one more line to Michael Renaud’s solution does the trick.

<chart:categoryAxis parseDates=“true”
minPeriod=“SECONDS”/>

Thanks for the help Michael!
serialChart|690x374