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 15a1313

Browse files
GolemijaGolemija
Golemija
authored and
Golemija
committed
New files.
0 parents commit 15a1313

File tree

141 files changed

+41584
-0
lines changed

Some content is hidden

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

141 files changed

+41584
-0
lines changed

‎AreaChart.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>MindFusion.Charting Sample - AreaChart</title>
7+
<link href="common/jquery-ui.min.css" rel="stylesheet" />
8+
<link href="common/samples.css" rel="stylesheet" />
9+
<script type="text/javascript" src="common/jquery.min.js"></script>
10+
<script type="text/javascript" src="common/jquery-ui.min.js"></script>
11+
<script type="text/javascript" src="common/samples.js"></script>
12+
<script type="text/javascript" src="Scripts/config.js"></script>
13+
<script data-main="AreaChart" src="Scripts/require.js"></script>
14+
</head>
15+
<body>
16+
<input type="hidden" id="collapsed" />
17+
<div id="header" style="height: 49px;">
18+
<a href="index.html">Home</a>
19+
<div style="float: right; margin-right: 5px; margin-top: 17px;">
20+
<button id="expandButton" onclick="onExpandCollapse()">
21+
&gt;
22+
</button>
23+
</div>
24+
</div>
25+
<div id="info" style="top: 60px; bottom: 24px;">
26+
<div id="infoTab" style="padding: 10px;">
27+
<h1>About this sample
28+
</h1>
29+
<p>
30+
This sample demonstrates various properties of the AreaChart control. Change property values in this panel to see their effect in chart above.
31+
</p>
32+
</div>
33+
</div>
34+
<div id="content" style="top: 60px; bottom: 24px; overflow-y: scroll;">
35+
<div id="controls" style="height: 100px;">
36+
<div style="display: inline-block">
37+
<label for="lineType">LineType</label>
38+
<select id="lineType">
39+
<option value="0">Polyline</option>
40+
<option value="1">Step</option>
41+
<option value="2">Curve</option>
42+
</select>
43+
</div>
44+
<div style="display: inline-block">
45+
Area opacity<input type="range" id="areaOpacity" min="0" max="100" />
46+
</div>
47+
Show data labels<input type="checkbox" id="showDataLabels">
48+
</div>
49+
<div style="position: absolute; left: 0px; top: 100px; bottom: 0px; right: 0px; " >
50+
<canvas id="areaChart" style="width: 100%; height: 100%; display: block;"></canvas>
51+
</div>
52+
</div>
53+
<div id="footer" style="height: 24px;">
54+
<span id="copyright"></span>
55+
</div>
56+
<script type="text/javascript">
57+
</script>
58+
</body>
59+
</html>

‎AreaChart.js

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

‎AreaChart.js.map

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

