forked from syncfusion/ej2-aspnetmvc-samples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSorting.cshtml
147 lines (139 loc) · 6.99 KB
/
Sorting.cshtml
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
@using Syncfusion.EJ2;
@section ControlsSection{
<div>
<div class="col-lg-9 control-section">
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("x").YName("car").DataSource(ViewBag.dataSource).Name("Car").Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("x").YName("trucks").DataSource(ViewBag.dataSource).Name("Truck").Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("x").YName("bike").DataSource(ViewBag.dataSource).Name("Bike").Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("x").YName("cycle").DataSource(ViewBag.dataSource).Name("Cycle").Add();
}).PrimaryXAxis(px => px.LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate45).MajorGridLines(mg=>mg.Width(0)).MinorGridLines(mg=>mg.Width(0)).MajorTickLines(mt=>mt.Width(0)).
MinorTickLines(mt=>mt.Width(0)).LineStyle(ls=>ls.Width(0))
.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg=>mg.Width(0)).MinorGridLines(mg=>mg.Width(0)).MajorTickLines(mt=>mt.Width(0)).
MinorTickLines(mt=>mt.Width(0)).LineStyle(ls=>ls.Width(0))
).PrimaryYAxis(py => py.LabelFormat("{value}K").Title("Sales").MajorTickLines(mt=>mt.Width(0)).LineStyle(ls=>ls.Width(0))
).Tooltip(tooltip => tooltip.Enable(true)).Title("Vehicle Sales by Region").Load("load").ChartArea(area => area.Border(br=>br.Color("transparent"))).Render()
</div>
<div class="col-lg-3 property-section">
<table id="property" title="Properties" style="width: 100%">
<tbody>
<tr style="height: 50px">
<td style="width: 60%">
<div>Descending:</div>
</td>
<td style="width: 40%;">
<div>
<input id='decending' type="checkbox" disabled />
</div>
</td>
</tr>
<tr style="height: 50px">
<td style="width: 60%">
<div>Sort By:</div>
</td>
<td style="width: 40%;">
<div>
@Html.EJS().DropDownList("sortmode").Index(0).DataSource(ViewBag.data).Value("None").Change("valueChange").Render()
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
@*custom code start*@
<style>
#control-container {
padding: 0px !important;
}
</style>
@*custom code end*@
<script>
var dataValues = [
{ x: 'Asia', car: 120, trucks: 90, bike: 180, cycle: 90 },
{ x: 'Canada', car: 100, trucks: 80, bike: 90, cycle: 80 },
{ x: 'Europe', car: 80, trucks: 90, bike: 60, cycle: 50 },
{ x: 'Africa', car: 40, trucks: 20, bike: 30, cycle: 30 },
{ x: 'Mexico', car: 40, trucks: 50, bike: 80, cycle: 50 },
{ x: 'US', car: 140, trucks: 90, bike: 75, cycle: 70 }
];
@*custom code start*@
var load = function (args) {
var selectedTheme = themeName ? themeName : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast');
}
@*custom code end*@
document.getElementById('decending').onchange = function () {
var sortMode = document.getElementById('sortmode').ej2_instances[0];
sortDataSource(sortMode.value + '');
};
var valueChange = function () {
var sortMode = document.getElementById('sortmode').ej2_instances[0];
sortDataSource(sortMode.value + '');
}
function sortDataSource(value) {
var chart = document.getElementById('container').ej2_instances[0];
var element = document.getElementById('decending');
var isDecending = element.checked;
element.disabled = false;
var sortData;
if (value === 'Sort by X') {
sortData = new ej.charts.sort(dataValues, ['x'], isDecending);
}
else if (value === 'Sort by Y') {
sortData = ej.charts.sort(dataValues, ['car', 'trucks', 'bike', 'cycle'], isDecending);
}
else {
element.disabled = true;
sortData = dataValues;
}
chart.series[0].animation.enable = false;
chart.series[1].animation.enable = false;
chart.series[2].animation.enable = false;
chart.series[3].animation.enable = false;
chart.series[0].dataSource = sortData;
chart.series[1].dataSource = sortData;
chart.series[2].dataSource = sortData;
chart.series[3].dataSource = sortData;
chart.refresh();
}
</script>
}
@*custom code start*@
@section Meta{
<meta name="description" content="This example demonstrates the Sorting in ASP.NET MVC Chart control. Explore here for more details."/>
}
@*custom code end*@
@section ActionDescription{
<p>
This sample visualizes sales for vehicle range for different zone with default stacked column series in chart. Legend in
the sample shows the information about those series.
</p>
}
@section Description{
<p>
In this example, you can see how to sort the series data in chart. To sort the data points of the series, use the <code>sort</code> method.
This method determines whether the series data points should be sorted by their arguments or values.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap a point in touch enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p>
Chart component features are segregated into individual feature-wise modules. To use stacking column series, we need to inject
<code>StackingColumnSeries</code> module using
<code>Chart.Inject(StackingColumnSeries)</code> method.
</p>
<p>
More information on the stacking column series can be found in this
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
</p>
}
@section Title{
<title>ASP.NET MVC Chart Sorting Example - Syncfusion Demos </title>
}
@section Header{
<h1 class='sb-sample-text'>Example of Sorting in ASP.NET MVC Chart Control</h1>
}