Mouse Over a Scatter Plot

Thread is closed for posting
9 posts, 0 answers
  1. Piyush
    Piyush avatar
    10 posts
    Member since:
    Jan 2009

    Posted 06 Feb 2009 Link to this post

    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?
  2. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 09 Feb 2009 Link to this post

    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.
  3. Piyush
    Piyush avatar
    10 posts
    Member since:
    Jan 2009

    Posted 09 Feb 2009 Link to this post

    Can you send me the same thing in VB.NET?

    I don't code in C#. Thanks.
  4. Piyush
    Piyush avatar
    10 posts
    Member since:
    Jan 2009

    Posted 09 Feb 2009 Link to this post

    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?
  5. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 10 Feb 2009 Link to this post

    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.
  6. Piyush
    Piyush avatar
    10 posts
    Member since:
    Jan 2009

    Posted 10 Feb 2009 Link to this post

    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 :)
  7. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 11 Feb 2009 Link to this post

    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.
  8. Piyush
    Piyush avatar
    10 posts
    Member since:
    Jan 2009

    Posted 11 Feb 2009 Link to this post

    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.
  9. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 12 Feb 2009 Link to this post

    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.
Back to Top