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

RadHtmlChart related Queries

10 Answers 524 Views

Chart (HTML5)

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

Govindarajan asked on 26 Nov 2013, 07:16 AM

Legend-click.png

BarSeries-DateTime.JPG

ScatterSeries-DateTime.JPG

Hi,

I am using RadHTMLChart(Telerik dll version : 2013.2.717.35) in my application.Please provide me the solution for the following queries:

1.RadHtmlChart has the inbuilt functionality to enable or disable Series in the Legend.How to enable or disable Series in the Legend programatically?Is it possible to control the legend Items programatically for toggling the series?Please refer the screenshot legend click.png

2.How to display Series Name for Pie Chart.I know that only one series can be plotted in pie chart for now.Is there anyway to display series name in chart area so that the user will identify ,which series have been plotted for pie chart?

3.I have found that ClientTemplate property should be used to display one or more values in Label/ToolTip of BarSeries in one of the telerik link.Is there anyway to apply custom formats like ##,##.## or $### or MM/dd/YYYY or $##,##,##.#0 to the Label/ToolTip of BarSeries.I have tried with kendo.format method to apply custom formats.It did not work.Please provide me the solution to achieve it.

4.I am using datetime value(sorted in ascending order) as a input data for XAxis .In bar chart,I am able to see all the input datetime values in XAxis.But in ScatterSeries ,some of the input datetime data gets disppear in the XAxis ,but I can view those disapeared XAxis data in Label/Tooltip of ScatterSeries.How to display all the input datetime data in XAxis of ScatterSeries chart? Please refer the screenshot barseries_datetime.jpg & scatterseries_datetime.jpg

Thanks in advance.Please reply me as soon as possible.

10 Answers, 1 is accepted

answered on 28 Nov 2013, 05:31 PM

Hello Govindarajan,

Please find below my questions to your answers:

Toggle visibility of the series - Currently there aren't any properties exposed by the series that control their visibility. Such a feature request, however, has already been logged in our feedback portal here, so that you can monitor, comment and vote on it. For the time being you can use the workaround from the item to set the visibility of the series on the client and use step provided in this help article that illustrates how to execute JavaScript from the server.
Series names for PieSeries - Series names for Pie series are called categories. They can be obtained through the "category" property. For example:

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

<PlotArea>

<Series>

<telerik:PieSeries Name="sdf">

<LabelsAppearance>

<ClientTemplate>

series name: #=category#

</ClientTemplate>

</LabelsAppearance>

<SeriesItems>

<telerik:PieSeriesItem Y="30" Name="item 1" />

<telerik:PieSeriesItem Y="10" Name="item 2" />

<telerik:PieSeriesItem Y="20" Name="item 3" />

</SeriesItems>

</telerik:PieSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

Format dates in ClientTemplate - Note that quotes in the ClientTemplate must be escaped. For example:

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

<PlotArea>

<Series>

<telerik:ColumnSeries>

<LabelsAppearance>

<ClientTemplate>

category: #=kendo.format(\'{0:dd-MM-yyyy}\',category)#

</ClientTemplate>

</LabelsAppearance>

<SeriesItems>

<telerik:CategorySeriesItem Y="30" />

<telerik:CategorySeriesItem Y="10" />

<telerik:CategorySeriesItem Y="20" />

</SeriesItems>

</telerik:ColumnSeries>

</Series>

<XAxis Type="date">

<Items>

<telerik:AxisItem LabelText="2013/10/22" />

<telerik:AxisItem LabelText="2013/10/23" />

<telerik:AxisItem LabelText="2013/10/24" />

</Items>

</XAxis>

</PlotArea>

</telerik:RadHtmlChart>

Labels of Scatter/Scatter line series - generally line, area, column/bar series plot discrete data - series use category XAxis, while scatter and scatterline series plot continuous data - series use numeric XAxis. Therefore it is not possible to control the label on the XAxis for each scatter series item. What you can do, however, is to set particular BaseUnit(i.e. years, months, days, etc) or Step through which the labels will be rendered.

You may also find useful articles in the ClientTemplate for Series Labels and Tooltips section, Handling Special Symbols article as well as Date Axis article.

Regards,
Danail Vasilev
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 23 Jun 2014, 12:09 PM

Hello Asutosh,

