There are some different possibilities. HTML5 provides two choices: Canvas or SVG. SVG which can be directly embedded in HTML and both can be manipulated using JavaScript, and Canvas graphics should be completely build with JavaScript from scratch. Please see:
https://en.wikipedia.org/wiki/Scalable_Vector_Graphics[
^],
https://developer.mozilla.org/en-US/docs/Web/SVG[
^],
https://en.wikipedia.org/wiki/HTML5[
^],
https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction[
^],
http://en.wikipedia.org/wiki/Html5_canvas[
^],
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API[
^],
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial[
^],
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes[
^].
Without one of these two advanced HTML features, other solutions looks really boring. You can create the diagrams on the fly using ASP.NET on server side; create bitmap resources out of data using
System.Drawing
,
System.Drawing.Imaging
and send them on postback in HTTP response. It would be much harder to make the diagram elements
interactive. You would have to handle mouse/keyboard events in JavaScript and create a postback on every smallest move. To send HTTP requests on such interactive moves, you can use AJAX. It will incur considerable performance costs. Nevertheless, such system do exists. The trend is to get away from such architectures and shift to client-side processing, which offers excellent performance. Such systems is one of the goals of the quick HTML/DOM/API standardization of browsers which takes place these days.
Please understand that the format of Quick Questions & Answers hardly allows us to seriously discuss modeling, data layers, UI architecture and other detail. This is all the matter of serious architectural, design and programming work, more then the matter of getting expert advice.
—SA