A JavaScript Application for Server Load Monitoring (Continued)

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 file we make some namespace mapping to access easy the classes we need:

var Diagram = MindFusion.Diagramming.Diagram;
var DiagramLink = MindFusion.Diagramming.DiagramLink;
var ShapeNode = MindFusion.Diagramming.ShapeNode;
var Style = MindFusion.Diagramming.Style;
var DashStyle = MindFusion.Drawing.DashStyle;
var Alignment = MindFusion.Diagramming.Alignment;

var Rect = MindFusion.Drawing.Rect;
var LayeredLayout = MindFusion.Graphs.LayeredLayout;
var LayoutDirection = MindFusion.Graphs.LayoutDirection;

// a shortcut to the Events class
var Events = MindFusion.Diagramming.Events;

The code for the diagram does not need to be in a single method call, so we’ll use the document.ready event handler:


$(document).ready(function () {

// create a Diagram component that wraps the "diagram" canvas
diagram = MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, $("#diagram")[0]);
//set both base and head link shape size
diagram.setLinkHeadShapeSize(2);
diagram.setLinkBaseShapeSize(2);
diagram.setLinkBaseShape(MindFusion.Diagramming.Shape.fromId("Arrow"));
................

});

As 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 and setHeadShape to “Arrow” to indicate that data flows in two directions between servers.

Now let’s use a Style instance to set the stroke, text color and font name. Then we set the link style this way:


//customize the link appearance
var linkStyle = new Style();
linkStyle.setStroke("#c0c0c0");
linkStyle.setTextColor("#585A5C");
linkStyle.setFontName("Verdana");
linkStyle.setFontSize(3);
diagram.setStyle(linkStyle);

When users click on the diagram it is important not to allow them to create new links and nodes. That’s why we use setBehavior to change the default way the diagram responds to user actions:


//diagram items can only be selected
diagram.setBehavior(MindFusion.Diagramming.Behavior.SelectOnly);

We create the graph in the buildDiagram method. First, we call clearAll to remove all diagram items to make sure only nodes we’ve created are visible:


//generate diagram nodes
function buildDiagram() {
 diagram.clearAll();

};

II. Diagram Items

Let’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 ), which means only the image will be visible. Then we add the node to the items of the diagram:


var rect = new Rect(0, 0, 15, 15);

var node = new ShapeNode(diagram);
node.setBounds(rect);
//the web server
node.setImageLocation("icons/web_server.png");
node.setTransparent(true);
diagram.addItem(node);

We create similar nodes for the data server, the clients and the network servers. The links are created with the DiagramLink class. The constructor takes the origin and target node of the link as parameters. We set an setId to the links, which is important and we add a label :

//add a link between the client and the server
var link = new DiagramLink(
       diagram, node, diagram.nodes[0]);
//same as the title of a given chart series
link.setId("Client" + i);
link.addLabel("Client" + i);
diagram.addItem(link);

Let’s not forget to emphasize the two links that correspond to the two series that are initially emphasized on the chart:


//bolden the two major links
diagram.links[5].setStrokeThickness(2.0);
diagram.links[8].setStrokeThickness(2.0);

III. Layout

We’ve created the diagram items but we need to arrange them. We use the LayeredLayout algorithm:


//the layeredLayout arranges the diagram properly - into layers
function applyLayeredLayout() {
    var layout = new LayeredLayout();
    layout.direction = LayoutDirection.TopToBottom;
    layout.siftingRounds = 0;
    layout.nodeDistance = 20;
    layout.layerDistance = 20;
    diagram.arrange(layout);
    diagram.resizeToFitItems();
}

As 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 (). In our case we need the layout direction to be LayoutDirection.TopToBottom We also adjust the nodeDistance and layerDistance and set the number of siftingRounds (attempts to unwind split links) to 0.

IV. Events

The diagram is meant to be interactive. We use the linkSelected and clicked events to handle selection of links and click on an area of the diagram, unoccupied by any items.


// add listeners
diagram.addEventListener(Events.linkSelected, onLinkSelected);
diagram.addEventListener(Events.clicked, onClicked);

When 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:


//handle the linkSelected event
function onLinkSelected(sender, args) {

    //get the style of the series
    var seriesStyle = lineChart.plot.seriesStyle;
    seriesStyle.strokeThicknesses.clear();

    //thicken just the selected series, the others should be transparent
    for (var j = 0; j &lt; lineChart.series.count() ; j++) {
        seriesStyle.strokeThicknesses.add(0.15);
        diagram.links[j].setStrokeThickness(1.0);
    }
.....
}


