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

HtmlChart with Data Navigation

6 Answers 134 Views

Chart (HTML5)

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

6 Answers, 1 is accepted

answered on 23 May 2014, 08:12 AM

RadHtmlChart-Navigator.zip

Hello Ahmet,

The Data Navigation functionality of the chart works only with category series (i.e., area, line, column, candlestick), so that you cannot use it with numeric series like scatter, scatterline and bubble.

If you want to have an example of a Data Navigation functionality with line series you can simply replace the candlestick series in the Data Navigation help article / HtmlChart - Data Navigation online demo with line series and set the corresponding data bound property of the series - DataFieldY. For example:
ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Layout="Stock" Width="800" Height="500" Skin="Default">

<Navigator Visible="true">

<RangeSelector From="2008/05/01" To="2009/09/01" />

<SelectionHint Visible="true" DataFormatString="From {0:d} to {1:d}" />

<Series>

<telerik:AreaSeries DataFieldY="DisneyClose">

</telerik:AreaSeries>

</Series>

<XAxis Color="#aaaaaa">

<LabelsAppearance>

<TextStyle Color="#666666" />

</LabelsAppearance>

</XAxis>

</Navigator>

<PlotArea>

<Series>

<telerik:LineSeries Name="Disney" DataFieldY="DisneyOpen">

</telerik:LineSeries>

</Series>

<XAxis DataLabelsField="DisneyDate" Type="Date" Name="mainAxis">

<MajorGridLines Visible="false"></MajorGridLines>

<MinorGridLines Visible="false"></MinorGridLines>

<TitleAppearance Text="Date">

</TitleAppearance>

</XAxis>

<YAxis>

<LabelsAppearance DataFormatString="{0:C}">

</LabelsAppearance>

<MajorGridLines Visible="true" Color="#efefef" Width="1"></MajorGridLines>

<MinorGridLines Visible="false"></MinorGridLines>

<TitleAppearance Text="Price">

</TitleAppearance>

</YAxis>

</PlotArea>

<ChartTitle Text="The Walt Disney Company (DIS)">

</ChartTitle>

</telerik:RadHtmlChart>

C#:

protected void Page_Load(object sender, EventArgs e)

{

RadHtmlChart1.DataSource = GetData();

RadHtmlChart1.DataBind();

}

You can find the full runnable VS example in the attached archive.

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.

answered on 27 May 2014, 10:18 AM

Hello Ahmet,

You can use the "#= kendo.format(\'{0:MM/dd/yyyy}\', dataItem.DATA_TIME) #" string in the template. For example:

ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">

<PlotArea>

<Series>

<telerik:LineSeries Name="Volume" DataFieldY="Volume">

<TooltipsAppearance Color="White">

<ClientTemplate>

Inventory <br />

Date: #= kendo.format(\'{0:dd/MMM/yyyy}\', dataItem.DATA_TIME) # <br/>

YValue: #= kendo.format(\'{0:n0}\', dataItem.Volume)#

</ClientTemplate>

</TooltipsAppearance>

<LabelsAppearance Visible="false">

</LabelsAppearance>

</telerik:LineSeries>

</Series>

<XAxis DataLabelsField="DATA_TIME">

<LabelsAppearance Step="2"></LabelsAppearance>

</XAxis>

</PlotArea>

<ChartTitle Text="Product sales for 2011">

</ChartTitle>

<Legend>

<Appearance Position="Bottom" />

</Legend>

</telerik:RadHtmlChart>

C#:

protected void Page_Load(object sender, EventArgs e)

{

RadHtmlChart1.DataSource = GetData();

RadHtmlChart1.DataBind();

}

protected DataTable GetData()

{

DataTable dt = new DataTable();

dt.Columns.Add("ID", typeof(int));

dt.Columns.Add("Volume", typeof(int));

dt.Columns.Add("DATA_TIME", typeof(DateTime));

dt.Rows.Add(1, 2, new DateTime(2011, 06, 12));

dt.Rows.Add(2, 5, new DateTime(2011, 12, 12));

dt.Rows.Add(3, 6, new DateTime(2012, 06, 17));

dt.Rows.Add(4, 4, new DateTime(2012, 09, 18));

dt.Rows.Add(5, 7, new DateTime(2013, 03, 18));

return dt;

}

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.