Apex flash charts with date values on the x axis

Question

I am playing around in Apex 4 using flash charts and having a bit of troubles playing with dates on the x axis on a 2d line chart.
What I am trying to achive is a values plotted across the chart and the date/time values are not a constent (ie not continually say 1 hour apart) hence why I want to use a datatype of date.
In the SQL below:
select null as link,  sysdate -2  as value, 0 as label from dual
union
select null , sysdate -2+1/24 , 1 from dual
union
select null , sysdate -2+2/24 , 2 from dual
union
select null , sysdate -2+5/48, 1 from dual
union
select null , sysdate -2+3/24, 0 from dual;I get a 2D Line chart but each date/time value is equally space apart (ie sysdate -2, sysdate -2+1/24, sysdate -2+2/24 and sysdate -2+3/24 should be 1 unit apart and sysdate -2+5/48 should be half way between sysdate -2+2/24 and sysdate -2+3/24).
I think I have to use custom xml. Using http://www.anychart.com/products/anychart/docs/xmlReference/index.html and http://www.anychart.com/products/anychart/docs/users-guide/DateTime-Axes.html I edited the XML and changed:
<?xml version = "1.0" encoding="utf-8" standalone = "yes"?>
<anychart>
  <settings>
    <animation enabled="false"/>
    <no_data show_waiting_animation="False">
      <label>
        <text></text>
        <font family="Verdana" bold="yes" size="10"/>
      </label>
    </no_data>
  </settings>
  <margin left="0" top="" right="0" bottom="0" />
  <charts>
    <chart plot_type="CategorizedVertical" name="chart_1614502819445708">
      <chart_settings>
        <title enabled="False" />
        <chart_background>
          <fill type="Solid" color="0xffffff" opacity="0" />
          <border enabled="false"/>
          <corners type="Square"/>
        </chart_background>
        <data_plot_background>
        </data_plot_background>
        <axes>
          <y_axis >
            <scale   mode="Normal"    />
            <title enabled="false" />
            <labels enabled="true" position="Outside">
              <font family="Tahoma" size="10" color="0x" />
              <format><![CDATA[{%Value}{numDecimals:0,decimalSeparator:.,thousandsSeparator:\,}]]></format>
            </labels>
            <major_grid enabled="False"/>
<minor_grid enabled="False"/>
          </y_axis>
          <x_axis>
            <scale  mode="Normal"    />
            <title enabled="false"/>
            <labels enabled="true" position="Outside">
              <font family="Tahoma" size="10" color="0x" />
              <format><![CDATA[{%Value}{numDecimals:0,decimalSeparator:.,thousandsSeparator:\,}]]></format>
            </labels>
            <major_grid enabled="True" interlaced="false">
                <line color="Black" />
              </major_grid>
<minor_grid enabled="True">
              </minor_grid>
          </x_axis>
        </axes>
      </chart_settings>
      <data_plot_settings enable_3d_mode="false" >
        <line_series>
          <tooltip_settings enabled="true">
            <format><![CDATA[{%Name}{enabled:False} - {%Value}{numDecimals:0,decimalSeparator:.,thousandsSeparator:\,}]]></format>
            <font family="Tahoma" size="10" color="0x" />
              <position anchor="Float" valign="Top" padding="10" />
          </tooltip_settings>
          <label_settings enabled="true" mode="Outside" multi_line_align="Center">
            <format><![CDATA[{%Value}{numDecimals:0,decimalSeparator:.,thousandsSeparator:\,}]]></format>
            <background enabled="false"/>
            <font family="Tahoma" size="10" color="0x" />
          </label_settings>
          <line_style>
                            <line enabled="true" thickness="1" opacity="1" />
          </line_style>
          <marker_settings enabled="True" >
            <marker type="Circle" />
          </marker_settings>
        </line_series>
      </data_plot_settings>
#DATA#
    </chart>
  </charts>
