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

Mouse Over a Scatter Plot

8 Answers 207 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Piyush
Top achievements
Rank 1
Piyush asked on 06 Feb 2009, 11:56 PM
Hi,

This is an urgent need where I would like to retrieve values from a database, show them in my chart and do a mouse over on a specific point. When the mouse-over is done, my vb.net label should automatically update to include specific properties for that point.

How can I make this mouse-over effect feasible? Can I requst you to please provide samples for this. IF this is not feasible, whats the next biggest step to getting this accomplished?

8 Answers, 1 is accepted

Sort by
0
Vladimir Milev
Telerik team
answered on 09 Feb 2009, 07:53 AM
Hello Piyush,

Please check the attached project. It is fairly straightforward. Hope it helps and good luck!

Greetings,
Vladimir Milev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Piyush
Top achievements
Rank 1
answered on 09 Feb 2009, 03:30 PM
Can you send me the same thing in VB.NET?

I don't code in C#. Thanks.
0
Piyush
Top achievements
Rank 1
answered on 09 Feb 2009, 04:26 PM
Hi,

Shown below is my code but I keep getting errors with supplier the mouseover properties on each point in my chart.

<%

@ Page Language="VB" MaintainScrollPositionOnPostback="true" Debug = "True"%>

 

<%

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

 

<%

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

 

<!

 

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

 

<%

@ Import namespace="System.Data" %>

 

<%

@ Import namespace="System.Data.OleDb" %>

 

<%

@ Import namespace="System.Data.SqlClient" %>

 

<

 

script runat="server">

 

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

 

 

Dim intNumCombos As Integer

 

 

 

 

Dim strConnection As String = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" _

 

& Server.MapPath(

"TMapp.mdb")

 

 

Dim objConnection As New Data.OleDb.OleDbConnection(strConnection)

 

 

Dim strSQL As String = "SELECT Count(*) as CountCombos from Combos"

 

 

Dim objCommand As New Data.OleDb.OleDbCommand(strSQL, objConnection)

 

 

If objConnection.State = ConnectionState.Closed Then objConnection.Open()

 

 

Dim dbread As System.Data.OleDb.OleDbDataReader = objCommand.ExecuteReader()

 

 

While dbread.Read

 

intNumCombos =

CInt(dbread("CountCombos"))

 

 

End While

 

objConnection.Close()

 

 

'Read Data from Database

 

 

Dim i As Integer = 1

 

strConnection =

"Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("TMapp.mdb")

 

objConnection =

New Data.OleDb.OleDbConnection(strConnection)

 

strSQL =

"SELECT * from Combos Where ID >= " & i & " AND ID <= " & intNumCombos & ";"

 

 

Dim arrCostPV(2, intNumCombos)

 

objCommand =

New Data.OleDb.OleDbCommand(strSQL, objConnection)

 

objConnection.Open()

dbread = objCommand.ExecuteReader()

 

While dbread.Read

 

arrCostPV(1, i) = dbread(

"Cost")

 

arrCostPV(2, i) = dbread(

"PV")

 

i = i + 1

 

End While

 

 

objConnection.Close()

 

'Build Telerik Chart

 

 

Dim radchart As RadChart = Page.FindControl("RadChart1")

 

radchart.PlotArea.XAxis.AxisLabel.Visible =

True

 

radchart.PlotArea.YAxis.AxisLabel.Visible =

True

 

 

For i = 1 To intNumCombos

 

radchart.Series(0).AddItem(i - 1)

radchart.Series(0).Items(i - 1).XValue = arrCostPV(1, i)

radchart.Series(0).Items(i - 1).YValue = arrCostPV(2, i)

radchart.Series(0).Items(i - 1).Label.Visible =

False

 

radchart.Series(0).Items(i - 1).ActiveRegion.Attributes =

"onmouseover=\document.getElementById('TestLabel').innerHTML = '{0}'\"""

 

 

Next

 

 

End Sub

 

</

 

script>

 

<

 

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

 

<

 

head runat="server">

 

 

<title>Untitled Page</title>

 

</

 

head>

 

<

 

body>

 

 

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

 

 

<div style="text-align: center">

 

 

<telerik:radchart id="RadChart1" runat="server" defaulttype="Line" Height="400px" Width="900px">

 

<

 

ChartTitle>

 

<

 

TextBlock Text="Total Rewards Optimization Tool"></TextBlock>

 

 

<Appearance Position-AlignedPosition="Top">

 

 

</Appearance>

 

</

 

ChartTitle>

 

 

<Series>

 

 

<cc1:ChartSeries Name="Series 1" Type="Point">

 

 

<appearance>

 

<

 

FillStyle MainColor="213, 247, 255"></FillStyle>

 

