Problem In RadHtmlChart

4 posts, 0 answers
  1. Arsalan
    Arsalan avatar
    17 posts
    Member since:
    Sep 2013

    Posted 01 Mar 2014 Link to this post

    Hi Everyone 

    I have this datatable
    ID     Amount   Date
    1       500         Feb 18
    2       200         Feb 15 
    3       400         Feb 18
    4       800         Mar 18
    5       300         Mar 19

    i am making bar chart. In my chart months show in X-axis. I just to know how to represent this datatable to my chart.
    And problem is that i have multiple amounts in same month i dont know how to show different amount bars in same month.
    And Every bar on mouse hover  show amount. i dont want to show amount. i want to show Date on mouse hover in bar..

    Please Help me how to do this

    Thanks in Advance




  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 05 Mar 2014 Link to this post

    Hi Arsalan,

    Items from each series are distributed over the categories from the x-axis. Therefore if you want to have for example two items in an x-axis category this means that you must have at least two series.

    For a data bound chart each series must refer a separate column from the data source. You can examine the Data Binding section of the online demos for more information on the matter. Note that data source grouping is not supported by the RadHtmlChart. If you want to achieve that you must manually group the data source. Such an example is illustrated in this forum thread.

    Regarding the displaying of the category in the labels, you must use templates. More information on this regard is available in the following resources:
    For example:
    <telerik:RadHtmlChart runat="server" ID="BarChart" Width="400" Height="600" Transitions="true">
        <PlotArea>
            <Series>
                <telerik:BarSeries>
                    <LabelsAppearance>
                        <ClientTemplate>
                            category: #=category# 
                            value: #=value#
                        </ClientTemplate>
                    </LabelsAppearance>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="20" />
                        <telerik:CategorySeriesItem Y="10" />
                    </SeriesItems>
                </telerik:BarSeries>
            </Series>
            <XAxis>
                <Items>
                    <telerik:AxisItem LabelText="Feb 18" />
                    <telerik:AxisItem LabelText="Mar 18" />
                    <telerik:AxisItem LabelText="Mar 19" />
                </Items>
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>


    Regards,
    Danail Vasilev
    Telerik

    DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Arsalan
    Arsalan avatar
    17 posts
    Member since:
    Sep 2013

    Posted 06 Mar 2014 in reply to Danail Vasilev Link to this post

    Hey Danail
    Thanks for your reply.
     
    But Problem is that you solved my problem its hard code.
    Every Month Value will be change so what should i do..
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 10 Mar 2014 Link to this post

    Hi Arsalan,

    You can use the same approach for a data bound chart as well. For example:
    ASPX:
    <telerik:RadHtmlChart runat="server" ID="BarChart" Width="600" Height="600" Transitions="true">
        <PlotArea>
            <Series>
                <telerik:BarSeries DataFieldY="SellQuantity">
                    <LabelsAppearance>
                        <ClientTemplate>
                    category: #=category#
                    value: #=value#
                        </ClientTemplate>
                    </LabelsAppearance>
                </telerik:BarSeries>
            </Series>
            <XAxis DataLabelsField="SellDate">
            </XAxis>
            <YAxis MaxValue="10"></YAxis>
        </PlotArea>
    </telerik:RadHtmlChart>
    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        BarChart.DataSource = GetData();
        BarChart.DataBind();
    }
     
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
     
        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("SellQuantity", typeof(int));
        dt.Columns.Add("SellDate", typeof(string));
     
        dt.Rows.Add(1, 2, "Feb 18");
        dt.Rows.Add(2, 5, "Feb 20");
        dt.Rows.Add(3, 6, "Mar 18");
        dt.Rows.Add(4, 4, "Mar 23");
     
        return dt;
    }

    Note, however, that in the previous version of Telerik UI there was an issue with the persistence of the dataItem object in the templates when a category series (e.g., line, area, bar, column, etc.) is used with a date axis. If that is the case, you can try to upgrade to the latest official version of Telerik UI - 2014.1.225.

    If the above step, however, is not helpful could you please try to reproduce the issue with the above VS example and then tell us what changes you have made, so that we can make an investigation locally?

    Regards,
    Danail Vasilev
    Telerik

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

Back to Top