Article Rating

  • 0 Rating(s)
  • 0
  • 0
  • 0
  • 0
  • 0

Create ASP.NET diagram with tooltips and clickable nodes

Applies to: Nevron Diagram for .NET

How to create ASP.NET diagram with tooltips and clickable nodes?

The following example creates a relationship diagram with applied spring layout. By using the Nevron AJAX tools, we have set interactive cursor style, tooltips and URL redirection to the diagram nodes.



1. Create a new ASP.NET application.
2. If the current page view is Source, switch to Design.
3. Drag and drop the NDrawingView on the page.
4. Open the solution explorer and make sure to add references to the following Nevron assemblies: Nevron.Diagram.dll; Nevron.Diagram.Shapes.dll; Nevron.Diagram.Templates.dll; Nevron.Diagram.WebForm.dll; Nevron.Presentation.dll; Nevron.System.dll; and Nevron.UI.WebForm.Controls.dll;
5. From the Solution explorer select all Nevron references and set Copy Local property to True.
6. From the Solution explorer open the Web.config and make sure the following configuration exists in your web.config file:

<httpHandlers>
 <remove path="*.asmx" verb="*" />
 <add path="NevronDiagram.axd" verb="*" type="Nevron.Diagram.WebForm.NDiagramImageResourceHandler"
      validate="false" />
 <add path="NevronScriptManager.axd" verb="GET,HEAD" type="Nevron.UI.WebForm.Controls.NevronScriptManager"
      validate="false" />
 <add path="NevronScriptManager.axd" verb="*" type="Nevron.UI.WebForm.Controls.NevronScriptManager"
      validate="false" />
</httpHandlers>

7. From the Solution explorer open the Default.aspx Source and make sure the following configuration exists:

<%@ Register assembly="Nevron.Diagram.WebForm, Version=10.10.14.12, Culture=neutral, PublicKeyToken=95bcc3d41b0512e9" namespace="Nevron.Diagram.WebForm" tagprefix="ndwc" %>
  
<ndwc:NDrawingView ID="NDrawingView1" runat="server" Height="381px" Width="480px" 
        AjaxEnabled="True" AsyncCallbackTimeout="10000" AjaxImageMapMode="Auto" 
        OnQueryAjaxTools="NDrawingView1_QueryAjaxTools" 
        AsyncRequestWaitCursorEnabled="False">
</ndwc:NDrawingView>

8. From the Solution explorer right click on Default.aspx and select "View code".
9. Use the following code example to programmatically create the diagram:

