forked from syncfusion/ej2-aspnetcore-samples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPolarLine.cshtml
147 lines (142 loc) · 6.62 KB
/
PolarLine.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{
@{
var Polar = "Polar";
}
<div class="control-section col-lg-9">
<ejs-chart id="container" load="window.onChartLoad" title="Alaska Weather Statistics - 2016">
<e-chart-tooltipsettings enable="true">
</e-chart-tooltipsettings>
<e-chart-primaryxaxis interval="1" labelPlacement="OnTicks" valueType="Category" title="Months"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Temperature (Celsius)" minimum="-25" maximum="25" interval="10" edgeLabelPlacement="Shift" labelFormat="{value}°C"></e-chart-primaryyaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="xValue" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar">
<e-series-marker visible="true" height="10" width="10" shape="Pentagon"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="England" xName="xValue" width="2" opacity="1" yName="yValue1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar">
<e-series-marker visible="true" height="10" width="10" shape="Diamond"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
<div class="col-lg-3 property-section">
<table id="property" title="Properties" style="width: 100%">
<tbody>
<tr style="height: 50px">
<td style="width: 50%">
<div>
Series Type:
</div>
</td>
<td style="width: 50%;">
<ejs-dropdownlist id="series" dataSource="@ViewBag.data" change="onChange" value="Polar" index="0" popupHeight="220px"></ejs-dropdownlist>
</td>
</tr>
<tr style="height: 50px">
<td style="width: 50%">
<div>Closed: </div>
</td>
<td style="width: 50%;">
<div>
<input type="checkbox" id="isClosed" checked="">
</div>
</td>
</tr>
<tr style="height: 50px">
<td style="width: 30%">
<div>
Start Angle:
<p id="startAngleValue" style="font-weight: normal;">0</p>
</div>
</td>
<td style="width: 70%;">
<div data-role="rangeslider">
<input type="range" name="range-min" id="startangle" value="0" min="0" max="360" style="width:90%">
</div>
</td>
</tr>
<tr style="height: 50px">
<td style="width: 50%">
<div>Inversed: </div>
</td>
<td style="width: 50%;">
<div>
<input type="checkbox" id="isinversed">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script>
document.getElementById('isClosed').onchange = () => {
var chart = document.getElementById('container').ej2_instances[0];
var element = (document.getElementById('isClosed'));
chart.series[0].isClosed = element.checked;
chart.series[1].isClosed = element.checked;
chart.series[0].animation.enable = false;
chart.series[1].animation.enable = false;
chart.refresh();
};
document.getElementById('isinversed').onchange = () => {
var chart = document.getElementById('container').ej2_instances[0];
var element = (document.getElementById('isinversed'));
chart.primaryXAxis.isInversed = element.checked;
chart.primaryYAxis.isInversed = element.checked;
chart.dataBind();
};
document.getElementById('startangle').onpointermove = document.getElementById('startangle').ontouchmove = () => {
var chart = document.getElementById('container').ej2_instances[0];
var element = (document.getElementById('startangle'));
chart.primaryXAxis.startAngle = parseInt(element.value, 10);
document.getElementById('startAngleValue').innerHTML = parseInt(element.value, 10) + '';
chart.series[0].animation.enable = false;
chart.series[1].animation.enable = false;
chart.refresh();
};
function onChange(args) {
var chart = document.getElementById("container").ej2_instances[0];
chart.series[0].type = this.value;
chart.refresh();
}
@* custom code start *@
window.onChartLoad = function (args) {
var selectedTheme = themeName ? themeName : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1).replace(/dark/i, "Dark").replace(/light/i, "Light"));
}
@* custom code end *@
</script>
}
@*custom code start*@
<style>
#control-container {
padding: 0px !important;
}
</style>
@*custom code end*@
}
@*custom code start*@
@section Meta{
<meta name="description" content="This demo for Essential JS2 Chart control shows how to render line in polar and radar charts." />
}
@*custom code end*@
@section ActionDescription{
<p>
This sample visualizes the consumer price data with default line series in the chart.
Data points are enhanced with marker and tooltip
</p>
}
@section Description{
<p>
In this example, you can see how to render and configure the line type charts. Line type charts are used to represent time-dependent data, showing trends in data at equal intervals.
You can use <code>dashArray</code>, <code>width</code>, <code>fill</code> properties to customize the line. <code>marker</code> and <code>dataLabel</code> are used to represent individual data and its value.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br>
<p>
More information on the line 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>
}