</anychart>to
<?xml version = "1.0" encoding="utf-8" standalone = "yes"?>
<anychart>
  <settings>
    <animation enabled="false"/>
    <no_data show_waiting_animation="False">
      <label>
        <text></text>
        <font family="Verdana" bold="yes" size="10"/>
      </label>
    </no_data>
    <locale>
      <date_time_format>
        <format>%HH:%mm:%ss %dd/%MM/%yyyy</format>
      </date_time_format>
    </locale>
  </settings>
  <margin left="0" top="" right="0" bottom="0" />
  <charts>
    <chart plot_type="CategorizedVertical" name="chart_1614502819445708">
      <chart_settings>
        <title enabled="False" />
        <chart_background>
          <fill type="Solid" color="0xffffff" opacity="0" />
          <border enabled="false"/>
          <corners type="Square"/>
        </chart_background>
        <data_plot_background>
        </data_plot_background>
        <axes>
          <y_axis >
            <scale   mode="Normal"    />
            <title enabled="false" />
            <labels enabled="true" position="Outside">
              <font family="Tahoma" size="10" color="0x" />
              <format><![CDATA[{%Value}{numDecimals:0,decimalSeparator:.,thousandsSeparator:\,}]]></format>
            </labels>
            <major_grid enabled="False"/>
<minor_grid enabled="False"/>
          </y_axis>
          <x_axis>
            <scale  mode="Normal" type="DateTime"    />
            <title enabled="false"/>
            <labels enabled="true" position="Outside">
              <font family="Tahoma" size="10" color="0x" />
              <format><![CDATA[{%Value}]]></format>
            </labels>
            <major_grid enabled="True" interlaced="false">
                <line color="Black" />
              </major_grid>
<minor_grid enabled="True">
              </minor_grid>
          </x_axis>
        </axes>
      </chart_settings>
      <data_plot_settings enable_3d_mode="false" >
        <line_series>
          <tooltip_settings enabled="true">
            <format><![CDATA[{%Name}{enabled:False} - {%Value}{numDecimals:0,decimalSeparator:.,thousandsSeparator:\,}]]></format>
            <font family="Tahoma" size="10" color="0x" />
              <position anchor="Float" valign="Top" padding="10" />
          </tooltip_settings>
          <label_settings enabled="true" mode="Outside" multi_line_align="Center">
            <format><![CDATA[{%Value}{numDecimals:0,decimalSeparator:.,thousandsSeparator:\,}]]></format>
            <background enabled="false"/>
            <font family="Tahoma" size="10" color="0x" />
          </label_settings>
          <line_style>
                            <line enabled="true" thickness="1" opacity="1" />
          </line_style>
          <marker_settings enabled="True" >
            <marker type="Circle" />
          </marker_settings>
        </line_series>
      </data_plot_settings>
#DATA#
    </chart>
  </charts>
</anychart>and change the SQL series to:
select link, to_char(value, 'HH24:MI:SS DD/MM/YYYY') as value, label from
select null as link,  sysdate -2  as value, 0 as label from dual
union
select null , sysdate -2+1/24 , 1 from dual
union
select null , sysdate -2+2/24 , 2 from dual
union
select null , sysdate -2+5/48, 1 from dual
union
select null , sysdate -2+3/24, 0 from dual)But the chart changes from a line chart to a bar chart with each value being equally spaced.
Can anyone see what I am doing wrong or point me in the right direction? Thanks in advance.

Answer 1

This will be a little bit lengthy answer, but I guess it will be easier to understand what I meant to say.
I created a table that contains values you used as a data source (just to make my life easier):
SQL> alter session set nls_date_format = 'dd.mm.yyyy hh24:mi:ss';
Session altered.
SQL> select * from test;
VALUE                    LABEL
12.10.2010 09:03:45          0
12.10.2010 10:03:45          1
12.10.2010 11:03:45          2
12.10.2010 11:33:45          1
12.10.2010 12:03:45          0
SQL> alter session set nls_date_format = 'hh24:mi';
Session altered.From now on, we'll see only hours and minutes.
Step 1: current and previous values - difference in number of MINUTES
SQL> select t.value,
  2         lag(t.value) over (order by t.value) previous_value,
  3         (t.value - lag(t.value) over (order by t.value)) * 24 * 60 minutes_diff
  4  from test t;
