![\"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>\n The chart shows number of users on a given connection between two stations in the network at each moment. The graphic includes data for the last 30 seconds. The diagram shows the servers and clients that build the network. By default the charts shows data only for the two most important connections, out of total 10. Users can select different connections and view their graphics. The gauge control<\/a> provides data for the average count of users at any given moment.<\/p>\n I. Project Setup<\/strong><\/p>\n We create an empty website and add a Scripts folder with the necessary files:<\/p>\n and a reference to jQuery<\/a> or the jQuery library itself:<\/p>\n We create a blank HTML file and we create three HTML Canvas<\/a> elements – one for each of the controls: chart<\/a>, diagram<\/a>, gauge<\/a>.<\/p>\n We use the Flexbox layout<\/a> and we create a CSS file referenced by the index.html file where we write the CSS settings for the layout:<\/p>\n \u00a0<\/p>\n We initialize a section region that would have a Flexbox<\/a> layout:<\/p>\n \u00a0<\/p>\n The CSS class used for <div> elements inside <section>:<\/p>\n We specify that the first column on the second row would be twice wider than the other column. This is the diagram, and the other column is occupied by the gauge.<\/p>\n \u00a0<\/p>\n That’s how the HTML uses the CSS attributes:<\/p>\n Note the id=”lineChart”<\/strong> attribute – we will use the id to initialize the LineChart<\/a> object in the *.js file. The diagram and gauge Canvas instances also have id-s.<\/p>\n At the end of the index.html we include a reference to the require.js file to load the chart and gauge libraries this way:<\/p>\n Note:<\/strong> Internet Explorer might not load properly the JavaScript libraries if they are declared at the beginning of the file, (in the head section) before the initialization of the Canvas-es. Therefore it is best to put the script references at the bottom, right before the closing <\/body> tag.<\/p>\n II. The Gauge<\/strong><\/p>\n The code for the OvalGauge<\/a> and the LineChart<\/a> is in a single method:<\/p>\n \u00a0<\/p>\n Before the method we declare a global variable for the LineChart.<\/a> We need to access it in the diagram file so it must have a global visibility.<\/p>\n The OvalGauge control is created using the id of the HTML Canvas:<\/p>\n \u00a0<\/p>\n We will use two Events<\/a> – raised before the background was painted and before the pointer was painted – to customize how the gauge background and pointer look.<\/p>\n \u00a0<\/p>\n The gauge needs a scale – we create an OvalScale<\/a> and set its min and max value:<\/p>\n \u00a0<\/p>\n We will also set all three types of settings on the scale – MajorTickSettings,<\/a> MiddleTickSettings<\/a> and MinorTickSettings<\/a><\/p>\n \u00a0<\/p>\n A CustomInterval<\/a> at the MajorTickSettings<\/a> indicates a special range. We will use one to paint in red the portion on the scale that corresponds to the high amount of users:<\/p>\n \u00a0<\/p>\n Then we customize the MajorTickSettings,<\/a> the MiddleTickSettings<\/a> and MinorTickSettings<\/a>:<\/p>\n \u00a0<\/p>\n The scale shows a Range<\/a>: that is a visual indication of regions on the gauge. It is determined by its setMinValue<\/a> and setMaxValue<\/a> values and in our case we will show it on the whole gauge:<\/p>\n \u00a0<\/p>\n That’s how we handle the PrepaintBackground event<\/a> to draw custom background for the gauge:<\/p>\n \u00a0<\/p>\n The code that handles the prepaint pointer event<\/a> is similar. The value of the Pointer<\/a> is set this way:<\/p>\n \u00a0<\/p>\n When the last chart values changes – each second – we update the pointer value:<\/p>\n \u00a0<\/p>\n III. The Chart<\/strong><\/p>\n First we create the LineChart<\/a> object from the Canvas that we have initialized in the HTML. We take the width and height of the control from its parent container:<\/p>\n \u00a0<\/p>\n The data for the line series is stored in 10 Series2D<\/a> instances. For each of them we need a list with the X and Y values. The X-values are the same for all series, the Y-values are randomly generated numbers. All of them are instances of the List<\/a> class:<\/p>\n \u00a0<\/p>\n Here we fill the xValues list with numbers:<\/p>\n \u00a0<\/p>\n The setXLabels method takes care of the custom labels at the X-axis. At each 3rd call, it removes the first three values and adds three new ones: one with the current time stamp and two more as empty strings.<\/p>\n \u00a0<\/p>\n We create the Series2D<\/a> instances and add them to the Series<\/a> property of the line chart:<\/p>\n \u00a0<\/p>\n The xLables are assigned just to the first series, they will serve as labels source for the X-axis.To show them, we must first hide the coordinates and assign them to the xAxis:<\/p>\n \u00a0<\/p>\n then we must “tell” the first series that its labels are used for the XAxis:<\/p>\n \u00a0<\/p>\n We use the title property of a Series object to identify the series. That’s why we assign to them unique labels:<\/p>\n \u00a0<\/p>\n Since it is going to be a long chart, we want a second Y-axis to appear to the right. That can be done by adding another YAxisRenderer<\/a> with the same yAxis to the components rendered by default by the LineChart control. We add the new YAxisRenderer<\/a> to a vertical StackPanel<\/a>:<\/p>\n \u00a0<\/p>\n The layout manager for a LineChart is a Grid<\/a> panel. We add a new column to it, where the second Y-axis will be rendered. Then we add the StackPanel<\/a> with the YAxisRenderer to this column. Next we add the yAxis<\/a> and we specify that the plot is not to the left side of it:<\/p>\n \u00a0<\/p>\n Then we customize the grid and trigger the timer that will update the data values at each second:<\/p>\n \u00a0<\/p>\n Finally, let’s look at the styling of the series. We keep the brushes in a list. The colors for those brushes are stored in a list with lists – each one with three elements for the red, green and blue values of the color.<\/p>\n \u00a0<\/p>\n What we actually do to show the graphics of the connections that are selected in the diagram is thicken the strokes for those line graphics and set the thickness to the rest to 0.15 to make them barely visible.<\/p>\n We do that by using the thicknesses property of the PerSeriesStyle<\/a> class that we use for styling the chart.<\/p>\n \u00a0<\/p>\n And here is how we create the thicknesses and the brushes:<\/p>\n And that’s all for this part I of the tutorial on how to build the client side of a sample server load monitor application in JavaScript. In part II we will look at the diagram control. You can run the sample from here:<\/p>\n Run the online server load monitor application<\/a><\/p>\n Here is the link to download the full source code for the application:<\/p>\n Download Source Code<\/a><\/p>\n You can also fork it from GitHub.<\/a><\/p>\n Find out more about the chart, gauge<\/a> and diagram<\/a> JavaScript libraries from their official pages on the MindFusion website.<\/p>\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" In two blog posts we will look at the main steps to create a sample server load web application. We will use the chart, gauge and diagram libraries. The data is simulated with random numbers. Run The Application The chart … Continue reading MindFusion.Gauges.js\nMindFusion.Diagramming.js\nMindFusion.Common.js\nMindFusion.Charting.js\nrequire.js\n<\/pre>\n
jquery.js\n<\/pre>\n
\u00a0<\/pre>\n
section {\n display: flex;\n max-width: 700px;\n}\n<\/pre>\n.column {\n margin: 10px 10px 0px 0px;\n flex: 1 1 0;\n border: 1px solid #cecece;\n}\n\nsection:first-of-type .column:first-of-type {\n flex: 1 1 auto;\n}\n<\/pre>\nsection:nth-of-type(2) .column:first-of-type {\n flex: 2 2 22;\n}\n<\/pre>\n<section<\/span>>\n<\/span><div<\/span> class<\/span>=\"column<\/a>\"><\/div<\/span>>\n<\/span><\/section<\/span>><\/pre>\n<script<\/span> src<\/span>=\"Scripts\/diagram.js<\/a>\" type<\/span>=\"text\/javascript<\/a>\"><\/script<\/span>>\n<\/span><script<\/span> data-main<\/span>=\"charts<\/a>\" src<\/span>=\"Scripts\/require.js<\/a>\"><\/script<\/span>>\n<\/span><\/pre>\nvar lineChart = null;\n\ndefine([\"require\", \"exports\", 'MindFusion.Common', 'Scripts\/MindFusion.Charting', 'MindFusion.Gauges'], function (require, exports, MindFusion_Common_1, m, g) {\n \"use strict\";\n.........\n.........\n} \n\n<\/pre>\nvar userCounter = g.OvalGauge.create($('#userCounter')[0], false);\n<\/pre>\n\/\/use custom painting of the background and of the pointer\nuserCounter.addEventListener(g.Events.prepaintBackground, onGaugerepaintBackground.bind(this));\nuserCounter.addEventListener(g.Events.prepaintPointer, onPrepaintPointer.bind(this));\n<\/pre>\n
var scale = new g.OvalScale(userCounter);\nscale.setMinValue(0);\nscale.setMaxValue(40);\n................\n<\/pre>\n
\/\/initialize the major settings\nvar majorSettings = scale.majorTickSettings;\nmajorSettings.setTickShape(TickShape.Ellipse);\n..........................\n<\/pre>\n
var interval = new g.CustomInterval();\n interval.setMinValue(35);\n interval.setFill('Red');\n majorSettings.addCustomInterval(interval);\n<\/pre>\n\/\/initialize the middle settings\nvar middleSettings = scale.middleTickSettings;\nmiddleSettings.setShowLabels(false);\n...............\n\n\/\/initalize the minor settings\nvar minorSettings = scale.minorTickSettings;\nminorSettings.setShowLabels(false);\nminorSettings.setShowTicks(false);\n<\/pre>\n
\/\/add a range in gradient colors\nvar range = new g.Range();\nrange.setMinValue(0);\nrange.setMaxValue(40);\nrange.setFill(g.Utils.createLinearGradient(320, [1, '#ce0000', 0.8, '#ce0000', 0.7, '#FFA500', 0.6, '#FFD700', 0.5, '#008000', 0, '#008000']));\n...............\nscale.addRange(range);\n<\/pre>\n
\/\/paint the background in gradient\nfunction onGaugerepaintBackground(sender, args) {\n args.setCancelDefaultPainting(true);\n var context = args.getContext();\n var element = args.getElement();\n var size = sender.getSize();\n var ellipse = new g.Ellipse();\n ellipse.setFill('gray');\n ellipse.setStroke('transparent');\n args.paintVisualElement(ellipse, size);\n var ellipse = new g.Ellipse();\n ellipse.setFill(g.Utils.createLinearGradient(300, [0, '#808080', 0.2, '#808080', 0.8, '#909090', 1, '#909090']));\n ellipse.setStroke('transparent');\n ellipse.setMargin(new g.Thickness(0.015));\n args.paintVisualElement(ellipse, size);\n}\n<\/pre>\n\/\/add some initial value\npointer.setValue(26);\n<\/pre>\n
var pointer = userCounter.scales[0].pointers[0];\npointer.setValue(sum\/10);\n<\/pre>\n
var lineChartEl = document.getElementById('lineChart');\nlineChartEl.width = lineChartEl.offsetParent.clientWidth;\nlineChartEl.height = lineChartEl.offsetParent.clientHeight;\nlineChart = new Controls.LineChart(lineChartEl);\n<\/pre>\nvar values1 = new Collections.List();\nvar values2 = new Collections.List();\n......................................\nvar xValues = new Collections.List();\nvar xLabels = new Collections.List();\n<\/pre>\n
\/\/initialize x-values and labels, generate sample data for the series\nfor (var i = 0; i < 30; i++) {\n xValues.add(i);\n setXLabels(false);\n generateData();\n}\n<\/pre>\nif (d.getSeconds() % 3 == 0)\n {\n \/\/clear the first three values\n \/\/if the count of the labels is more than 30\n if (removeFirst) {\n xLabels.removeAt(0);\n xLabels.removeAt(0);\n xLabels.removeAt(0);\n }\n\n \/\/add a label and two empty strings\n xLabels.add(d.getHours() + \":\" + d.getMinutes() + \":\" + d.getSeconds());\n xLabels.add(\"\");\n xLabels.add(\"\"); \n } \n<\/pre>\n\/\/the series for the chart\nvar series = new Collections.ObservableCollection(new Array(\n new Charting.Series2D(xValues, values1, xLabels),\n new Charting.Series2D(xValues, values2, null),\n ...........\n new Charting.Series2D(xValues, values10, null)));\n<\/pre>\n
lineChart.xAxis.labels = xLabels;\nlineChart.showXCoordinates = false;\n<\/pre>\n
\/\/tell the series that the labels are for the X-axis.\nseries.item(0).supportedLabels = m.MindFusion.Charting.LabelKinds.XAxisLabel;\n<\/pre>\n
\/\/series titles are important - we identify the series with them\nfor (var i = 0; i < 4; i++)\n series.item(i).title = \"Client\" + i;\n\nfor (var i = 0; i < 3; i++)\n series.item(i + 4).title =\"Network\" + i;\n\nfor (var i = 0; i < 3; i++)\n series.item(i + 7).title =\"Data\" + i;\n<\/pre>\n
var y2Stack = new m.MindFusion.Charting.Components.StackPanel();\n y2Stack.orientation = m.MindFusion.Charting.Components.Orientation.Vertical;\n y2Stack.gridRow = 0;\n \/\/add the stack panel to the last grid column\n y2Stack.gridColumn = lineChart.chartPanel.columns.count() - 1;\n\n lineChart.chartPanel.children.add(y2Stack);\n<\/pre>\n
\/\/create the second Y-axis\nvar secondYAxis = new Charting.YAxisRenderer(lineChart.yAxis);\nsecondYAxis.plotLeftSide = false;\nlineChart.yAxisRenderers.add(secondYAxis);\ny2Stack.children.add(secondYAxis); \n<\/pre>\n
lineChart.gridType = Charting.GridType.Crossed;\nlineChart.backColor = new Drawing.Color.fromArgb(230, 230, 230);\nlineChart.theme.gridColor1 = Drawing.Color.fromArgb(1, 255, 255, 255);\nlineChart.theme.gridColor2 = Drawing.Color.fromArgb(1, 255, 255, 255);\nlineChart.theme.gridLineColor = Drawing.Color.fromArgb(0.5, 240, 240, 240);\n\/\/start the timer\nsetInterval(setTime, 1000);\n<\/pre>\n
\/\/the colors for the brushes\nvar brushes = new Collections.List();\n\nvar rgbColors = new Collections.List();\nrgbColors.add(new Array(102, 154, 204));\n..............\n<\/pre>\n
lineChart.plot.seriesStyle = new Charting.PerSeriesStyle(brushes, brushes, thicknesses);\n<\/pre>\n
\/\/create brushes for the chart\nvar thicknesses = new Collections.List();\n for (var i = 0; i < 10; i++)\n { \n var a = rgbColors.item(i);\n brushes.add(new Drawing.Brush(new Drawing.Color.fromArgb(a[0], a[1], a[2])));\n if (i == 5 || i == 8)\n thicknesses.add(3.0);\n else\n thicknesses.add(0.15);\n \n }\n<\/pre>\n
Only the 5th and 8th thickness are set to 3, the others are almost zero – enough to draw the silhouettes of the graphics.<\/p>\n