‎AreaChart.ts

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import m = require('Scripts/MindFusion.Charting');
2+
3+
var Charting = m.MindFusion.Charting;
4+
var Controls = m.MindFusion.Charting.Controls;
5+
var Collections = m.MindFusion.Charting.Collections;
6+
var Drawing = m.MindFusion.Charting.Drawing;
7+
8+
let areaChartEl = <HTMLCanvasElement>document.getElementById('areaChart');
9+
areaChartEl.width = areaChartEl.offsetParent.clientWidth;
10+
areaChartEl.height = areaChartEl.offsetParent.clientHeight;
11+
12+
// create the chart
13+
let areaChart = new Controls.AreaChart(areaChartEl);
14+
areaChart.areaOpacity = 0.5;
15+
16+
// create bar brushes
17+
let firstBrush = new Drawing.LinearGradientBrush("LightGreen", "LightBlue");
18+
let secondBrush = new Drawing.LinearGradientBrush("Yellow", "Red");
19+
let thirdBrush = new Drawing.Brush("Khaki");
20+
21+
const labels = new Collections.List<string>([
22+
"one", "two", "three", "four", "five", "six",
23+
"seven", "eight", "nine", "ten", "eleven", "twelve"
24+
]);
25+
26+
var angle: number = 1;
27+
28+
// create sample data series
29+
let series = new Collections.ObservableCollection<m.MindFusion.Charting.Series>(
30+
new Array<m.MindFusion.Charting.BarSeries>(
31+
new Charting.BarSeries(new Collections.List<number>([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), labels),
32+
new Charting.BarSeries(new Collections.List<number>([2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]), labels),
33+
new Charting.BarSeries(new Collections.List<number>([2, 8, 13, 15, 13, 8, 2, 8, 13, 15, 13, 8]), labels)
34+
));
35+
series.item(0).title = "Series 1";
36+
series.item(1).title = "Series 2";
37+
series.item(2).title = "Series 3";
38+
areaChart.series = series;
39+
40+
areaChart.xAxis.interval = 1;
41+
42+
// assign one brush per series
43+
areaChart.plot.seriesStyle = new Charting.PerSeriesStyle(new Collections.List<m.MindFusion.Charting.Drawing.Brush>([firstBrush, secondBrush, thirdBrush]));
44+
45+
areaChart.draw();
46+
47+
// handlers
48+
49+
let lineType = document.getElementById('lineType') as HTMLSelectElement;
50+
lineType.selectedIndex = areaChart.gridType;
51+
lineType.onchange = () => {
52+
areaChart.lineType = lineType.selectedIndex;
53+
areaChart.draw();
54+
};
55+
56+
let areaOpacity = document.getElementById('areaOpacity') as HTMLInputElement;
57+
areaOpacity.valueAsNumber = areaChart.areaOpacity * 100;
58+
areaOpacity.onchange = () => {
59+
areaChart.areaOpacity = areaOpacity.valueAsNumber / 100;
60+
areaChart.draw();
61+
};
62+
63+
let showDataLabels = document.getElementById('showDataLabels') as HTMLInputElement;
64+
showDataLabels.checked = areaChart.showDataLabels == Charting.LabelKinds.All;
65+
showDataLabels.onchange = () => {
66+
if (showDataLabels.checked)
67+
areaChart.showDataLabels = Charting.LabelKinds.All;
68+
else
69+
areaChart.showDataLabels = Charting.LabelKinds.None;
70+
areaChart.draw();
71+
};
72+
73+
74+

‎BarChart.html

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>MindFusion Charting Sample - BarChart</title>
7+
<link href="common/jquery-ui.min.css" rel="stylesheet" />
8+
<link href="common/samples.css" rel="stylesheet" />
9+
<script type="text/javascript" src="common/jquery.min.js"></script>
10+
<script type="text/javascript" src="common/jquery-ui.min.js"></script>
11+
<script type="text/javascript" src="common/samples.js"></script>
12+
<script type="text/javascript" src="Scripts/config.js"></script>
13+
<script data-main="BarChart" src="Scripts/require.js"></script>
14+
</head>
15+
<body>
16+
<input type="hidden" id="collapsed" />
17+
<div id="header" style="height: 49px;">
18+
<a href="index.html">Home</a>
19+
<div style="float: right; margin-right: 5px; margin-top: 17px;">
20+
<button id="expandButton" onclick="onExpandCollapse()">
21+
&gt;
22+
</button>
23+
</div>
24+
</div>
25+
<div id="info" style="top: 60px; bottom: 24px;">
26+
<div id="infoTab" style="padding: 10px;">
27+
<h1>
28+
About this sample
29+
</h1>
30+
<p>
31+
This sample demonstrates various properties of the BarChart control.
32+
Change property values in the controls panel to see their effect in chart to the left.
33+
</p>
34+
</div>
35+
</div>
36+
<div id="content" style="top: 60px; bottom: 24px; overflow-y: scroll;">
37+
<div id="controls" style="height: 200px;">
38+
<input type="checkbox" id="chbShowDataLabels" checked="checked" />
39+
<label for="chbShowDataLabels">ShowDataLabels</label>
40+
<input type="checkbox" id="chbHorizontalBars" />
41+
<label for="chbHorizontalBars">HorizontalBars</label>
42+
<input type="checkbox" id="chbShowXTicks" checked="checked" />
43+
<label for="chbShowXTicks">ShowXTicks</label>
44+
<input type="checkbox" id="chbShowYTicks" checked="checked" />
45+
<label for="chbShowYTicks">ShowYTicks</label>
46+
<input type="checkbox" id="chbShowXCoords" checked="checked" />
47+
<label for="chbShowXCoords">ShowXCoordinates</label>
48+
<input type="checkbox" id="chbShowYCoords" checked="checked" />
49+
<label for="chbShowYCoords">ShowYCoordinates</label>
50+
<input type="checkbox" id="chbShowZoomWidgets" />
51+
<label for="chbShowZoomWidgets">ShowZoomWidgets</label>
52+
<input type="checkbox" id="chbShowLegend" checked="checked" />
53+
<label for="chbShowLegend">ShowLegend</label>
54+
<br />
55+
<div style="display:inline-block">
56+
<label for="tbXAxisMax">XAxis.MaxValue</label>
57+
<input type="range" id="tbXAxisMax" min="0" max="24" value="12" />
58+
</div>
59+
<div style="display:inline-block">
60+
<label for="tbXAxisMin">XAxis.MinValue</label>
61+
<input type="range" id="tbXAxisMin" min="0" max="10" value="0" />
62+
</div>
63+
<div style="display:inline-block">
64+
<label for="tbYAxisMax">YAxis.MaxValue</label>
65+
<input type="range" id="tbYAxisMax" min="1" max="52" value="26" />
66+
</div>
67+
<div style="display:inline-block">
68+
<label for="tbYAxisMin">YAxis.MinValue</label>
69+
<input type="range" id="tbYAxisMin" min="0" max="10" value="0" />
70+
</div>
71+
<div style="display:inline-block">
72+
<label for="tbRatio">SpaceRatio</label>
73+
<input type="range" id="tbRatio" min="0" max="10" value="2" />
74+
</div>
75+
<br />
76+
<div style="display:inline-block">
77+
<label for="cbxBarLayout">BarLayout</label>
78+
<select id="cbxBarLayout">
79+
<option value="0" selected="selected">SideBySide</option>
80+
<option value="1">Stack</option>
81+
<option value="2">Overlay</option>
82+
</select>
83+
</div>
84+
<div style="display:inline-block">
85+
<label for="cbxGridType">GridType</label>
86+
<select id="cbxGridType">
87+
<option value="0" selected="selected">None</option>
88+
<option value="1">Horizontal</option>
89+
<option value="2">Vertical</option>
90+
<option value="3">Crossed</option>
91+
</select>
92+
</div>
93+
</div>
94+
95+
<div style="position: absolute; left: 0px; top: 200px; bottom: 0px; right: 0px">
96+
<canvas id="chart" style="width: 100%; height: 100%; display: block;"></canvas>
97+
</div>
98+
</div>
99+
100+
<div id="footer" style="height: 24px;">
101+
<span id="copyright"></span>
102+
</div>
103+
<script type="text/javascript">
104+
</script>
105+
</body>
106+
</html>

0 commit comments

Comments
(0)

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