Chart X axis date format

Flow
1

Is it possible to set a date format for X axis, if I use java.util.Date as a source item for X axis data?

I have a code:

        BeanItemContainer<ChartDataRow> cnt = new BeanItemContainer<ChartDataRow>(ChartDataRow.class);
        cnt.addAll(DataService.getYearlyData());

        ContainerDataSeries cds = new ContainerDataSeries(cnt);
        cds.setXPropertyId("date");
        cds.setYPropertyId("value");
        conf.addSeries(cds);

After adding the datasource to chart, the chart shows X axis categories as numeric value of Date, not as dates.

In documentation I’ve found that you can set X axis categories manually by defining custom values for the axis. But in this case setting axis min/max values is not working.

What is a possible solution to show dates on X axis as dates, e.g. ‘22 Jul 2014’ and be able to set X axis min and max values?

2

What I’ve found is settings xaxis type:

conf.getxAxis().setType(AxisType.DATETIME);

But how can I change the format of date showing on axis? Is it possible to display the date in tooltip as well?

3

Hi Mark,

Did you get a solution for this issue ? I am also facing the same.

4

Unfortunately, no solution was found.

5

Hello, I think this should work for 22 Jul 2014 format configuration.getxAxis().getDateTimeLabelFormats().setDay("%e %b %Y"); The format is based on PHP strftime function, the info about it you can get
here
:

If you want to change a format not for labels, but for a tooltip you should do the following:

configuration.getTooltip().setXDateFormat("%d.%m. %Y %H:%M");

The example can be seen in
demo

6

Thank You Dmitrii,
I tried the code you have shared. The following helped me to address my issue in a better way.

Tooltip:[code]
    tooltip.setFormatter("function()  { var d = new Date(this.x);"
                                + "return " +
                            "'<strong>Repeat Visits :</strong> '+ this.y +'<br/>" +
                            "<strong>Last Visit :</strong> '+ d.toDateString(); " +
                            "}");
    chart.getConfiguration().setTooltip(tooltip);

[/code]X Axis
chart.getConfiguration().getxAxis().setType(AxisType.DATETIME);

7

You are welcome. Using formatter, is also an option, especially if you want a bit more customisation.