</

 

appearance>

 

 

</cc1:ChartSeries>

 

 

</Series>

 

 

<PlotArea>

 

 

<XAxis>

 

 

<AxisLabel>

 

 

<TextBlock Text="Cost">

 

 

</TextBlock>

 

 

</AxisLabel>

 

 

</XAxis>

 

 

<DataTable Visible="True">

 

 

</DataTable>

 

 

<YAxis>

 

 

<AxisLabel>

 

 

<TextBlock Text="Perceived Value">

 

 

</TextBlock>

 

 

</AxisLabel>

 

 

</YAxis>

 

 

</PlotArea>

 

 

<Legend Visible="False">

 

 

<Appearance Visible="False">

 

 

</Appearance>

 

 

</Legend>

 

</

 

telerik:radchart>

 

 

<br />

 

 

<br />

 

 

 

</div>

 

 

</form>

 

</

 

body>

 

</

 

html>

 



Can I ask you to take a look at it and point me in the right direction with this?
0
Ves
Telerik team
answered on 10 Feb 2009, 08:13 AM
Hi Piyush,

Please, find attached the updated version of the page provided by Vladimir. It is now in VB.NET so you should be able to see the mechanism clearly. I have also added a tooltip.

In addition, I would like to point you to our online code converter, which will allow you to convert code from C# to VB and vice versa in seconds.

Kind regards,
Ves
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Piyush
Top achievements
Rank 1
answered on 10 Feb 2009, 11:05 PM
It works like a charm. Last question:

What if I want to update multiple labels rather than just 1 label and each label contains different items as a result of a mouse over?

In addition, I'm incorporating both Zooming and Scrolling into my chart but if I use the zooming and scrolling feature, my mouse-over label doesnt work. Do I need to use an UpdatePanel to get this resolved? What will I need to do so that if I zoom/scroll over a specific point, the label dynamically updates as well? (Currently, my label updates without zooming/scrolling functionality).

An Example in VB.NET would be great with all these requirements! Thanks :)
0
Ves
Telerik team
answered on 11 Feb 2009, 08:17 AM
Hello Piyush,

Updating a second label will only require placing that label in the page and adding another line of javascript code for updating it. Here is the updated VB.NET line of code, given there is a second label in the page with ID="TestLabel2"

chbBar.Series(0).Items(0).ActiveRegion.Attributes = String.Format("onmouseover=""document.getElementById('TestLabel').innerHTML = '{0}'; document.getElementById('TestLabel2').innerHTML = '{0}';""", chbBar.Series(0).Items(0).Name)

As for zoom/scroll -- I am afraid, currently  there is a limitation in RadChart: when zooming/scrolling functionality is enabled ActiveRegions are not supported, so mouse-over and tooltips will not work.

Best regards,
Ves
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Piyush
Top achievements
Rank 1
answered on 11 Feb 2009, 03:52 PM
Hi,

Please re-read my question. While you have partially given me an answer given that we can use multiple labels, the issue is that both labels update with the same information (i.e. 'TestLabel' and 'TestLabel2' update with <chbBar.Series(0).Items(0).Name> when its really pointless considering the intent is to update 'TestLabel' with lets say <chbBar.Series(0).Items(0).Name> and 'TestLabel2' with lets say <"This is a test with Counter Number " & i> where i denotes an integer counter value.

How can we somehow accomplish this? I attempted using the following lines:

chbBar.Series(0).Items(0).ActiveRegion.Attributes = String.Format("onmouseover=""document.getElementById('TestLabel').innerHTML = '{0}'""", chbBar.Series(0).Items(0).Name)

chbBar.Series(0).Items(0).ActiveRegion.Attributes = String.Format("onmouseover=""document.getElementById('TestLabel2').innerHTML = '{0}'""", i)

...and both labels don't update. Just my 'TestLabel2' updates when I was hoping for both 'TestLabel' and 'TestLabel2' to update.

I ask because we use quite a few labels and we'd like to update each label depending on a specific condition.
0
Ves
Telerik team
answered on 12 Feb 2009, 11:36 AM
Hi Piyush,

You can simply add another parameter to the String.Format method:
chbBar.Series(0).Items(0).ActiveRegion.Attributes = String.Format("onmouseover=""document.getElementById('TestLabel').innerHTML = '{0}'; document.getElementById('TestLabel2').innerHTML = '{1}';""", chbBar.Series(0).Items(0).Name, "Some other string here")

All the best,
Ves
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Chart (Obsolete)
Asked by
Piyush
Top achievements
Rank 1
Answers by
Vladimir Milev
Telerik team
Piyush
Top achievements
Rank 1
Ves
Telerik team
Share this question
or