VALUE PREVI MINUTES_DIFF
09:03
10:03 09:03           60
11:03 10:03           60
11:33 11:03           30
12:03 11:33           30Step 2: a little bit of calculation:
- TIME_SPAN: how many minutes are there between MIN and MAX date?
- MIN_DIFF: what is the minimum time difference (minutes)?
- SLICES: how many time slices do we want on the x-axis?
SQL> select
  2    min(x.value) min_val,
  3    max(x.value) max_val,
  4    min(x.minutes_diff) min_diff,
  5    (max(x.value) - min(x.value)) * 24 * 60 time_span,
  6    (max(x.value) - min(x.value)) * 24 * 60 / min(x.minutes_diff) slices
  7  from (select t.value,
  8               lag(t.value) over (order by t.value) previous_value,
  9               (t.value - lag(t.value) over (order by t.value)) * 24 * 60 minutes_diff
10        from test t
11       ) x;
MIN_V MAX_V   MIN_DIFF  TIME_SPAN     SLICES
09:03 12:03         30        180          6There's 180 minutes between 09:03 and 12:03; minimum time difference in our TEST table is 30 minutes, so - we want to have 6 time slices on the x-axis (180 / 30).
Step 3: row generator technique: let's create time values that are missing:
SQL> select y.min_val + (level - 1) * y.min_diff / (24 * 60) val
  2  from (select
  3          min(x.value) min_val,
  4          max(x.value) max_val,
  5          min(x.minutes_diff) min_diff,
  6          (max(x.value) - min(x.value)) * 24 * 60 time_span,
  7          (max(x.value) - min(x.value)) * 24 * 60 / min(x.minutes_diff) slices
  8        from (select t.value,
  9                     lag(t.value) over (order by t.value) previous_value,
10                     (t.value - lag(t.value) over (order by t.value)) * 24 * 60 minutes_diff
11              from test t
12             ) x
13       ) y
14  connect by level <= y.slices + 1;
VAL
09:03
09:33
10:03
10:33
11:03
11:33
12:03
7 rows selected.OK, now we have 30 minutes between every time value.
Step 4: join newly generated time values with the original table. Use OUTER JOIN; missing labels will be 0 (zero):
SQL> select
  2    null link,
  3    to_char(z.val, 'hh24:mi') new_value,
  4    nvl(t1.label, 0) new_label
  5  from (select y.min_val + (level - 1) * y.min_diff / (24 * 60) val
  6        from (select
  7                min(x.value) min_val,
  8                max(x.value) max_val,
  9                min(x.minutes_diff) min_diff,
10                (max(x.value) - min(x.value)) * 24 * 60 time_span,
11                (max(x.value) - min(x.value)) * 24 * 60 / min(x.minutes_diff) slices
12              from (select t.value,
13                           lag(t.value) over (order by t.value) previous_value,
14                           (t.value - lag(t.value) over (order by t.value)) * 24 * 60 minutes_diff
15                    from test t
16                   ) x
17             ) y
18        connect by level <= y.slices + 1
19       ) z,
20       test t1
21  where t1.value (+) = z.val
22  order by z.val;
L NEW_V  NEW_LABEL
  09:03          0
  09:33          0
  10:03          1
  10:33          0
  11:03          2
  11:33          1
  12:03          0
7 rows selected.Cool, so we have them all. Now, go to Apex and create a chart using a query from step #4.
I tested it - it displays something which means that it should work for you too (unfortunately, this forum doesn't accept attachments so that you could see it). Now, I can't tell whether that's what you need or not, but - if the idea itself is OK, it can be adjusted (I hope so).