Skip to content

Commit 51752d3

Browse files
IankodjIankodj
committed
Added examples in HtmlChart-Panning and Zooming article
1 parent e1d98b5 commit 51752d3

File tree

1 file changed

+90
-4
lines changed

1 file changed

+90
-4
lines changed

‎controls/htmlchart/functionality/panning-zooming.md‎

Lines changed: 90 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,97 @@ position: 7
99
---
1010

1111
# Panning and Zooming
12-
As of **Q1 2016**, **RadHtmlChart** exposes **Pan** and **Zoom** features for category and numeric series. These features help the end-user to navigate and zoom the chart.
12+
**Pan** and **Zoom** help end-user to navigate through and zoom in/out the **RadHtmlChart**. You can find here more details how to configure and adjust these features.
1313

14-
>caption Figure 1: Chart that can be panned to all directions.
14+
**Pan** and **Zoom** are supported in **RadHtmlChart** as of **Q1 2016**.
15+
16+
>caption Figure 1: Chart that can be panned to all directions (the result from the configuration in Example 1).
1517
1618
![](images/HtmlChart-Pan-Lock-None.png)
1719

18-
>caption Figure 2: Chart that is zoomed using Selection, where selection is locked for Y axis.
20+
>caption Example 1: Enabling Pan in HtmlChart.
21+
22+
````ASP.NET
23+
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">
24+
<Pan Enabled="true" />
25+
<PlotArea>
26+
<Series>
27+
<telerik:ColumnSeries>
28+
<Items>
29+
<telerik:SeriesItem YValue="10" />
30+
<telerik:SeriesItem YValue="15" />
31+
<telerik:SeriesItem YValue="53" />
32+
<telerik:SeriesItem YValue="0" />
33+
<telerik:SeriesItem YValue="120" />
34+
<telerik:SeriesItem YValue="15" />
35+
<telerik:SeriesItem YValue="6" />
36+
<telerik:SeriesItem YValue="29" />
37+
<telerik:SeriesItem YValue="31" />
38+
<telerik:SeriesItem YValue="22" />
39+
<telerik:SeriesItem YValue="86" />
40+
<telerik:SeriesItem YValue="24" />
41+
<telerik:SeriesItem YValue="53" />
42+
<telerik:SeriesItem YValue="39" />
43+
<telerik:SeriesItem YValue="29" />
44+
<telerik:SeriesItem YValue="150" />
45+
<telerik:SeriesItem YValue="45" />
46+
</Items>
47+
</telerik:ColumnSeries>
48+
</Series>
49+
<XAxis MinValue="2" MaxValue="15">
50+
<MinorGridLines Visible="false"/>
51+
</XAxis>
52+
<YAxis MinValue="0" MaxValue="140"/>
53+
</PlotArea>
54+
</telerik:RadHtmlChart>
55+
````
56+
57+
>caption Figure 2: Chart that is zoomed using Selection, where selection is locked for Y axis (the result from the configuration in Example 2).
1958
2059
![](images/HtmlChart-Zoom-Selection.png)
2160

22-
Here you can the full list if the available **Pan** and **Zoom** properties and options:
61+
>caption Example 2: Enabling MouseWheel-Zoom and with Selection-Zoom locked for Y axis.
62+
63+
````ASP.NET
64+
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">
65+
<Pan Enabled="true" />
66+
<Zoom Enabled="true">
67+
<MouseWheel Enabled="true" Lock="Y" />
68+
<Selection Enabled="true" Lock="Y" ModifierKey="Shift" />
69+
</Zoom>
70+
<PlotArea>
71+
<Series>
72+
<telerik:ColumnSeries>
73+
<Items>
74+
<telerik:SeriesItem YValue="10" />
75+
<telerik:SeriesItem YValue="15" />
76+
<telerik:SeriesItem YValue="53" />
77+
<telerik:SeriesItem YValue="0" />
78+
<telerik:SeriesItem YValue="120" />
79+
<telerik:SeriesItem YValue="15" />
80+
<telerik:SeriesItem YValue="6" />
81+
<telerik:SeriesItem YValue="29" />
82+
<telerik:SeriesItem YValue="31" />
83+
<telerik:SeriesItem YValue="22" />
84+
<telerik:SeriesItem YValue="86" />
85+
<telerik:SeriesItem YValue="24" />
86+
<telerik:SeriesItem YValue="53" />
87+
<telerik:SeriesItem YValue="39" />
88+
<telerik:SeriesItem YValue="29" />
89+
<telerik:SeriesItem YValue="150" />
90+
<telerik:SeriesItem YValue="45" />
91+
</Items>
92+
</telerik:ColumnSeries>
93+
</Series>
94+
<XAxis MinValue="2" MaxValue="15">
95+
<MinorGridLines Visible="false" />
96+
</XAxis>
97+
<YAxis MinValue="0" MaxValue="140"></YAxis>
98+
</PlotArea>
99+
</telerik:RadHtmlChart>
100+
````
101+
102+
You can find the full list of the available **Pan** and **Zoom** properties in the following sections.
23103

24104
## Pan
25105

@@ -63,6 +143,12 @@ If **Selection** is enabled without a modifier key (or if **ModifierKey** proper
63143
* _X_—X axis is locked, i.e., user can zoom only by Y axis.
64144
* _Y_—Y axis is locked. i.e., user can zoom only by X axis (**Figure 2**).
65145

146+
## Controlling Initial View
147+
148+
In order to render the chart with some initial zoom level, you can use the min (**MinValue** property) and max (**MaxValue** property) values of the axis to be zoomed.
149+
150+
In examples **1** and **2** you can see how defining initially the min and max values actually zoom accordingly into X and Y axis. Thus, enabling the end user to either zoom or pan the chart.
151+
66152
## See Also
67153

68154
* [Demo: Panning and Zooming](http://demos.telerik.com/aspnet-ajax/HtmlChart/Examples/Functionality/Panning-Zooming/DefaultCS.aspx)

0 commit comments

Comments
 (0)