Problem In RadHtmlChart

[Arsalan]

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

[Danail Vasilev]

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:

• HtmlChart - Client Templates for Series Labels and Tooltips

• Overview
• Using ClientTemplates to Display HTML and Execute JavaScript

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

[Arsalan]

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..

[Danail Vasilev]

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