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
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.
Rank 1
I don't code in C#. Thanks.
Rank 1
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?
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.
Rank 1
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 :)
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.
Rank 1
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.
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.