This is a migrated thread and some comments may be shown as answers.

X Axis Value

6 Answers 245 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

viral asked on 01 Aug 2014, 02:13 PM

chart.jpg

I have created simple bar charge.
x Axis has values like 0-6, 6-12, 12-18
for some reasons it is converting 6-12 to date format.
how can I solve this problem? see attachment.

using this code.

<telerik:RadHtmlChart runat="server" ID="NonAdmitted" >
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="Total" Name="Test Chart">
<TooltipsAppearance Color="Blue" />
</telerik:ColumnSeries>
</Series>
<XAxis DataLabelsField="weeksgroup" >
<LabelsAppearance>
</LabelsAppearance>
<TitleAppearance Text="WeeksGroup">
</TitleAppearance>
</XAxis>
<YAxis>
<TitleAppearance Text="Total">
</TitleAppearance>
</YAxis>
</PlotArea>
<Legend>
<Appearance Visible="false" >
</Appearance>
</Legend>
<ChartTitle Text="Incomplete Pathway - Admitted">
</ChartTitle>
</telerik:RadHtmlChart>

6 Answers, 1 is accepted

answered on 04 Aug 2014, 09:12 AM

Hi viral,

Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end. Please provide your code if it doesn't help.

ASPX:

<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true">

<PlotArea>

<Series>

<telerik:ColumnSeries Name="Product 1">

<TooltipsAppearance BackgroundColor="Orange" />

<SeriesItems>

<telerik:CategorySeriesItem Y="1332" />

<telerik:CategorySeriesItem Y="427" />

<telerik:CategorySeriesItem Y="243" />

<telerik:CategorySeriesItem Y="67" />

</SeriesItems>

</telerik:ColumnSeries>

</Series>

<XAxis AxisCrossingValue="0" Color="Black">

<Items>

<telerik:AxisItem LabelText="0-6" />

<telerik:AxisItem LabelText="6-12" />

<telerik:AxisItem LabelText="12-18" />

<telerik:AxisItem LabelText="18-26" />

</Items>

<TitleAppearance Position="Center" Text="Weeks Group" />

</XAxis>

<YAxis AxisCrossingValue="0" Color="Black" MaxValue="1600" MinValue="0" Step="200">

<TitleAppearance Position="Center" Text="Total" />

</YAxis>

</PlotArea>

<Legend>

<Appearance Visible="false">

</Appearance>

</Legend>

<ChartTitle Text="Incomplete Pathway - Admitted">

</ChartTitle>

</telerik:RadHtmlChart>

Thanks,
Shinu.

answered on 04 Aug 2014, 10:42 AM

chart2.jpg

I have tried your code and it's working fine. for some reasons, my code is not working. please see attachment. here's code.

Dim ObjRef As New RTT_Repository
Dim dt As DataTable

dt = ObjRef.OP_IncompletePathway(intSpecialtyID)

'RadChart12.DataSource = dt
'RadChart12.DataBind()

InpatientChart.DataSource = dt
InpatientChart.DataBind()

answered on 05 Aug 2014, 03:28 AM

Hi viral,

Please try to set the DataType of 'weeksgroup' as 'string' which works fine at my end.

ASPX:

<telerik:RadHtmlChart runat="server" Width="800px" Height="500px" ID="RadHtmlChart1">

<PlotArea>

<Series>

<telerik:ColumnSeries DataFieldY="Total">

</telerik:ColumnSeries>

</Series>

<XAxis DataLabelsField="weeksgroup">

<TitleAppearance Text="weeksgroup">

</TitleAppearance>

</XAxis>

<YAxis>

<TitleAppearance Text="Total">

</TitleAppearance>

</YAxis>

</PlotArea>

<Legend>

<Appearance Visible="false">

</Appearance>

</Legend>

<ChartTitle Text="Incomplete Pathway - Admitted">

</ChartTitle>

</telerik:RadHtmlChart>

VB:

Protected Sub Page_Load(sender As Object, e As EventArgs)

Dim dtChart As New DataTable()

dtChart.Columns.Add("SortID", GetType(Integer))

dtChart.Columns.Add("weeksgroup", GetType(String))

dtChart.Columns.Add("Total", GetType(Integer))

dtChart.Rows.Add(1, "0-6", 680)

dtChart.Rows.Add(2, "6-12", 249)

dtChart.Rows.Add(3, "12-18", 197)

dtChart.Rows.Add(4, "18-26", 77)

dtChart.Rows.Add(5, "26-52", 39)

RadHtmlChart1.DataSource = dtChart

RadHtmlChart1.DataBind()

End Sub

Thanks,
Shinu.

answered on 06 Aug 2014, 09:28 AM

Hello Viral,

This is a know issue with the control that is logged here and has already been resolved. I can suggest that you try the following troubleshooting steps:
   - Set the XAxis.Type="Category" property.
   - Define the data source field used for the x-axis to be of string type.
   - Upgrade your version of Telerik UI controls to the latest official one - 2014.2.724.

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.