Skip to content

Commit e57eae7

Browse files
damyanpetevdamyanpetev
committed
Adding chart highlight layers samples.
1 parent f44e5c3 commit e57eae7

7 files changed

Lines changed: 1051 additions & 0 deletions

‎HTMLSamples/data-chart/category-highlight-layer.html‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>$$(Title_category-highlight-layer)</title>
5+
6+
<!-- Ignite UI Required Combined CSS Files -->
7+
<link href="%%ignite-ui%%/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
8+
<link href="%%ignite-ui%%/css/structure/infragistics.css" rel="stylesheet">
9+
10+
<script src="%%modernizr%%"></script>
11+
<script src="%%jquery%%"></script>
12+
<script src="%%jquery-ui%%"></script>
13+
14+
<!-- Ignite UI Required Combined JavaScript Files -->
15+
<script src="%%ignite-ui%%/js/infragistics.core.js"></script>
16+
<script src="%%ignite-ui%%/js/infragistics.dv.js"></script>
17+
18+
</head>
19+
<body>
20+
<style type="text/css">
21+
.sliderBounds {
22+
width: 95px;
23+
margin: 6px 3px 6px 6px;
24+
display: inline-block;
25+
}
26+
.optionContainer {
27+
width: 200px;
28+
margin: 2px;
29+
padding: 2px;
30+
display: inline-block;
31+
border: 1px solid #e0e0e0;
32+
-moz-border-radius: 4px;
33+
-webkit-border-radius: 4px;
34+
border-radius: 4px;
35+
}
36+
.selectBounds {
37+
min-width: 120px;
38+
max-width: 132px;
39+
}
40+
</style>
41+
42+
<div id="chart"></div>
43+
<br>
44+
45+
<div>
46+
<fieldset id="chartOptions">
47+
<legend>$$(CategoryItemHighlightOptions)</legend>
48+
<br>
49+
<div class="optionContainer">
50+
$$(Brush)
51+
<br>
52+
<select id="brush" class="selectBounds">
53+
<option value="red">Red</option>
54+
<option value="blue">Blue</option>
55+
<option value="green">Green</option>
56+
<option value="yellow">Yellow</option>
57+
<option value="black">Black</option>
58+
<option value="orange" selected="selected">Orange</option>
59+
</select>
60+
</div>
61+
<div class="optionContainer">
62+
$$(Outline)
63+
<br>
64+
<select id="outline" class="selectBounds">
65+
<option value="red">Red</option>
66+
<option value="blue">Blue</option>
67+
<option value="green">Green</option>
68+
<option value="yellow">Yellow</option>
69+
<option value="black" selected="selected">Black</option>
70+
</select>
71+
</div>
72+
73+
<div class="optionContainer">
74+
$$(Thickness)
75+
<br>
76+
<div id="thicknessSlider" class="sliderBounds"></div>
77+
<label id="thicknessLabel">1</label>
78+
</div>
79+
80+
<div class="optionContainer">
81+
$$(Opacity)
82+
<br>
83+
<div id="opacitySlider" class="sliderBounds"></div>
84+
<label id="opacityLabel">0.3</label>
85+
</div>
86+
87+
<br>
88+
89+
<div class="optionContainer">
90+
$$(TransitionDuration)
91+
<br>
92+
<div id="transitionDurationSlider" class="sliderBounds"></div>
93+
<label id="transitionDurationLabel">150</label>
94+
</div>
95+
96+
<div class="optionContainer">
97+
<input type="checkbox" id="useInterpolationCheckBox"></input>$$(UseInterpolation)<br>
98+
</div>
99+
100+
</fieldset>
101+
</div>
102+
103+
<br>
104+
105+
<div class="USCensus-attribution">
106+
$$(Chart_lbl_popDataFrom):<br>
107+
<a href="http://www.census.gov/" target="_blank">U.S. Census Bureau</a>
108+
</div>
109+
<script>
110+
$(function () {
111+
112+
var data = [
113+
{ "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
114+
{ "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
115+
{ "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
116+
{ "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
117+
{ "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
118+
];
119+
120+
$("#chart").igDataChart({
121+
width: "100%",
122+
height: "400px",
123+
title: "$$(Chart_title_countries_pop)",
124+
subtitle: "$$(Chart_subtitle_countries_1995_v_2005)",
125+
dataSource: data,
126+
axes: [
127+
{
128+
name: "NameAxis",
129+
type: "categoryX",
130+
title: "$$(CategoryAxis_title_countries_pop)",
131+
label: "CountryName"
132+
},
133+
{
134+
name: "PopulationAxis",
135+
type: "numericY",
136+
minimumValue: 0,
137+
title: "$$(NumericAxis_title_population)",
138+
}
139+
],
140+
series: [
141+
{
142+
name: "2005Population",
143+
type: "column",
144+
isTransitionInEnabled: true,
145+
xAxis: "NameAxis",
146+
yAxis: "PopulationAxis",
147+
valueMemberPath: "Pop2005"
148+
},
149+
{
150+
name: "1995Population",
151+
type: "column",
152+
isTransitionInEnabled: true,
153+
xAxis: "NameAxis",
154+
yAxis: "PopulationAxis",
155+
valueMemberPath: "Pop1995"
156+
},
157+
{
158+
name: "catHighlightLayer",
159+
title: "categoryHighlight",
160+
type: "categoryHighlightLayer",
161+
useInterpolation: true,
162+
transitionDuration: 250,
163+
thickness: 1,
164+
opacity: 0.3,
165+
brush: "orange",
166+
outline: "black"
167+
}]
168+
});
169+
170+
// Brush
171+
$("#brush").on({
172+
change: function (e) {
173+
var brushColor = $(this).val();
174+
$("#chart").igDataChart("option", "series", [{ name: "catHighlightLayer", brush: brushColor }]);
175+
}
176+
});
177+
178+
// Outline
179+
$("#outline").on({
180+
change: function (e) {
181+
var outlineColor = $(this).val();
182+
$("#chart").igDataChart("option", "series", [{ name: "catHighlightLayer", outline: outlineColor }]);
183+
}
184+
});
185+
186+
// Thickness
187+
$("#thicknessSlider").slider({
188+
min: 1,
189+
max: 4,
190+
value: 1,
191+
step: 1,
192+
slide: function (event, ui) {
193+
$("#chart").igDataChart("option", "series", [{ name: "catHighlightLayer", thickness: ui.value }]);
194+
$("#thicknessLabel").text(ui.value);
195+
}
196+
});
197+
198+
// Opacity
199+
$("#opacitySlider").slider({
200+
min: 0,
201+
max: 1,
202+
value: 0.5,
203+
step: 0.01,
204+
slide: function (event, ui) {
205+
$("#chart").igDataChart("option", "series", [{ name: "catHighlightLayer", opacity: ui.value }]);
206+
$("#opacityLabel").text(ui.value);
207+
}
208+
});
209+
210+
// Transition Duration Slider
211+
$("#transitionDurationSlider").slider({
212+
min: 0,
213+
max: 1000,
214+
value: 150,
215+
step: 50,
216+
slide: function (event, ui) {
217+
$("#chart").igDataChart("option", "series", [{ name: "catHighlightLayer", transitionDuration: ui.value }]);
218+
$("#transitionDurationLabel").text(ui.value);
219+
}
220+
});
221+
222+
// Use Interpolation
223+
$("#useInterpolationCheckBox").click(function (e) {
224+
var useInterpolationResult = $("#useInterpolationCheckBox").is(":checked") ? true : false;
225+
$("#chart").igDataChart("option", "series", [{ name: "catHighlightLayer", useInterpolation: useInterpolationResult }]);
226+
});
227+
});
228+
</script>
229+
</body>
230+
</html>

0 commit comments

Comments
 (0)