If you are not using the latest official version of Telerik UI - 2014.2.618, does upgrading to it fixes the issue? If the above steps, however, do not help it would be better to try to reproduce the issue with the code below and then tell us what changes you have made, so that I can make an investigation locally.

ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">

<PlotArea>

<Series>

<telerik:PieSeries DataFieldY="TotalCost">

<LabelsAppearance>

<ClientTemplate>

#= kendo.format(\'{0:C2}\', dataItem.TotalCost)#

</ClientTemplate>

</LabelsAppearance>

<TooltipsAppearance Color="White">

<ClientTemplate>

#= kendo.format(\'{0:C2}\', dataItem.TotalCost)#

</ClientTemplate>

</TooltipsAppearance>

</telerik:PieSeries>

</Series>

</PlotArea>

</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("TotalCost", typeof(int));

dt.Rows.Add(1, 2);

dt.Rows.Add(2, 5);

dt.Rows.Add(3, 6);

dt.Rows.Add(4, 4);

dt.Rows.Add(5, 7);

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.

answered on 19 Aug 2014, 11:02 AM

1.png

2.png

Hello Danail,

I am suppose to draw a RadHtml Mixed Chart type. i am using Area chart and Scatter Line chart. Now the problem is i am not able to draw both series type in Same chart my chart showed either one of the series.
Also my chart shows x-axis when i use scatter line chart where as in the case of Area chart x-axis is missing.

Kindly look attached files.

answered on 19 Aug 2014, 12:45 PM

Hello,

The scatter chart has a numerical x-axis while the area chart has a categorical x-axis so both cannot be put in the same RadHtmlChart, as explained here: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/mixedchartseries/defaultcs.aspx.

The scatter chart shows a x-axis because it is only a set of numbers according to the data, but the area chart requires that the developer provides the categories shown on the x-axis.

I hope this explains the case.

Regards,

Marin Bratanov
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 21 Aug 2014, 02:09 PM

Hello Danail,

We also use RadHTMLChart Control with "Scatter Series". (its an dynamic series bind at runtime)
Now the thing is we want to show some details on tooltip apart of data that we have for "X/Y axis". i have read some where that " Each Series-Item does not have its own tooltip and text properties that can be set declaratively, they are taken from its value automatically".

An option is using ClientTemplates to load a column from the datasource but we can not use ClientTemplates also because we are binding the chart with dynamic "Scatter Series" We are not sure how many series we get on the chart and in the case of "ClientTemplate" we have to define it at design time.

Can we use "Telerik Tooltip control" with "RadHtmlChart" control so that our each Series-Item have its own tooltip. ?
Or can we have any click event associate with a point on a scatter series so that we can pop up a window with details(that we want to show)

Regard's
Keith.

answered on 22 Aug 2014, 01:29 PM

design-time.png

Hi Keith,

I have already answered your support ticket on the matter and I am pasting my answer here for anyone else having the same query:

You can set the ClientTemplate from the server for each series, because it is a simple property of type string, e.g.:

Copy Code

Dim ss As ScatterSeries = New ScatterSeries()

ss.TooltipsAppearance.ClientTemplate = "#=dataItem.field1# <br /> #=dataItem.field2#"

This property is also available in the design-time wizard of the chart ( http://www.telerik.com/help/aspnet-ajax/htmlchart-design-time-using-visual-designer.html ) and I am attaching a screenshot of that as well.

On using RadToolTip - such an integration is not possible because the chart renders as a markup image (VML or SVG) and the tooltip control cannot get hold of its elements in order to attach the events it needs to show up or get their position in order to calculate its own.

You can use the following events:

OnClientSeriesItemHover ( http://www.telerik.com/help/aspnet-ajax/htmlchart-client-side-onclientserieshovered.html ) to get the needed data and show a popup (e.g., a RadWindow). Note that with Q3 2014 the way client-side events are attached will change slightly (although this will still be valid).
OR, the LegendItemHover Kendo event to show popups that you need, however: http://docs.telerik.com/kendo-ui/api/dataviz/chart#events-legendItemHover . because it exposes the data in a more efficient manner (the OnClientSeriesHovered is merely a wrapper over this original event). You can bind to it on the client, e.g.:

Copy Code

function pageLoad() {

var chart = $find( "<%=RadHtmlChart1.ClientID%>" )._chartObject;

chart.bind( "legendItemHover" , theEventHandler);

}

I hope this explains the case and help you move forward with your project.

Regards,

Regards, Marin Bratanov
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.