First we get the series style and then we use setStrokeThickness 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:


//bolden all selected links in the diagram as well
for (var m = 0; m &lt; diagram.selection.links.length; m++) {
     var clickedLinkId = diagram.selection.links[m].getId();
     diagram.selection.links[m].setStrokeThickness(3.0);

When we’ve done that we need to find the series that correspond to these links and emphasize them as well:


//find the series that correspond to the selected links
for (var i = 0; i &lt; lineChart.series.count() ; i++) {
      var _series = lineChart.series.item(i);


      //adjust the stroke thicknesses
      if (_series.title == clickedLinkId) {

          seriesStyle.strokeThicknesses.removeAt(i);
          seriesStyle.strokeThicknesses.insert(i, 3);
      }

   }

All this is followed by a call to the draw method that repaints the chart.


//repaint the chart
lineChart.draw();

The next event handler – the onClicked method resets the thicknesses to their default values:


//reset the chart thicknesses
function onClicked(sender, args) {
    resetThicknesses();

}

This is done in the resetThicknesses method, which uses the seriesStyle field of the line chart:


/* bolden the two major series, the others should be very thin.
bolden the two major diaglinks as well. */
function resetThicknesses() {
   var seriesStyle = lineChart.plot.seriesStyle;
   seriesStyle.strokeThicknesses.clear();

   for (var j = 0; j &lt; 5; j++) {
      seriesStyle.strokeThicknesses.add(0.15);
      diagram.links[j].setStrokeThickness(1.0);
   }
.......
}


V. Tyre Separators

The diagram is divided into three parts by three separator lines. These lines are unconnected DiagramLink 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:


//add the separators for the tyres
//first get the size of the diagram
var width = diagram.getBounds().width;
var height = diagram.getBounds().height;

Then the separator link is created with both origin and destination node being null:


//separator for the Clients tyre
//the link starts from the left edge and eds to the right edge of the digram
var link = new DiagramLink(
		diagram, new MindFusion.Drawing.Point(2, (height / 3.5)),
        new MindFusion.Drawing.Point(width, (height / 3.5)));
link.setShadowOffsetX(0);
link.setShadowOffsetY(0);
link.setStrokeDashStyle(DashStyle.Dash);
link.setStroke("#DCDCDC");
//remove the shapes at both ends
link.setHeadShape(null);
link.setBaseShape(null);
//do not allow this link to be selected
link.setLocked(true);
//move the link label to the right
var linkLabel = link.addLabel("Clients");
linkLabel.setControlPointPosition(1, -5, 0);
diagram.addItem(link);

Note that we’ve used the setLocked 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.

And with this our sample server load application is ready. Once again, here is how it looks:

Server Load Application in JavaScript

Server Load Application in JavaScript

Run The Application

Use this link to download the full sample with all necessary libraries and scripts.

Download Source Code

You can also fork it from GitHub.

Visit the web pages of the diagramming and charting (with gauges) JavaScript libraries to learn more about these tools. Visit the MindFusion forums if you need technical support or want to ask further questions about MindFusion developer tools.

JS Chart: Getting Started

This is step-by-step tutorial on how to setup a JavaScript chart using MindFusion JS Chart library. In the sample here we will use a pie chart but the steps are applicable to any type of chart with small modifications.

The video for this tutorial is uploaded on YouTube at https://www.youtube.com/watch?v=kc1nNe4p770

I. The Web Page

Basically, our sample consists of an HTML file and a Scripts folder, which will hold all used *.js files. In the web page that will hold the control we add two JS references.

The first one is the config file:


 <script type="text/javascript" src="Scripts/config.js"></ script>

config.js contains information about the paths to js libraries used by the charts and gauges, including jquery. You should check it and edit the paths if necessary. The reference to config.js should be placed before the reference to require.js, which comes next:


<script data-main="Scripts/PieChart" src="Scripts/require.js"></script>

We will define our chart in a PieChart.js file that we will place in the Scripts folder.

In the body of the file we create a div that holds a canvas.


<div style="position: absolute; left: 0px; top: 100px; bottom: 0px; right: 0px">
         <canvas id="pieChart" width="800" height="600"></canvas>
<div>

The canvas renders the chart and we will access and use it in the JavaScript file. That’s why it is important that the canvas has an id.

II. Setup of the *.JS File

In the PieChart.js file we create a single method that will be responsible for building and customizing the chart:


define(["require", "exports", 'MindFusion.Charting'], function (require, exports, m) {
....
}

The first few lines define variables used to reference various chart namespaces:


var Charting = m.MindFusion.Charting;
var Controls = m.MindFusion.Charting.Controls;
var Collections = m.MindFusion.Charting.Collections;
var Drawing = m.MindFusion.Charting.Drawing;

III. General Chart Settings

We create the chart from the canvas in the HTML file.


var pieChart = new Controls.PieChart( document.getElementById('pieChart'));

Then we set a title for the chart and we increase the font size for the title:


pieChart.title = "Corporate Sales";
pieChart.theme.titleFontSize = 24;	

IV. Series

The pie chart holds a single PieSeries.. For it we need data, inner and outer labels.
The data is a list with numbers:


var values = new Collections.List([20, 30, 10, 40, 35]);

The labels are a list with strings. Here is how we create the series:


pieChart.series = new Charting.PieSeries( values, null, new Collections.List(["a", "b", "c", "d", "e"]));

If you run the chart now you’ll see the pie with labels painted in a light green color.

initial-js-chart

So, we need

V. Styling

The styling includes brushes for the pie pieces:


var brushes = new Collections.List([
new Drawing.Brush("#081b67"),
new Drawing.Brush("#cc2020"),
new Drawing.Brush("#7D7D7D"),
new Drawing.Brush("#67a6c7"),
new Drawing.Brush("#d0d0d0")
    ]);
var seriesBrushes = new Collections.List();
   seriesBrushes.add(brushes);

a single pie pen:


var pens = new Collections.List([
     new Drawing.Brush("#ffffff")
]);
var seriesPens = new Collections.List();
 seriesPens.add(pens);

a thickness for the pie pen:


var thicknesses = new Collections.List([
        15
		
]);

var seriesThicknesses = new Collections.List();
seriesThicknesses.add(thicknesses);

and a DashStyle for it:


var dashStyles = new Collections.List([
        Drawing.DashStyle.Solid
]);
var seriesDashStyles = new Collections.List();
  seriesDashStyles.add(dashStyles);

We could have set different pens, thicknesses and DashStyle for each pie piece, but we want all the pieces to be outlined with a single pen.

Note that those settings are of type array and are nested in another array. That is because the styling might apply to multi-series charts and each array is responsible for styling the elements of each series.

In our sample we style the pie chart with a PerElementSeriesStyle object, which we assign to the seriesStyle property:


pieChart.plot.seriesStyle = new Charting.PerElementSeriesStyle(seriesBrushes, seriesPens, seriesThicknesses, seriesDashStyles);

VI. Legend

The legend needs to be styled – the background, border and title need to be specified and customized to make it look better.

The legend title is a property of the chart.


pieChart.legendTitle = "Period";

The styling settings for a legend can be accessed through the theme property:


pieChart.theme.legendBackground = new Drawing.Brush("#ffffff");
pieChart.theme.legendBorderStroke = new Drawing.Brush("#cecece");
pieChart.theme.legendBorderStrokeThickness = 1.0;
pieChart.theme.legendTitleFontSize = 16;

The legend label is read from the title of each series in the chart. In our case we use:


pieChart.series.title = "2016";

With this our chart is complete. A hint: if you want to make the pie labels from inner to outer, you just need to change the position of the null value in the PieSeries constructor.

JS Pie Chart

JS Pie Chart

Download Sample

MindFusion JS Chart is an interactive library for charts and gauges written purely in JavaScript. It supports all common chart types, multiple series, custom data,financial charts, a large selection of gauges and rich styling capabilities. The elegant architecture of the library allows you to create dashboards, charts with multiple different types of series in a single plot, unlimited number of axes, reusable styling themes, various oval and linear gauges. The innovative approach to data lets you define your own data classes by implementing a single interface.
The library also boasts a rich event set, zoom, pan, dragging of the legend and a set of many popular gauges. It is designed and implemented to provide JS developers with the perfect tool to create beautiful, interactive dashboards fast and easy. Download trial directly at http://mindfusion.eu/JavaScript.Chart.zip Get your license today at http://www.javascript-chart-buy.html