Repository navigation
Expand file tree
/
Copy pathrange-band.html
More file actions
70 lines (67 loc) · 2.28 KB
/
Copy pathrange-band.html
File metadata and controls
70 lines (67 loc) · 2.28 KB
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
<div class="col-lg-8 control-section">
<div id="spark-container" class="row">
<div class="cols-sample-area" align="center">
<p>
<font size=4px> Sales Growth Comparison with various Products</font>
</p>
<script type="text/x-template" id="columnTemplate1">
<div id="sparkline2010${id}" />
</script>
<script type="text/x-template" id="columnTemplate2">
<div id="sparkline2011${id}" />
</script>
<div id="Grid"></div>
</div>
</div>
</div>
<div id="action-description">
<p>
This sample depicts the range band feature and its customization options available in sparklines.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render sparkline with range band and the customization options available in range band. Here, the sparklines are placed inside the data grid control.
</p>
</div>
<!-- custom code start -->
<style>
td{
padding: 10px;
}
.e-headertext{
font-weight: bolder;
}
#range-min > * {
padding: 0px !important;
}
#range-max > * {
padding: 0px !important;
}
</style>
<!-- custom code end -->
<!-- Property Panel -->
<div class="col-lg-4 property-section">
<br>
<table id="property" style="width:100%" title="Properties">
<tbody>
<tr style="height: 30px ">
<td style="width: 50% ">
Range Band Min 1
</td>
<td style="width: 50% ">
<div id="range-min"></div>
</td>
</tr>
<tr style="height: 30px ">
<td style="width: 50% ">
Range Band Max 3
</td>
<td style="width: 50% ">
<div id="range-max"></div>
</td>
</tr>
</tbody>
</table>
</div>