Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d21a80c

Browse files
IvchetoIvcheto
Ivcheto
authored and
Ivcheto
committed
New Project
1 parent 15a1313 commit d21a80c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+32029
-0
lines changed

‎ServerLoad/Scripts/MindFusion.Charting.d.ts

Lines changed: 10645 additions & 0 deletions
Large diffs are not rendered by default.

‎ServerLoad/Scripts/MindFusion.Charting.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ServerLoad/Scripts/MindFusion.Common.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ServerLoad/Scripts/MindFusion.Diagramming.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ServerLoad/Scripts/MindFusion.Gauges.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ServerLoad/Scripts/charts.js

Lines changed: 355 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,355 @@
1+
var lineChart = null;
2+
3+
4+
define(["require", "exports", 'MindFusion.Common', 'Scripts/MindFusion.Charting', 'MindFusion.Gauges'], function (require, exports, MindFusion_Common_1, m, g) {
5+
"use strict";
6+
7+
//map some namespaces
8+
var d = MindFusion_Common_1.Drawing;
9+
var Charting = m.MindFusion.Charting;
10+
var Controls = m.MindFusion.Charting.Controls;
11+
var Collections = m.MindFusion.Charting.Collections;
12+
var Drawing = m.MindFusion.Charting.Drawing;
13+
var Gauges = m.MindFusion.Charting.Gauges;
14+
var OvalScale = g.OvalScale;
15+
var TickShape = g.TickShape;
16+
var Length = g.Length;
17+
var LengthType = g.LengthType;
18+
var LabelRotation = g.LabelRotation;
19+
var PointerShape = g.PointerShape;
20+
21+
22+
//gauge
23+
var userCounter = g.OvalGauge.create($('#userCounter')[0], false);
24+
//use custom painting of the background and of the pointer
25+
userCounter.addEventListener(g.Events.prepaintBackground, onGaugerepaintBackground.bind(this));
26+
userCounter.addEventListener(g.Events.prepaintPointer, onPrepaintPointer.bind(this));
27+
28+
// userCounter
29+
// the scale
30+
var scale = new g.OvalScale(userCounter);
31+
scale.setMinValue(0);
32+
scale.setMaxValue(40);
33+
scale.setStartAngle(120);
34+
scale.setEndAngle(420);
35+
scale.setFill('Transparent');
36+
scale.setStroke('Transparent');
37+
38+
//initialize the major settings
39+
var majorSettings = scale.majorTickSettings;
40+
majorSettings.setTickShape(TickShape.Ellipse);
41+
majorSettings.setTickWidth(new Length(10, LengthType.Relative));
42+
majorSettings.setTickHeight(new Length(2, LengthType.Relative));
43+
majorSettings.setFontSize(new Length(9, LengthType.Relative));
44+
majorSettings.setNumberPrecision(0);
45+
majorSettings.setFill('White');
46+
majorSettings.setStroke('Transparent');
47+
majorSettings.setLabelForeground('White');
48+
majorSettings.setLabelAlignment(Alignment.InnerCenter);
49+
majorSettings.setLabelRotation(LabelRotation.Auto);
50+
majorSettings.setTickAlignment(Alignment.TrueCenter);
51+
majorSettings.setLabelOffset(new Length(12, LengthType.Relative));
52+
majorSettings.setStep(5);
53+
var interval = new g.CustomInterval();
54+
interval.setMinValue(35);
55+
interval.setFill('Red');
56+
majorSettings.addCustomInterval(interval);
57+
58+
//initialize the middle settings
59+
var middleSettings = scale.middleTickSettings;
60+
middleSettings.setShowLabels(false);
61+
middleSettings.setTickShape(TickShape.Ellipse);
62+
middleSettings.setTickWidth(new Length(6, LengthType.Relative));
63+
middleSettings.setTickHeight(new Length(3, LengthType.Relative));
64+
middleSettings.setFontSize(new Length(12, LengthType.Relative));
65+
middleSettings.setFill('White');
66+
middleSettings.setStroke('Transparent');
67+
middleSettings.setLabelForeground('rgb(50, 50, 50)');
68+
middleSettings.setTickAlignment(Alignment.TrueCenter);
69+
middleSettings.setCount(5);
70+
middleSettings.addCustomInterval(interval);
71+
72+
//initalize the minor settings
73+
var minorSettings = scale.minorTickSettings;
74+
minorSettings.setShowLabels(false);
75+
minorSettings.setShowTicks(false);
76+
77+
//add a range in gradient colors
78+
var range = new g.Range();
79+
range.setMinValue(0);
80+
range.setMaxValue(40);
81+
range.setFill(g.Utils.createLinearGradient(320, [1, '#ce0000', 0.8, '#ce0000', 0.7, '#FFA500', 0.6, '#FFD700', 0.5, '#008000', 0, '#008000']));
82+
range.setStroke('Transparent');
83+
range.setStartWidth(new Length(0, LengthType.Relative));
84+
range.setEndWidth(new Length(8, LengthType.Relative));
85+
range.setAlignment(Alignment.TrueCenter);
86+
scale.addRange(range);
87+
88+
//customize the gauge pointer
89+
var pointer = new g.Pointer();
90+
pointer.setFill({ "type": "LinearGradientBrush", "color1": "#CCCCCC", "color2": "#666666", "angle": 225 });
91+
pointer.setStroke("#333333");
92+
pointer.setPointerHeight(new Length(20, LengthType.Relative));
93+
pointer.setPointerWidth(new Length(100, LengthType.Relative));
94+
pointer.setShape(PointerShape.Needle);
95+
scale.addPointer(pointer);
96+
//add some initial value
97+
pointer.setValue(26);
98+
99+
//paint the background in gradient
100+
function onGaugerepaintBackground(sender, args) {
101+
args.setCancelDefaultPainting(true);
102+
var context = args.getContext();
103+
var element = args.getElement();
104+
var size = sender.getSize();
105+
var ellipse = new g.Ellipse();
106+
ellipse.setFill('gray');
107+
ellipse.setStroke('transparent');
108+
args.paintVisualElement(ellipse, size);
109+
var ellipse = new g.Ellipse();
110+
ellipse.setFill(g.Utils.createLinearGradient(300, [0, '#808080', 0.2, '#808080', 0.8, '#909090', 1, '#909090']));
111+
ellipse.setStroke('transparent');
112+
ellipse.setMargin(new g.Thickness(0.015));
113+
args.paintVisualElement(ellipse, size);
114+
}
115+
;
116+
//draw the pointer
117+
function onPrepaintPointer(sender, args) {
118+
args.setCancelDefaultPainting(true);
119+
var context = args.getContext();
120+
var element = args.getElement();
121+
var size = element.getRenderSize();
122+
var psize = new MindFusion.Drawing.Size(0.2 * size.width, size.height);
123+
context.save();
124+
context.transform.apply(context, element.transform.matrix());
125+
context.beginPath();
126+
context.arc(psize.width / 2, psize.height / 2, psize.height / 2, 0, 2 * Math.PI, false);
127+
var fill = element.getFill();
128+
context.fillStyle = g.Utils.getBrush(context, fill, new MindFusion.Drawing.Rect(0, 0, size.width, size.height), false);
129+
context.fill();
130+
context.strokeStyle = '#333333';
131+
context.stroke();
132+
context.beginPath();
133+
context.moveTo(0, 0.425 * size.height);
134+
context.lineTo(0, 0.575 * size.height);
135+
context.lineTo(0.95 * size.width, 0.575 * size.height);
136+
context.lineTo(size.width, 0.5 * size.height);
137+
context.lineTo(0.95 * size.width, 0.425 * size.height);
138+
context.fillStyle = 'white';
139+
context.fill();
140+
context.stroke();
141+
context.restore();
142+
}
143+
;
144+
//end of gauge
145+
146+
//create the line chart
147+
var lineChartEl = document.getElementById('lineChart');
148+
lineChartEl.width = lineChartEl.offsetParent.clientWidth;
149+
lineChartEl.height = lineChartEl.offsetParent.clientHeight;
150+
lineChart = new Controls.LineChart(lineChartEl);
151+
lineChart.showHightlight = false;
152+
lineChart.areaOpacity = 0.5;
153+
lineChart.showLegend = true;
154+
lineChart.theme.legendBackground = new Drawing.Brush("#f0f0f0");
155+
lineChart.legendTitle = "";
156+
lineChart.theme.legendBorderStroke = new Drawing.Brush("#cecece");
157+
158+
var d = new Date(); // for now
159+
//offset by 30 secs for the first 30 data values
160+
d.setSeconds(d.getSeconds() - 30);
161+
162+
// create sample data series
163+
var values1 = new Collections.List();
164+
var values2 = new Collections.List();
165+
var values3 = new Collections.List();
166+
var values4 = new Collections.List();
167+
var values5 = new Collections.List();
168+
var values6 = new Collections.List();
169+
var values7 = new Collections.List();
170+
var values8 = new Collections.List();
171+
var values9 = new Collections.List
172+
var values10 = new Collections.List();
173+
174+
var xValues = new Collections.List();
175+
var xLabels = new Collections.List();
176+
177+
//the colors for the brushes
178+
var brushes = new Collections.List();
179+
180+
var rgbColors = new Collections.List();
181+
rgbColors.add(new Array(102, 154, 204));
182+
rgbColors.add(new Array(0, 52, 102));
183+
rgbColors.add(new Array(156, 170, 198));
184+
rgbColors.add(new Array(102, 102, 102));
185+
rgbColors.add(new Array(163, 198, 134));
186+
rgbColors.add(new Array(90, 116, 68));
187+
rgbColors.add(new Array(233, 202, 145));
188+
rgbColors.add(new Array(234, 104, 79));
189+
rgbColors.add(new Array(206, 0, 0));
190+
rgbColors.add(new Array(245, 222, 208));
191+
192+
//initialize x-values and labels, generate sample data for the series
193+
for (var i = 0; i < 30; i++) {
194+
xValues.add(i);
195+
setXLabels(false);
196+
generateData();
197+
}
198+
199+
//create brushes for the chart
200+
var thicknesses = new Collections.List();
201+
for (var i = 0; i < 10; i++)
202+
{
203+
var a = rgbColors.item(i);
204+
brushes.add(new Drawing.Brush(new Drawing.Color.fromArgb(a[0], a[1], a[2])));
205+
if (i == 5 || i == 8)
206+
thicknesses.add(3.0);
207+
else
208+
thicknesses.add(0.15);
209+
210+
}
211+
212+
213+
lineChart.xAxis.labels = xLabels;
214+
lineChart.showXCoordinates = false;
215+
216+
var angle = 1;
217+
218+
//the series for the chart
219+
var series = new Collections.ObservableCollection(new Array(
220+
new Charting.Series2D(xValues, values1, xLabels),
221+
new Charting.Series2D(xValues, values2, null),
222+
new Charting.Series2D(xValues, values3, null),
223+
new Charting.Series2D(xValues, values4, null),
224+
new Charting.Series2D(xValues, values5, null),
225+
new Charting.Series2D(xValues, values6, null),
226+
new Charting.Series2D(xValues, values7, null),
227+
new Charting.Series2D(xValues, values8, null),
228+
new Charting.Series2D(xValues, values9, null),
229+
new Charting.Series2D(xValues, values10, null)));
230+
231+
//series titles are important - we identify the series with them
232+
for (var i = 0; i < 4; i++)
233+
series.item(i).title = "Client" + i;
234+
235+
for (var i = 0; i < 3; i++)
236+
series.item(i + 4).title = "Network" + i;
237+
238+
for (var i = 0; i < 3; i++)
239+
series.item(i + 7).title = "Data" + i;
240+
241+
//tell the chart that the labels for the X-axis come from the first series.
242+
series.item(0).supportedLabels = m.MindFusion.Charting.LabelKinds.XAxisLabel;
243+
244+
lineChart.series = series;
245+
246+
//customize the axis
247+
lineChart.xAxis.interval = 1;
248+
lineChart.xAxis.title = "Time";
249+
lineChart.yAxis.interval = 10;
250+
lineChart.yAxis.title = "Users";
251+
252+
//add a new column to the chart grid - for the Y2-axis
253+
lineChart.chartPanel.columns.add(new m.MindFusion.Charting.Components.GridColumn());
254+
255+
//create a vertical stack panel for the second Y-axis
256+
var y2Stack = new m.MindFusion.Charting.Components.StackPanel();
257+
y2Stack.orientation = m.MindFusion.Charting.Components.Orientation.Vertical;
258+
y2Stack.gridRow = 0;
259+
//add the stack panel to the last grid column
260+
y2Stack.gridColumn = lineChart.chartPanel.columns.count() - 1;
261+
262+
lineChart.chartPanel.children.add(y2Stack);
263+
//create the second Y-axis
264+
var secondYAxis = new Charting.YAxisRenderer(lineChart.yAxis);
265+
secondYAxis.plotLeftSide = false;
266+
lineChart.yAxisRenderers.add(secondYAxis);
267+
y2Stack.children.add(secondYAxis);
268+
269+
//customize the grid
270+
lineChart.gridType = Charting.GridType.Crossed;
271+
lineChart.backColor = new Drawing.Color.fromArgb(230, 230, 230);
272+
lineChart.theme.gridColor1 = Drawing.Color.fromArgb(1, 255, 255, 255);
273+
lineChart.theme.gridColor2 = Drawing.Color.fromArgb(1, 255, 255, 255);
274+
lineChart.theme.gridLineColor = Drawing.Color.fromArgb(0.5, 240, 240, 240);
275+
276+
// assign one brush per series
277+
lineChart.plot.seriesStyle = new Charting.PerSeriesStyle(brushes, brushes, thicknesses);
278+
lineChart.plot.pinGrid = false;
279+
lineChart.draw();
280+
281+
//start the timer
282+
setInterval(setTime, 1000);
283+
284+
//generate sample data - remove the first values and add more values
285+
function setTime() {
286+
287+
values1.removeAt(0);
288+
values2.removeAt(0);
289+
values3.removeAt(0);
290+
values4.removeAt(0);
291+
values5.removeAt(0);
292+
values6.removeAt(0);
293+
values7.removeAt(0);
294+
values8.removeAt(0);
295+
values9.removeAt(0);
296+
values10.removeAt(0);
297+
setXLabels(true);
298+
299+
300+
generateData();
301+
302+
//sum all new values, find the average and update the guge pointer value
303+
var sum = 0;
304+
305+
for (var i = 0; i < lineChart.series.count() ; i++) {
306+
sum += series.item(i).yData.item(29);
307+
}
308+
309+
var pointer = userCounter.scales[0].pointers[0];
310+
pointer.setValue(sum/10);
311+
312+
//repaint the chart
313+
lineChart.draw();
314+
}
315+
316+
//generate sample data
317+
function generateData()
318+
{
319+
values1.add(Math.floor(Math.random() * 90));
320+
values2.add(Math.floor(Math.random() * 100));
321+
values3.add(Math.floor(Math.random() * 50));
322+
values4.add(Math.floor(Math.random() * 15));
323+
values5.add(Math.floor(Math.random() * 55));
324+
values6.add(Math.floor(Math.random() * 60));
325+
values7.add(Math.floor(Math.random() * 13));
326+
values8.add(Math.floor(Math.random() * 85));
327+
values9.add(Math.floor(Math.random() * 20));
328+
values10.add(Math.floor(Math.random() * 10));
329+
330+
331+
}
332+
333+
/* add and update the xLabels. Each 3rd labels is the current time,
334+
the others are empty strings */
335+
function setXLabels(removeFirst)
336+
{
337+
if (d.getSeconds() % 3 == 0)
338+
{
339+
//clear the first three values
340+
if (removeFirst) {
341+
xLabels.removeAt(0);
342+
xLabels.removeAt(0);
343+
xLabels.removeAt(0);
344+
}
345+
346+
//add a label and two empty strings
347+
xLabels.add(d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
348+
xLabels.add("");
349+
xLabels.add("");
350+
}
351+
352+
d.setSeconds(d.getSeconds() + 1);
353+
354+
}
355+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /