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

RadChart with Tooltips and Scrolling

8 Answers 197 Views

Chart (Obsolete)

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

8 Answers, 1 is accepted

answered on 19 Feb 2012, 05:02 AM

radchart-scrolling.png

I have a related question in regard to scrolling using a RadChart. We are currently using Telerik version 2009.01.0527.35 and are in need of adding horizontal scrolling. When I add the following line of coode:

<ClientSettings ScrollMode="XOnly" EnableZoom="false" />

the following problems appear:
1. a loading icon appears in the middle of the chart (see attached file) and remains there
2. the tooltips no longer appear when hovering over data points. If I take the above line of code out, the tooltips appear once again
3. the legend, the location of which is set to inside the plot area, no longer appears.
I have tried several other approaches in setting the scroll mode (both from code behind and in aspx file) but these problems still seem to come back.

I also have another question in regards to compatibility. We are currently using Visual Studio 2008 with .NET 3.5 and Telerik version 2009.01.0527.35. We are looking to migrate to VS 2010 and .NET 4.0. Is our current version of Telerik license compatible with the above tools or will we need to upgrade?

I appreciate your help for these 2 questions. If possible, I'd appreciate come code samples for question #1.

Rita

answered on 22 Feb 2012, 02:20 PM

Hello Tye,

Onto your questions:

We suppose you are using chart skin like Vista that does not apply background color to the PlotArea by default and that is why you are still seeing the loading image even after the data has been loaded. You can either set background to the PlotArea, or you can remove the loading image by applying the following css class in your page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.rchImgWrap div

{

background: url() !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<telerik:RadChart ID="RadChart1" runat="server" AutoLayout="true" Skin="Vista">

<ClientSettings ScrollMode="Both" />

<Legend Visible="False"></Legend>

</telerik:RadChart>

</div>

</form>

</body>

</html>

Interactivity features like tooltips and mouse click events are not supported when zooming / scrolling is enabled. This is a limitation of the control that cannot be worked around.
This again is a limitation of the control -- whenever zooming / scrolling is enabled, you need to position the legend outside of the plot area to see it.

As for your versioning question -- you should be able to use .NET3.5 assemblies in .NET4.0 applications without any issues but we would recommend upgrading to a more recent versions of the controls as v.2009.01.0527 is almost two years old now.

All the best,
Giuseppe
the Telerik team

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

answered on 24 Jun 2014, 07:58 AM

chart.png

hi
i am using rad chart
in that i have 2 series
1 is bar and another is line
now issue is that my data is aprox 6o
so all data are coming too near
so i have put scroll in that
its not working in it
and also tool tip is not working in it
i have attached my result snapshot
and also i want small step in x-axis and want space between bar
how to do that
1 is bar and another is line

answered on 27 Jun 2014, 07:24 AM

Hi Asutosh,

You can control the step through which x-axis labels will be plot through the XAxis.LabelStep property. Regarding the width of the bars you can control it through the Appearance-BarWidthPercent property. For example:
ASPX:

<telerik:RadChart ID="RadChart1" runat="server" Height="400px" Width="700px" AutoLayout="true">

<PlotArea>

<XAxis LabelStep="2">

</XAxis>

</PlotArea>

<Series>

<telerik:ChartSeries Type="Bar" Name="Series 1" Appearance-BarWidthPercent="40">

<Appearance ShowLabels="false"></Appearance>

</telerik:ChartSeries>

<telerik:ChartSeries Type="Line" Name="Series 2">

<Appearance ShowLabels="false"></Appearance>

</telerik:ChartSeries>

</Series>

<Legend Visible="false"></Legend>

</telerik:RadChart>

C#:

protected void Page_Load(object sender, EventArgs e)

{

int numSeriesItems = 60;

for (int i = 1; i < numSeriesItems; i++)

{

ChartSeriesItem csi1 = new ChartSeriesItem() { YValue = i };

ChartSeriesItem csi2 = new ChartSeriesItem() { YValue = i + 5 };

RadChart1.Series[0].Items.Add(csi1);

RadChart1.Series[1].Items.Add(csi2);

}

You may also find useful BarOverLapPercent and BarWidthPercent and LabelStep Property help articles.

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadChart with Tooltips and Scrolling

8 Answers, 1 is accepted