Wod
Reputation: 51
Anychart: Problems with the ordering of Dates on the X-Axis
I am using Anychart 6 (within Oracle APEX) and I do have the following issue:
- datetimes (currently as strings) on my X-Axis
- 2 Series with partly different Dates (see XML below)
- if the first Series is missing a Date (in the Case below it's the "19.02.2014 00:00" and the second Series has that Date, then that date will occur as the end.
Is it possible to make Anychart order every date in any series first?
I also experimented with the "DateTime" format of Anychart, hoping it recognizes the order there, but the result remained the same.
XML:
<anychart>
<settings>
<animation enabled="false"/>
<no_data show_waiting_animation="False">
<label>
<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_1295609758644867">
<styles>
<line_style name="style1">
<line enabled="true" thickness="5" opacity="1"/>
</line_style>
<line_style name="style2">
<line dashed="True" dash_length="2" space_length="8" color="red"/>
<marker_settings enabled="False"/>
</line_style>
<line_style name="style3">
<line dashed="True" dash_length="2" space_length="8"/>
</line_style>
</styles>
<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="0x000000"/>
<format>{%Value}{numDecimals:1,decimalSeparator:\,,thousandsSeparator:.}</format>
</labels>
<major_grid enabled="False"/>
<minor_grid enabled="False"/>
</y_axis>
<x_axis>
<scale mode="Normal"/>
<title>
<text>Date</text>
<font family="Tahoma" size="14" color="0x000000"/>
</title>
<labels enabled="true" rotation="45" position="Outside">
<font family="verdana_embed_tf" size="10" color="0x000000"/>
<format>{%Value}{numDecimals:1,decimalSeparator:\,,thousandsSeparator:.}</format>
</labels>
<major_grid enabled="True" interlaced="false">
<line color="Black"/>
</major_grid>
<minor_grid enabled="True">
</minor_grid>
</x_axis>
</axes>
<legend enabled="true" position="Right" align="Near" elements_layout="Vertical" ignore_auto_item="true">
<title enabled="False"/>
<items>
<item source="Series"/>
</items>
<font family="Arial" size="10" color="0x000000"/>
</legend>
</chart_settings>
<data_plot_settings enable_3d_mode="false" default_series_type="Line">
<line_series style="style1">
<tooltip_settings enabled="true">
<format>{%Name}{enabled:False} - {%Value}{numDecimals:1,decimalSeparator:\,,thousandsSeparator:.}</format>
<font family="Tahoma" size="10" color="0x000000"/>
<position anchor="Float" valign="Top" padding="10"/>
</tooltip_settings>
<label_settings enabled="false" mode="Outside" multi_line_align="Center">
<format>{%Value}{numDecimals:1,decimalSeparator:\,,thousandsSeparator:.}</format>
<background enabled="false"/>
<font family="Arial" size="10" color="0x000000"/>
</label_settings>
<line_style>
<line enabled="true" thickness="5" opacity="1"/>
</line_style>
<marker_settings enabled="True">
<marker type="Circle"/>
</marker_settings>
</line_series>
<line_series style="style2">
<marker_settings enabled="False"/>
</line_series>
<line_series style="style3">
<marker_settings enabled="true"/>
</line_series>
</data_plot_settings>
<data>
<series name="A" style="style1" color="#262DB3">
<point name="14.02.2014 00:00" y="892"/>
<point name="15.02.2014 00:00" y="830"/>
<point name="16.02.2014 00:00" y="829"/>
<point name="17.02.2014 00:00" y="871"/>
<point name="18.02.2014 00:00" y="847"/>
<point name="20.02.2014 00:00" y="849"/>
<point name="21.02.2014 00:00" y="830"/>
<point name="22.02.2014 00:00" y="822"/>
<point name="23.02.2014 00:00" y="823"/>
</series>
<series name="B" style="style1" color="#2A8015">
<point name="15.02.2014 00:00" y="13"/>
<point name="16.02.2014 00:00" y="15"/>
<point name="17.02.2014 00:00" y="11"/>
<point name="18.02.2014 00:00" y="11"/>
<point name="19.02.2014 00:00" y="19"/>
<point name="20.02.2014 00:00" y="14"/>
<point name="21.02.2014 00:00" y="15"/>
<point name="22.02.2014 00:00" y="51"/>
</series>
</data>
</chart>
</charts>
</anychart>
Picture of how it looks like:
Thanks for any advice, Thomas
Upvotes: 1
Views: 1795
Answers (1)
AnyChart Support
Reputation: 3905
This error occurs because chart plots the points one by one and "don’t know" that value, e.g. “23.02.2014 00:00” is more than value “19.02.2014 00:00”, if the second point is defined after the first. To fix it you should use the DateTime axes and Scatter plot type. It will be more reasonable in case when chart works with several series to avoid different overlapping.
XML:
<anychart>
<settings>
<animation enabled="false"/>
<no_data show_waiting_animation="False">
<label>
<text/>
<font family="Verdana" bold="yes" size="10"/>
</label>
</no_data>
<locale>
<date_time_format>
<format><![CDATA[%dd.%MM.%yyyy %HH:%mm]]></format>
</date_time_format>
</locale>
</settings>
<margin left="0" top="" right="0" bottom="0"/>
<charts>
<chart plot_type="Scatter" name="chart_1295609758644867">
<styles>
<line_style name="style1">
<line enabled="true" thickness="5" opacity="1"/>
</line_style>
<line_style name="style2">
<line dashed="True" dash_length="2" space_length="8" color="red"/>
<marker_settings enabled="False"/>
</line_style>
<line_style name="style3">
<line dashed="True" dash_length="2" space_length="8"/>
</line_style>
</styles>
<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="0x000000"/>
<format>{%Value}{numDecimals:1,decimalSeparator:\,,thousandsSeparator:.}</format>
</labels>
<major_grid enabled="False"/>
<minor_grid enabled="False"/>
</y_axis>
<x_axis>
<scale type="DateTime"/>
<title>
<text>Date</text>
<font family="Tahoma" size="14" color="0x000000"/>
</title>
<labels enabled="true" rotation="45" position="Outside">
<font family="verdana_embed_tf" size="10" color="0x000000"/>
<format><![CDATA[{%Value}{dateTimeFormat:%dd/%MM/%yyyy}]]></format>
</labels>
<major_grid enabled="True" interlaced="false">
<line color="Black"/>
</major_grid>
<minor_grid enabled="True">
</minor_grid>
</x_axis>
</axes>
<legend enabled="true" position="Right" align="Near" elements_layout="Vertical" ignore_auto_item="true">
<title enabled="False"/>
<items>
<item source="Series"/>
</items>
<font family="Arial" size="10" color="0x000000"/>
</legend>
</chart_settings>
<data_plot_settings enable_3d_mode="false" default_series_type="Line">
<line_series style="style1">
<tooltip_settings enabled="true">
<format>{%Name}{enabled:False} - {%Value}{numDecimals:1,decimalSeparator:\,,thousandsSeparator:.}</format>
<font family="Tahoma" size="10" color="0x000000"/>
<position anchor="Float" valign="Top" padding="10"/>
</tooltip_settings>
<label_settings enabled="false" mode="Outside" multi_line_align="Center">
<format>{%Value}{numDecimals:1,decimalSeparator:\,,thousandsSeparator:.}</format>
<background enabled="false"/>
<font family="Arial" size="10" color="0x000000"/>
</label_settings>
<line_style>
<line enabled="true" thickness="5" opacity="1"/>
</line_style>
<marker_settings enabled="True">
<marker type="Circle"/>
</marker_settings>
</line_series>
<line_series style="style2">
<marker_settings enabled="False"/>
</line_series>
<line_series style="style3">
<marker_settings enabled="true"/>
</line_series>
</data_plot_settings>
<data>
<series name="A" style="style1" color="#262DB3">
<point x="14.02.2014 00:00" y="892"/>
<point x="15.02.2014 00:00" y="830"/>
<point x="16.02.2014 00:00" y="829"/>
<point x="17.02.2014 00:00" y="871"/>
<point x="18.02.2014 00:00" y="847"/>
<point x="20.02.2014 00:00" y="849"/>
<point x="21.02.2014 00:00" y="830"/>
<point x="22.02.2014 00:00" y="822"/>
<point x="23.02.2014 00:00" y="823"/>
</series>
<series name="B" style="style1" color="#2A8015">
<point x="15.02.2014 00:00" y="13"/>
<point x="16.02.2014 00:00" y="15"/>
<point x="17.02.2014 00:00" y="11"/>
<point x="18.02.2014 00:00" y="11"/>
<point x="19.02.2014 00:00" y="19"/>
<point x="20.02.2014 00:00" y="14"/>
<point x="21.02.2014 00:00" y="15"/>
<point x="22.02.2014 00:00" y="51"/>
</series>
</data>
</chart>
</charts>
</anychart>
So here is the result:
Upvotes: 1
Related Questions
- How to sort x Axis based on dates with anychart Library?
- Dates in Oracle Apex Chart's X-Axis not in order
- datetime vs. value plot gives strange order on values-axis
- how to reorder the axes of a chart with the date
- How to format x labels for a datetime scale
- How to move the x-axis labels on a datetime scale further from the edges?
- Wrong order in Chart.js graph with time on the X-Axis
- Time data in x axis not ordered in R ggplot
- AmCharts serial chart date ordering issue
- Chart shows wrong dates at X axis