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

X Axis Value

6 Answers 162 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
viral
Top achievements
Rank 1
viral asked on 01 Aug 2014, 02:13 PM
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

Sort by
0
Shinu
Top achievements
Rank 2
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.
0
viral
Top achievements
Rank 1
answered on 04 Aug 2014, 10:42 AM
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() 
0
viral
Top achievements
Rank 1
answered on 04 Aug 2014, 10:46 AM
basically it's converting 6-12 to dates. is there any function to keep the datatype same? 
0
Shinu
Top achievements
Rank 2
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.
0
viral
Top achievements
Rank 1
answered on 06 Aug 2014, 07:56 AM
Shinu, 

your code is working fine. I get problem when I get values from database. for time being I have solved this problem by using "6 -- 12"

thank you for your help. 
0
Danail Vasilev
Telerik team
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.

 
Tags
Chart (HTML5)
Asked by
viral
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
viral
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or