We create a new JavaScript file named diagram.js in the Scripts folder of the project and reference it in the HTML.<\/p>\n
<a<\/span> href<\/span>=\"http:\/\/Scripts\/MindFusion.Diagramming.js<\/a>\">http:\/\/Scripts\/MindFusion.Diagramming.js<\/a<\/span>><\/pre>\nNow, in this file we make some namespace mapping to access easy the classes we need:<\/p>\n
var Diagram = MindFusion.Diagramming.Diagram;\nvar DiagramLink = MindFusion.Diagramming.DiagramLink;\nvar ShapeNode = MindFusion.Diagramming.ShapeNode;\nvar Style = MindFusion.Diagramming.Style;\nvar DashStyle = MindFusion.Drawing.DashStyle;\nvar Alignment = MindFusion.Diagramming.Alignment;\n\nvar Rect = MindFusion.Drawing.Rect;\nvar LayeredLayout = MindFusion.Graphs.LayeredLayout;\nvar LayoutDirection = MindFusion.Graphs.LayoutDirection;\n\n\/\/ a shortcut to the Events class\nvar Events = MindFusion.Diagramming.Events;\n\n<\/pre>\nThe code for the diagram does not need to be in a single method call, so we’ll use the document.ready event handler:<\/p>\n
$(document).ready(function () {\n\n\/\/ create a Diagram component that wraps the \"diagram\" canvas\ndiagram = MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, $(\"#diagram\")[0]);\n\/\/set both base and head link shape size\ndiagram.setLinkHeadShapeSize(2);\ndiagram.setLinkBaseShapeSize(2);\ndiagram.setLinkBaseShape(MindFusion.Diagramming.Shape.fromId(\"Arrow\"));\n................\n\n});\n\n<\/pre>\nAs with the line chart, we create a diagram object using the canvas id from the html page. Then we make some link customization: we set the base and head shape with setBaseShape<\/a> and setHeadShape<\/a> to “Arrow” to indicate that data flows in two directions between servers.<\/p>\nNow let’s use a Style<\/a> instance to set the stroke, text color and font name. Then we set the link style this way:<\/p>\n\/\/customize the link appearance\nvar linkStyle = new Style();\nlinkStyle.setStroke(\"#c0c0c0\");\nlinkStyle.setTextColor(\"#585A5C\");\nlinkStyle.setFontName(\"Verdana\");\nlinkStyle.setFontSize(3);\ndiagram.setStyle(linkStyle);\n\n<\/pre>\nWhen users click on the diagram it is important not to allow them to create new links and nodes. That’s why we use setBehavior<\/a> to change the default way the diagram responds to user actions:<\/p>\n\/\/diagram items can only be selected\ndiagram.setBehavior(MindFusion.Diagramming.Behavior.SelectOnly);\n\n<\/pre>\nWe create the graph in the buildDiagram method. First, we call clearAll<\/a> to remove all diagram items to make sure only nodes we’ve created are visible:<\/p>\n\/\/generate diagram nodes\nfunction buildDiagram() {\n diagram.clearAll();\n\n};\n\n<\/pre>\nII. Diagram Items<\/strong><\/p>\nLet’s create the diagram nodes. We use png icons we’ve saved in an “icons” folder in the website. The background of each node is transparent ( setTransparent<\/a> ), which means only the image will be visible. Then we add the node to the items of the diagram:<\/p>\nvar rect = new Rect(0, 0, 15, 15);\n\nvar node = new ShapeNode(diagram);\nnode.setBounds(rect);\n\/\/the web server\nnode.setImageLocation(\"icons\/web_server.png\");\nnode.setTransparent(true);\ndiagram.addItem(node);\n\n<\/pre>\nWe create similar nodes for the data server, the clients and the network servers. The links are created with the DiagramLink<\/a> class. The constructor takes the origin and target node of the link as parameters. We set an setId<\/a> to the links, which is important and we add a label<\/a> :<\/p>\n\/\/add a link between the client and the server\nvar link = new DiagramLink(\n diagram, node, diagram.nodes[0]);\n\/\/same as the title of a given chart series\nlink.setId(\"Client\" + i);\nlink.addLabel(\"Client\" + i);\ndiagram.addItem(link);\n\n<\/pre>\nLet’s not forget to emphasize the two links<\/a> that correspond to the two series that are initially emphasized on the chart:<\/p>\n\/\/bolden the two major links\ndiagram.links[5].setStrokeThickness(2.0);\ndiagram.links[8].setStrokeThickness(2.0);\n\n<\/pre>\nIII. Layout<\/strong><\/p>\nWe’ve created the diagram items but we need to arrange them. We use the LayeredLayout<\/a> algorithm:<\/p>\n\/\/the layeredLayout arranges the diagram properly - into layers\nfunction applyLayeredLayout() {\n var layout = new LayeredLayout();\n layout.direction = LayoutDirection.TopToBottom;\n layout.siftingRounds = 0;\n layout.nodeDistance = 20;\n layout.layerDistance = 20;\n diagram.arrange(layout);\n diagram.resizeToFitItems();\n}\n\n<\/pre>\nAs you see it is very easy to apply a layout with the diagramming control. You just create an instance of the layout, set the properties of your choice and call arrange<\/a> (). In our case we need the layout direction to be LayoutDirection.TopToBottom<\/a> We also adjust the nodeDistance<\/a> and layerDistance<\/a> and set the number of siftingRounds<\/a> (attempts to unwind split links) to 0.<\/p>\nIV. Events<\/strong><\/p>\nThe diagram is meant to be interactive. We use the linkSelected<\/a> and clicked<\/a> events to handle selection of links and click on an area of the diagram, unoccupied by any items.<\/p>\n\/\/ add listeners\ndiagram.addEventListener(Events.linkSelected, onLinkSelected);\ndiagram.addEventListener(Events.clicked, onClicked);\n\n<\/pre>\nWhen a link is selected, we need to emphasize the line graphic that corresponds to this link. We also emphasize the link itself. In addition, we must adjust the stroke and thickness of the other line graphs and diagram links. We do this in the onLinkSelected method:<\/p>\n
\/\/handle the linkSelected event\nfunction onLinkSelected(sender, args) {\n\n \/\/get the style of the series\n var seriesStyle = lineChart.plot.seriesStyle;\n seriesStyle.strokeThicknesses.clear();\n\n \/\/thicken just the selected series, the others should be transparent\n for (var j = 0; j < lineChart.series.count() ; j++) {\n seriesStyle.strokeThicknesses.add(0.15);\n diagram.links[j].setStrokeThickness(1.0);\n }\n.....\n}\n\n\n<\/pre>\nFirst we get the series style and then we use setStrokeThickness<\/a> to reset the thickness of diagram links and series to their default values. After we’ve done that we need to get the selected links and emphasize them:<\/p>\n\/\/bolden all selected links in the diagram as well\nfor (var m = 0; m < diagram.selection.links.length; m++) {\n var clickedLinkId = diagram.selection.links[m].getId();\n diagram.selection.links[m].setStrokeThickness(3.0);\n\n<\/pre>\nWhen we’ve done that we need to find the series that correspond to these links and emphasize them as well:<\/p>\n
\/\/find the series that correspond to the selected links\nfor (var i = 0; i < lineChart.series.count() ; i++) {\n var _series = lineChart.series.item(i);\n\n\n \/\/adjust the stroke thicknesses\n if (_series.title == clickedLinkId) {\n\n seriesStyle.strokeThicknesses.removeAt(i);\n seriesStyle.strokeThicknesses.insert(i, 3);\n }\n\n }\n\n<\/pre>\nAll this is followed by a call to the draw method that repaints the chart.<\/p>\n
\/\/repaint the chart\nlineChart.draw();\n\n<\/pre>\nThe next event handler – the onClicked method resets the thicknesses to their default values:<\/p>\n
\/\/reset the chart thicknesses\nfunction onClicked(sender, args) {\n resetThicknesses();\n\n}\n\n<\/pre>\nThis is done in the resetThicknesses method, which uses the seriesStyle field of the line chart:<\/p>\n
\/* bolden the two major series, the others should be very thin.\nbolden the two major diaglinks as well. *\/\nfunction resetThicknesses() {\n var seriesStyle = lineChart.plot.seriesStyle;\n seriesStyle.strokeThicknesses.clear();\n\n for (var j = 0; j < 5; j++) {\n seriesStyle.strokeThicknesses.add(0.15);\n diagram.links[j].setStrokeThickness(1.0);\n }\n.......\n}\n\n\n<\/pre>\nV. Tyre Separators<\/strong><\/p>\nThe diagram is divided into three parts by three separator lines. These lines are unconnected DiagramLink<\/a> instances that have no head and base shape and have a custom position for the label. We use absolute positioning to locate the arrows. To do this we need to know the current size of the diagram:<\/p>\n\/\/add the separators for the tyres\n\/\/first get the size of the diagram\nvar width = diagram.getBounds().width;\nvar height = diagram.getBounds().height;\n\n<\/pre>\nThen the separator link is created with both origin and destination node being null:<\/p>\n
\/\/separator for the Clients tyre\n\/\/the link starts from the left edge and eds to the right edge of the digram\nvar link = new DiagramLink(\n\t\tdiagram, new MindFusion.Drawing.Point(2, (height \/ 3.5)),\n new MindFusion.Drawing.Point(width, (height \/ 3.5)));\nlink.setShadowOffsetX(0);\nlink.setShadowOffsetY(0);\nlink.setStrokeDashStyle(DashStyle.Dash);\nlink.setStroke(\"#DCDCDC\");\n\/\/remove the shapes at both ends\nlink.setHeadShape(null);\nlink.setBaseShape(null);\n\/\/do not allow this link to be selected\nlink.setLocked(true);\n\/\/move the link label to the right\nvar linkLabel = link.addLabel(\"Clients\");\nlinkLabel.setControlPointPosition(1, -5, 0);\ndiagram.addItem(link);\n\n<\/pre>\nNote that we’ve used the setLocked<\/a> property of the link and have set it to true. This means the link cannot participate in user interaction – it can’t be selected, moved, resized. That’s what we want.<\/p>\nAnd with this our sample server load application is ready. Once again, here is how it looks:<\/p>\n
![\"Server](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/05\/server-load-monitor.png\")
<\/a>Server Load Application in JavaScript<\/p><\/div>\n
Run The Application<\/a><\/p>\nUse this link to download the full sample with all necessary libraries and scripts.<\/p>\n
Download Source Code<\/a><\/p>\nYou can also fork it from GitHub.<\/a><\/p>\nVisit the web pages of the diagramming<\/a> and charting (with gauges)<\/a> JavaScript libraries to learn more about these tools. Visit the MindFusion forums<\/a> if you need technical support or want to ask further questions about MindFusion developer tools.<\/p>\n","protected":false},"excerpt":{"rendered":"We continue the ServerLoad tutorial with the diagram. I. Create and Style The Diagram We create a new JavaScript file named diagram.js in the Scripts folder of the project and reference it in the HTML. <a href=”http:\/\/Scripts\/MindFusion.Diagramming.js”>http:\/\/Scripts\/MindFusion.Diagramming.js<\/a> Now, in this … Continue reading