[C#]
using Nevron.Diagram;
using Nevron.Diagram.DataStructures;
using Nevron.Diagram.Filters;
using Nevron.Diagram.Layout;
using Nevron.Diagram.Shapes;
using Nevron.Dom;
using Nevron.GraphicsCore;
using Nevron.UI.WebForm.Controls;
...
protected void Page_Load(object sender, EventArgs e)
{
    // display the document in the view
    NDrawingDocument Document = new NDrawingDocument();
    Document = NDrawingView1.Document;
    Document.BackgroundStyle.FrameStyle.Visible = false;
  
    Document.BeginInit();
    Document.Width = 1200;
    Document.Height = 1200;
    NDrawingView1.ViewLayout = CanvasLayout.Fit;
  
    Document.Style.TextStyle.TextFormat = TextFormat.XML;
    Document.Style.TextStyle.Offset = new NPointL(0, 50);
                              
    Document.Style.StartArrowheadStyle.Shape = ArrowheadShape.None;
    Document.Style.EndArrowheadStyle.Shape = ArrowheadShape.None;
  
    // configure shadow (inherited by all objects)
    Document.Style.ShadowStyle = new NShadowStyle(
        ShadowType.GaussianBlur,
        Color.FromArgb(150, Color.Black),
        new Nevron.GraphicsCore.NPointL(3, 3),
        1,
        new NLength(4)
        );
  
    Document.ShadowsZOrder = ShadowsZOrder.BehindDocument;
  
    // end document initialization
    Document.EndInit();
  
    // we will be using symbol shapes for this example
    NSymbolShapesFactory symbolShapesFactory = new NSymbolShapesFactory();
    symbolShapesFactory.DefaultSize = new NSizeF(100, 100);
      
    List<NPerson> persons = new List<NPerson>();
  
    // create persons
    NPerson personEmil = new NPerson("Emil Moore", @"http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.MaleFigure));
    NPerson personAndre = new NPerson("Andre Smith", @"http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.NewActor2));
    NPerson personRobert = new NPerson("Robert Johnson", @"http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.NewActor4));
    NPerson personBob = new NPerson("Bob Williams", @"http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.MaleFigure));
    NPerson personPeter = new NPerson("Peter Brown", @"http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.NewActor2));
    NPerson personSilvia = new NPerson("Silvia Moore", @"http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.FemaleFigure));
    NPerson personEmily = new NPerson("Emily Smith", @"http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.NewActor));
    NPerson personMonica = new NPerson("Monica Johnson", @"http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.NewActor3));
    NPerson personSamantha = new NPerson("Samantha Miller", @"http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.FemaleFigure));
    NPerson personIsabella = new NPerson("Isabella Davis", @"http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.NewActor));
      
    persons.Add(personEmil);
    persons.Add(personAndre);
    persons.Add(personRobert);
    persons.Add(personBob);
    persons.Add(personPeter);
    persons.Add(personSilvia);
    persons.Add(personEmily);
    persons.Add(personMonica);
    persons.Add(personSamantha);
    persons.Add(personIsabella);
      
    // create family relationships
    personEmil.m_Family = personSilvia;
    personAndre.m_Family = personEmily;
    personRobert.m_Family = personMonica;
  
    // create friend relationships
    personEmily.m_Friends.Add(personBob);
    personEmily.m_Friends.Add(personMonica);
  
    personAndre.m_Friends.Add(personPeter);
    personAndre.m_Friends.Add(personIsabella);
  
    personSilvia.m_Friends.Add(personBob);
    personSilvia.m_Friends.Add(personSamantha);
    personSilvia.m_Friends.Add(personIsabella);
  
    personEmily.m_Friends.Add(personIsabella);
    personEmily.m_Friends.Add(personPeter);
  
    personPeter.m_Friends.Add(personRobert);
  
    // create tooltip, URL redirect and cursor InteractivityStyle
    for (int i = 0; i < persons.Count; i++)
    { 
        NTooltipAttribute tooltipAttribute = new NTooltipAttribute(persons[i].m_Name, true);
        NUrlLinkAttribute redirectAttribute = new NUrlLinkAttribute(persons[i].m_Url, false);                
        NCursorAttribute cursorAttribute = new NCursorAttribute(CursorType.Hand);
  
        NInteractivityStyle style = new NInteractivityStyle(true);
                          
        style.InteractivityAttributes.Add(tooltipAttribute);
        style.InteractivityAttributes.Add(redirectAttribute);
        style.InteractivityAttributes.Add(cursorAttribute);
          
        persons[i].m_Shape.Style.InteractivityStyle = style;
                          
        NDrawingView1.Document.ActiveLayer.AddChild(persons[i].m_Shape);                
    }
  
    // create the family relations
    for (int i = 0; i < persons.Count; i++)
    {
        NPerson currentPerson = persons[i];
  
        if (currentPerson.m_Family != null)
        {
            NLineShape connector = new NLineShape();
            NDrawingView1.Document.ActiveLayer.AddChild(connector);
  
            connector.FromShape = currentPerson.m_Shape;
            connector.ToShape = currentPerson.m_Family.m_Shape;
  
            connector.LayoutData.SpringStiffness = 2;
            connector.LayoutData.SpringLength = 100;
            connector.Style.StrokeStyle = new NStrokeStyle(3, Color.Coral);
        }
    }
  
    for (int i = 0; i < persons.Count; i++)
    {
        NPerson currentPerson = persons[i];
        for (int j = 0; j < currentPerson.m_Friends.Count; j++)
        {
            NLineShape connector = new NLineShape();
            NDrawingView1.Document.ActiveLayer.AddChild(connector);
  
            connector.FromShape = currentPerson.m_Shape;
            connector.ToShape = currentPerson.m_Friends[j].m_Shape;
  
            connector.LayoutData.SpringStiffness = 1;
            connector.LayoutData.SpringLength = 200;
            connector.Style.StrokeStyle = new NStrokeStyle(3, Color.Green);
        }
    }
  
    // get the shapes to layout
    NNodeList shapes = Document.ActiveLayer.Children(NFilters.Shape2D);
  
    // create a layout context
    NLayoutContext layoutContext = new NLayoutContext();
    layoutContext.GraphAdapter = new NShapeGraphAdapter();
    layoutContext.BodyAdapter = new NShapeBodyAdapter(Document);
    layoutContext.BodyContainerAdapter = new NDrawingBodyContainerAdapter(Document);
  
    NSpringLayout layout = new NSpringLayout();
      
    // configure the optional forces
    layout.BounceBackForce.Padding = 80f;
    layout.GravityForce.AttractionCoefficient = 0.1f;
  
    layout.Layout(Document.ActiveLayer.Children(null), layoutContext);
    layout.Layout(shapes, new NDrawingLayoutContext(NDrawingView1.Document));
  
    // resize document to fit all shapes
    NDrawingView1.Document.SizeToContent();
}
  
protected void NDrawingView1_QueryAjaxTools(object sender, EventArgs e)
{
    // configure the client side tools
    NDrawingView1.AjaxTools.Add(new NAjaxTooltipTool(true));
    NDrawingView1.AjaxTools.Add(new NAjaxRedirectTool(true));
    NDrawingView1.AjaxTools.Add(new NAjaxDynamicCursorTool(true));
}
  
public class NPerson
{
    public NPerson(string name, string url, NShape shape)
    {
        m_Shape = shape;
        m_Shape.Text = name;
        m_Name = name;
        m_Friends = new List<NPerson>();
        m_Family = null;
        m_Url = url;
    }
  
    public NShape m_Shape;
    public string m_Name;
    public List<NPerson> m_Friends;
    public NPerson m_Family;
    public string m_Url;
}

[VB.NET]
Imports Nevron.Diagram
Imports Nevron.Diagram.DataStructures
Imports Nevron.Diagram.Filters
Imports Nevron.Diagram.Layout
Imports Nevron.Diagram.Shapes
Imports Nevron.Dom
Imports Nevron.GraphicsCore
Imports Nevron.UI.WebForm.Controls
...
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    ' display the document in the view
    Dim Document As New NDrawingDocument()
    Document = NDrawingView1.Document
    Document.BackgroundStyle.FrameStyle.Visible = False
  
    Document.BeginInit()
    Document.Width = 1200
    Document.Height = 1200
    NDrawingView1.ViewLayout = CanvasLayout.Fit
  
    Document.Style.TextStyle.TextFormat = TextFormat.XML
    Document.Style.TextStyle.Offset = New NPointL(0, 50)
  
    Document.Style.StartArrowheadStyle.Shape = ArrowheadShape.None
    Document.Style.EndArrowheadStyle.Shape = ArrowheadShape.None
  
    ' configure shadow (inherited by all objects)
    Document.Style.ShadowStyle = New NShadowStyle(ShadowType.GaussianBlur, Color.FromArgb(150, Color.Black), New Nevron.GraphicsCore.NPointL(3, 3), 1, New NLength(4))
  
    Document.ShadowsZOrder = ShadowsZOrder.BehindDocument
  
    ' end document initialization
    Document.EndInit()
  
    ' we will be using symbol shapes for this example
    Dim symbolShapesFactory As New NSymbolShapesFactory()
    symbolShapesFactory.DefaultSize = New NSizeF(100, 100)
  
    Dim persons As New List(Of NPerson)()
  
    ' create persons
    Dim personEmil As New NPerson("Emil Moore", "http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.MaleFigure))
    Dim personAndre As New NPerson("Andre Smith", "http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.NewActor2))
    Dim personRobert As New NPerson("Robert Johnson", "http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.NewActor4))
    Dim personBob As New NPerson("Bob Williams", "http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.MaleFigure))
    Dim personPeter As New NPerson("Peter Brown", "http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.NewActor2))
    Dim personSilvia As New NPerson("Silvia Moore", "http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.FemaleFigure))
    Dim personEmily As New NPerson("Emily Smith", "http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.NewActor))
    Dim personMonica As New NPerson("Monica Johnson", "http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.NewActor3))
    Dim personSamantha As New NPerson("Samantha Miller", "http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.FemaleFigure))
    Dim personIsabella As New NPerson("Isabella Davis", "http://www.nevron.com", symbolShapesFactory.CreateShape(SymbolShapes.NewActor))
  
    persons.Add(personEmil)
    persons.Add(personAndre)
    persons.Add(personRobert)
    persons.Add(personBob)
    persons.Add(personPeter)
    persons.Add(personSilvia)
    persons.Add(personEmily)
    persons.Add(personMonica)
    persons.Add(personSamantha)
    persons.Add(personIsabella)
  
    ' create family relationships
    personEmil.m_Family = personSilvia
    personAndre.m_Family = personEmily
    personRobert.m_Family = personMonica
  
    ' create friend relationships
    personEmily.m_Friends.Add(personBob)
    personEmily.m_Friends.Add(personMonica)
  
    personAndre.m_Friends.Add(personPeter)
    personAndre.m_Friends.Add(personIsabella)
  
    personSilvia.m_Friends.Add(personBob)
    personSilvia.m_Friends.Add(personSamantha)
    personSilvia.m_Friends.Add(personIsabella)
  
    personEmily.m_Friends.Add(personIsabella)
    personEmily.m_Friends.Add(personPeter)
  
    personPeter.m_Friends.Add(personRobert)
  
    ' create tooltip, URL redirect and cursor InteractivityStyle
    For i As Integer = 0 To persons.Count - 1
        Dim tooltipAttribute As New NTooltipAttribute(persons(i).m_Name, True)
        Dim redirectAttribute As New NUrlLinkAttribute(persons(i).m_Url, False)
        Dim cursorAttribute As New NCursorAttribute(CursorType.Hand)
  
        Dim style As New NInteractivityStyle(True)
  
        style.InteractivityAttributes.Add(tooltipAttribute)
        style.InteractivityAttributes.Add(redirectAttribute)
        style.InteractivityAttributes.Add(cursorAttribute)
  
        persons(i).m_Shape.Style.InteractivityStyle = style
  
        NDrawingView1.Document.ActiveLayer.AddChild(persons(i).m_Shape)
    Next
  
    ' create the family relations
    For i As Integer = 0 To persons.Count - 1
        Dim currentPerson As NPerson = persons(i)
  
        If currentPerson.m_Family IsNot Nothing Then
            Dim connector As New NLineShape()
            NDrawingView1.Document.ActiveLayer.AddChild(connector)
  
            connector.FromShape = currentPerson.m_Shape
            connector.ToShape = currentPerson.m_Family.m_Shape
  
            connector.LayoutData.SpringStiffness = 2
            connector.LayoutData.SpringLength = 100
            connector.Style.StrokeStyle = New NStrokeStyle(3, Color.Coral)
        End If
    Next
  
    For i As Integer = 0 To persons.Count - 1
        Dim currentPerson As NPerson = persons(i)
        For j As Integer = 0 To currentPerson.m_Friends.Count - 1
            Dim connector As New NLineShape()
            NDrawingView1.Document.ActiveLayer.AddChild(connector)
  
            connector.FromShape = currentPerson.m_Shape
            connector.ToShape = currentPerson.m_Friends(j).m_Shape
  
            connector.LayoutData.SpringStiffness = 1
            connector.LayoutData.SpringLength = 200
            connector.Style.StrokeStyle = New NStrokeStyle(3, Color.Green)
        Next
    Next
  
    ' get the shapes to layout
    Dim shapes As NNodeList = Document.ActiveLayer.Children(NFilters.Shape2D)
  
    ' create a layout context
    Dim layoutContext As New NLayoutContext()
    layoutContext.GraphAdapter = New NShapeGraphAdapter()
    layoutContext.BodyAdapter = New NShapeBodyAdapter(Document)
    layoutContext.BodyContainerAdapter = New NDrawingBodyContainerAdapter(Document)
  
    Dim layout As New NSpringLayout()
  
    ' configure the optional forces
    layout.BounceBackForce.Padding = 80F
    layout.GravityForce.AttractionCoefficient = 0.1F
  
    layout.Layout(Document.ActiveLayer.Children(Nothing), layoutContext)
    layout.Layout(shapes, New NDrawingLayoutContext(NDrawingView1.Document))
  
    ' resize document to fit all shapes
    NDrawingView1.Document.SizeToContent()
End Sub
  
Protected Sub NDrawingView1_QueryAjaxTools(sender As Object, e As EventArgs)
    ' configure the client side tools
    NDrawingView1.AjaxTools.Add(New NAjaxTooltipTool(True))
    NDrawingView1.AjaxTools.Add(New NAjaxRedirectTool(True))
    NDrawingView1.AjaxTools.Add(New NAjaxDynamicCursorTool(True))
End Sub
  
Public Class NPerson
    Public Sub New(name As String, url As String, shape As NShape)
        m_Shape = shape
        m_Shape.Text = name
        m_Name = name
        m_Friends = New List(Of NPerson)()
        m_Family = Nothing
        m_Url = url
    End Sub
  
    Public m_Shape As NShape
    Public m_Name As String
    Public m_Friends As List(Of NPerson)
    Public m_Family As NPerson
    Public m_Url As String
End Class

Article ID: 118, Created On: 11/9/2010, Modified: 12/1/2010