How to add NodeXL in the ASP.NET web page

Dec 31, 2012 at 4:42 AM

Is it possible to add nodeXL in the web page created by ASP.NET?

I want to show simple network diagram in the Web page using NodeXL.

I was able to show it in desktop application using C# and now want to show it in web page also.

If possible, how to do it?

 

Thanks in Advance.

Dec 31, 2012 at 5:11 AM

Yes, that's possible.  There is sample code for doing this within the "NodeXLVisual Class" topic in the NodeXLApi.chm help file that is included in the NodeXL Class Libraries download.  I'll copy the sample code in my next post.

-- Tony

Dec 31, 2012 at 5:14 AM

using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.IO;
using Smrf.NodeXL.Core;
using Smrf.NodeXL.Layouts;
using Smrf.NodeXL.Visualization.Wpf;
           
namespace WebApplication1
{
public partial class _Default : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
  const Int32 GraphWidth = 200;
  const Int32 GraphHeight = 100;
           
  // The graph will be written to the response stream as a Gif.
           
  Response.ContentType = "image/gif";
           
  // Create a graph.  The graph has no visual representation; it is just
  // a data structure.
                       
  Graph oGraph = new Graph(GraphDirectedness.Directed);
  IVertexCollection oVertices = oGraph.Vertices;
  IEdgeCollection oEdges = oGraph.Edges;
                       
  // Add three vertices.
                       
  IVertex oVertexA = oVertices.Add();
  oVertexA.Name = "Vertex A";
  IVertex oVertexB = oVertices.Add();
  oVertexB.Name = "Vertex B";
  IVertex oVertexC = oVertices.Add();
  oVertexC.Name = "Vertex C";
                       
  // Connect the vertices with directed edges.
                       
  IEdge oEdge1 = oEdges.Add(oVertexA, oVertexB, true);
  IEdge oEdge2 = oEdges.Add(oVertexB, oVertexC, true);
  IEdge oEdge3 = oEdges.Add(oVertexC, oVertexA, true);
                       
  // Synchronously lay out the graph using one of the NodeXL-supplied
  // layout objects.
                       
  ILayout oLayout = new FruchtermanReingoldLayout();
                       
  LayoutContext oLayoutContext = new LayoutContext(
   new Rectangle(0, 0, GraphWidth, GraphHeight) );
                       
  oLayout.LayOutGraph(oGraph, oLayoutContext);
           
  // Create an object that can render a NodeXL graph as a Visual.
           
  NodeXLVisual oNodeXLVisual = new NodeXLVisual();
           
  // Use the NodeXLVisual object's GraphDrawer to draw the graph onto the
  // Visual.
           
  GraphDrawingContext oGraphDrawingContext = new GraphDrawingContext(
   new Rect(0, 0, GraphWidth, GraphHeight), oLayout.Margin,
   System.Windows.Media.Color.FromRgb(255, 255, 255) );
           
  oNodeXLVisual.GraphDrawer.DrawGraph(oGraph, oGraphDrawingContext);
           
  // Convert the Visual to a Bitmap.
           
  RenderTargetBitmap oRenderTargetBitmap = new RenderTargetBitmap(
   GraphWidth, GraphHeight, 96, 96, PixelFormats.Default);
           
  oRenderTargetBitmap.Render(oNodeXLVisual);
  BmpBitmapEncoder oBmpBitmapEncoder = new BmpBitmapEncoder();
  oBmpBitmapEncoder.Frames.Add( BitmapFrame.Create(oRenderTargetBitmap) );
  MemoryStream oMemoryStream = new MemoryStream();
  oBmpBitmapEncoder.Save(oMemoryStream);
  Bitmap oBitmap = new Bitmap(oMemoryStream);
           
  // Write the Bitmap's contents to the response stream.
           
  oBitmap.Save(this.Response.OutputStream, ImageFormat.Gif);
 }
}
}

Feb 21, 2013 at 8:37 AM
Thanks,
Now i am able to draw network diagram in ASP.NET page.

As it seems it is creating an image file. So is it possible to have vertex click event as well in the network diagram shown in ASP.NET page in order to show the detail for selected vertex?
Feb 21, 2013 at 9:06 PM
It's just a static picture, so by itself there is no interactivity available for it.

It's conceivable that you (or someone else) could write some custom server-side .NET code that would read the Graph object and create a client-side HTML image map from it ( see http://www.w3schools.com/TAGS/tag_map.asp ), which you could then include on your ASP.NET page. The image map would have an "area" element for each of the graph's vertices, and you could execute client-side JavaScript when an area is clicked. However, there is nothing built into NodeXL that will do that for you.

-- Tony
Feb 22, 2013 at 3:19 AM
Thanks Tony

So vertex click event can only be implemented when using NodeXL for desktop application but cannot be implemented in web application?

If so, i will try to follow your suggestion and do it in web application using javascript.

-Ramesh
Feb 22, 2013 at 3:48 AM
Ramesh:

That is correct. The sample ASP.NET code that I posted in December creates nothing more than a static image, which has no vertex Click events, or any other events, for that matter. It creates a bitmap on the server and then sends the bitmap to the user's browser as a GIF. The browser knows nothing about NodeXL; it knows only how to display the image.

-- Tony