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 73a3cad

Browse files
Updated samples.
1 parent d21a80c commit 73a3cad

File tree

100 files changed

+2438
-1028
lines changed

Some content is hidden

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

100 files changed

+2438
-1028
lines changed

‎AreaChart.html

Lines changed: 49 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,57 @@
22

33
<html lang="en">
44
<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>
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>
1413
</head>
1514
<body>
16-
<input type="hidden" id="collapsed" />
17-
<div id="header" style="height: 49px;">
15+
<input type="hidden" id="collapsed" />
16+
<div id="header" style="height: 49px;">
1817
<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-
<divid="content" style="top: 60px; bottom: 24px; overflow-y: scroll;">
35-
<div id="controls" style="height: 100px;">
36-
<div style="display: inline-block">
37-
<labelfor="lineType">LineType</label>
38-
<selectid="lineType">
39-
<optionvalue="0">Polyline</option>
40-
<option value="1">Step</option>
41-
<option value="2">Curve</option>
42-
</select>
43-
</div>
44-
<divstyle="display: inline-block">
45-
Area opacity<inputtype="range" id="areaOpacity" min="0" max="100" />
46-
</div>
47-
Show data labels<inputtype="checkbox" id="showDataLabels">
48-
</div>
49-
<divstyle="position: absolute; left: 0px; top: 100px; bottom: 0px; right: 0px; " >
50-
<canvasid="areaChart" style="width: 100%; height: 100%; display: block;"></canvas>
51-
</div>
52-
</div>
53-
<divid="footer" style="height: 24px;">
54-
<span id="copyright"></span>
55-
</div>
56-
<scripttype="text/javascript">
57-
</script>
18+
<div style="float: right; margin-right: 5px; margin-top: 17px;">
19+
<button id="expandButton" onclick="onExpandCollapse()">
20+
&gt;
21+
</button>
22+
</div>
23+
</div>
24+
<div id="info" style="top: 60px; bottom: 24px;">
25+
<div id="infoTab" style="padding: 10px;">
26+
<h1>
27+
About this sample
28+
</h1>
29+
<pid="pinfo">
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+
<divstyle="display: inline-block">
37+
<labelfor="lineType">LineType</label>
38+
<selectid="lineType">
39+
<option value="0">Polyline</option>
40+
<option value="1">Step</option>
41+
<optionvalue="2">Curve</option>
42+
</select>
43+
</div>
44+
<divstyle="display: inline-block">
45+
Area opacity<inputtype="range" id="areaOpacity" min="0" max="100" />
46+
</div>
47+
Show data labels<inputtype="checkbox" id="showDataLabels">
48+
</div>
49+
<divstyle="position: absolute; left: 0px; top: 100px; bottom: 0px; right: 0px; ">
50+
<canvasid="areaChart" style="width: 100%; height: 100%; display: block;"></canvas>
51+
</div>
52+
</div>
53+
<div id="footer" style="height: 24px;">
54+
<spanid="copyright"></span>
55+
</div>
56+
<scriptdata-main="AreaChart" src="Scripts/require.js"></script>
5857
</body>
5958
</html>

‎AreaChart.js

Lines changed: 20 additions & 10 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 & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎AreaChart.ts

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,44 +11,54 @@ areaChartEl.height = areaChartEl.offsetParent.clientHeight;
1111

1212
// create the chart
1313
let areaChart = new Controls.AreaChart(areaChartEl);
14+
areaChart.theme.loadFrom('Resources/DefaultExt.xml');
1415
areaChart.areaOpacity = 0.5;
1516

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");
17+
// create area brushes
18+
let firstBrush = new Drawing.Brush("#ce0000");
19+
let secondBrush = new Drawing.LinearGradientBrush("#003466", "#000063");
20+
let thirdBrush = new Drawing.LinearGradientBrush("#e0e9e9","#669acc");
2021

21-
const labels = new Collections.List<string>([
22-
"one", "two", "three", "four", "five", "six",
23-
"seven", "eight", "nine", "ten", "eleven", "twelve"
24-
]);
22+
const labels = new Collections.List([
23+
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
24+
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
25+
]);
2526

2627
var angle: number = 1;
2728

2829
// create sample data series
2930
let series = new Collections.ObservableCollection<m.MindFusion.Charting.Series>(
3031
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),
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>([1,2,3,4,5,6,7,8,9,10,11,12]), labels),
3334
new Charting.BarSeries(new Collections.List<number>([2, 8, 13, 15, 13, 8, 2, 8, 13, 15, 13, 8]), labels)
3435
));
35-
series.item(0).title = "Series 1";
36-
series.item(1).title = "Series 2";
37-
series.item(2).title = "Series 3";
36+
series.item(0).title = "2016";
37+
series.item(1).title = "2015";
38+
series.item(2).title = "2014";
39+
areaChart.xAxis.title = "Profit (in mlns)";
40+
areaChart.yAxis.title = "Turnover (in mlns)";
3841
areaChart.series = series;
3942

4043
areaChart.xAxis.interval = 1;
4144

4245
// assign one brush per series
4346
areaChart.plot.seriesStyle = new Charting.PerSeriesStyle(new Collections.List<m.MindFusion.Charting.Drawing.Brush>([firstBrush, secondBrush, thirdBrush]));
44-
47+
areaChart.theme.legendBackground = new Drawing.Brush("#e0e9e9");
48+
areaChart.theme.legendBorderStroke = new Drawing.Brush("#000000");
49+
areaChart.theme.axisTitleFontSize = 14;
50+
areaChart.theme.axisTitleFontName = "Verdana";
51+
areaChart.theme.axisLabelsFontName = "Verdana";
52+
areaChart.theme.dataLabelsFontName = "Verdana";
53+
areaChart.legendTitle = "Year";
4554
areaChart.draw();
4655

4756
// handlers
4857

4958
let lineType = document.getElementById('lineType') as HTMLSelectElement;
5059
lineType.selectedIndex = areaChart.gridType;
51-
lineType.onchange = () => {
60+
lineType.onchange = () =>
61+
{
5262
areaChart.lineType = lineType.selectedIndex;
5363
areaChart.draw();
5464
};

0 commit comments

Comments
(0)

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