Essential Guide: Interactivity - Comprehensive Guide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>MindFusion Charting Sample - Interactivity</title>
	<link href="common/samples.css" rel="stylesheet" />
	<script type="text/javascript" src="common/samples.js"></script>
</head>
<body>
	<input type="hidden" id="collapsed" />
	<div id="header" style="height: 49px;">
		<div style="float: left; margin-left: 5px;">
			<a href="index.html" style="margin-left: 10px;">Index</a>
		</div>
		<div style="float: right; margin-right: 5px;">
			<a href="Interactivity.js" style="margin-right: 10px;">View source</a>
			<button id="expandButton" onclick="onExpandCollapse()">
				&rsaquo;
			</button>
		</div>
	</div>
	<div id="info" style="top: 60px; bottom: 24px;">
		<div id="infoTab" style="padding: 10px;">
			<h1>
				About this sample
			</h1>
			<p id="pinfo">
				This sample demonstrates the available interactivity in MindFusion.Charting. Use
				mouse click and drag to pan the bar chart or to rotate the pie chart. Dragging while
				pressing the CTRL key zooms the selected area of the bar chart. The legend can be
				moved too.
			</p>
		</div>
	</div>
	<div id="content" style="top: 60px; bottom: 24px; overflow-y: scroll;">
		<div id="controls" style="height: 50px;">
			<div style="display: inline-block">
				<label for="chart">
					Chart
				</label>
				<select id="chart">
					<option value="0" selected="selected">Bar chart</option>
					<option value="1">Pie chart</option>
				</select>
			</div>
		</div>
		<div id="bar" style="position: absolute; left: 0px; top: 50px; bottom: 0px; right: 0px">
			<canvas id="barChart" style="width: 100%; height: 100%; display: block;">
			</canvas>
		</div>
		<div id="pie" style="position: absolute; left: 0px; top: 50px; bottom: 0px; right: 0px;
			visibility: hidden;">
			<canvas id="pieChart" style="width: 80%; height: 80%; display: block;">
			</canvas>
		</div>
	</div>
	<div id="footer" style="height: 24px;">
		<span id="copyright"></span>
	</div>


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

	<script src="Scripts/common.js" type="text/javascript"></script>
	<script src="Scripts/common-collections.js" type="text/javascript"></script>

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

	<script type="text/javascript" src="Interactivity.js"></script>
</body>
</html>