|
| 1 | +--- |
| 2 | +title: Multiple Panes |
| 3 | +page_title: Multiple Panes |
| 4 | +description: "Learn how to configure the Telerik UI StockChart component for {{ site.framework }} with multiple panes." |
| 5 | +slug: multiple_panes_stockchart_aspnetcore |
| 6 | +position: 3 |
| 7 | +--- |
| 8 | + |
| 9 | +# Multiple Panes |
| 10 | + |
| 11 | +The StockChart allows you to create multiple panes with a shared category axis. |
| 12 | + |
| 13 | +Each pane represents a vertical sub-division with an individual value axis. To define multiple panes, apply the following options: |
| 14 | + |
| 15 | +1. Add the desired panes within the `Panes` configuration of the chart: |
| 16 | + |
| 17 | + ```HtmlHelper |
| 18 | + .Panes(panes => |
| 19 | + { |
| 20 | + panes.Add().Title("Value").Background("#ebedeb"); // The main chart pane. |
| 21 | + panes.Add("volume").Title("Volume").Height(150); // An additional pane. |
| 22 | + }) |
| 23 | + ``` |
| 24 | + {% if site.core %} |
| 25 | + ```TagHelper |
| 26 | + <panes> |
| 27 | + <pane> <!-- The main chart pane.--> |
| 28 | + <chart-pane-title text="Value" background="#ebedeb"></chart-pane-title> |
| 29 | + </pane> |
| 30 | + <pane name="volume" height="150"> <!-- An additional pane.--> |
| 31 | + <chart-pane-title text="Volume"></chart-pane-title> |
| 32 | + </pane> |
| 33 | + </panes> |
| 34 | + ``` |
| 35 | + {% endif %} |
| 36 | +
|
| 37 | +1. Specify a value axis for each pane. By using the `Pane` option, set the pane name where the respective axis must be rendered. |
| 38 | +
|
| 39 | + ```HtmlHelper |
| 40 | + .ValueAxis(axis => axis.Numeric("valueAxis")) // The value axis that renders in the main pane. |
| 41 | + .ValueAxis(axis => axis.Numeric("volumeAxis").Pane("volume")) // The value axis that renders in the "volume" pane. |
| 42 | + ``` |
| 43 | + {% if site.core %} |
| 44 | + ```TagHelper |
| 45 | + <value-axis> |
| 46 | + <value-axis-item type="numeric" name="valueAxis"></value-axis-item> <!-- The value axis that renders in the main pane. --> |
| 47 | + <value-axis-item type="numeric" name="volumeAxis" pane="volume"></value-axis-item> <!-- The value axis that renders in the "volume" pane.--> |
| 48 | + </value-axis> |
| 49 | + ``` |
| 50 | + {% endif %} |
| 51 | +
|
| 52 | +1. Assign the series on a value axis, which is placed in the desired pane. |
| 53 | +
|
| 54 | + ```HtmlHelper |
| 55 | + .Series(series => |
| 56 | + { |
| 57 | + series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close).Axis("valueAxis"); |
| 58 | + series.Column(s => s.Volume).Axis("volumeAxis"); |
| 59 | + }) |
| 60 | + ``` |
| 61 | + {% if site.core %} |
| 62 | + ```TagHelper |
| 63 | + <series> |
| 64 | + <series-item type="ChartSeriesType.Candlestick" axis="valueAxis" open-field="Open" high-field="High" low-field="Low" close-field="Close"></series-item> |
| 65 | + <series-item type="ChartSeriesType.Column" axis="volumeAxis" field="Volume"> |
| 66 | + </series-item> |
| 67 | + </series> |
| 68 | + ``` |
| 69 | + {% endif %} |
| 70 | +
|
| 71 | +1. Position the category axis in the desired pane by setting the name of the pane through the `Pane` option. |
| 72 | +
|
| 73 | + ```HtmlHelper |
| 74 | + .CategoryAxis(axis => axis.Pane("volume")) |
| 75 | + ``` |
| 76 | + {% if site.core %} |
| 77 | + ```TagHelper |
| 78 | + <category-axis> |
| 79 | + <category-axis-item pane="volume"></category-axis-item> |
| 80 | + </category-axis> |
| 81 | + ``` |
| 82 | + {% endif %} |
| 83 | +
|
| 84 | +The following example shows a complete configuration of a StockChart with **Value** and **Volume** panes. The category axis is displayed within the **Volume** pane. |
| 85 | +
|
| 86 | +```HtmlHelper |
| 87 | + @(Html.Kendo().StockChart<StockDataPoint>() |
| 88 | + .Name("stockChart") |
| 89 | + .Title("The Boeing Company (NYSE:BA)") |
| 90 | + .DataSource(ds => ds.Read(read => read |
| 91 | + .Action("_StockData", "Home") |
| 92 | + )) |
| 93 | + .DateField("Date") |
| 94 | + .Panes(panes => |
| 95 | + { |
| 96 | + panes.Add().Title("Value").Background("#ebedeb"); |
| 97 | + panes.Add("volume").Title("Volume").Height(150); |
| 98 | + }) |
| 99 | + .CategoryAxis(axis => axis.Pane("volume")) |
| 100 | + .ValueAxis(axis => axis.Numeric("valueAxis")) |
| 101 | + .ValueAxis(axis => axis.Numeric("volumeAxis").Pane("volume")) |
| 102 | + .Series(series => |
| 103 | + { |
| 104 | + series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close).Axis("valueAxis"); |
| 105 | + series.Column(s => s.Volume).Axis("volumeAxis"); |
| 106 | + }) |
| 107 | + ) |
| 108 | +``` |
| 109 | +{% if site.core %} |
| 110 | +```TagHelper |
| 111 | + <kendo-stockchart name="stockChart" date-field="Date"> |
| 112 | + <chart-title text="The Boeing Company (NYSE:BA)"></chart-title> |
| 113 | + <datasource> |
| 114 | + <transport> |
| 115 | + <read url="@Url.Action("_StockData", "Home")" /> |
| 116 | + </transport> |
| 117 | + <schema> |
| 118 | + <model> |
| 119 | + <fields> |
| 120 | + <field name="Date" type="date"></field> |
| 121 | + <field name="Close" type="number"></field> |
| 122 | + <field name="Volume" type="number"></field> |
| 123 | + <field name="Open" type="number"></field> |
| 124 | + <field name="High" type="number"></field> |
| 125 | + <field name="Low" type="number"></field> |
| 126 | + <field name="Symbol" type="string"></field> |
| 127 | + </fields> |
| 128 | + </model> |
| 129 | + </schema> |
| 130 | + </datasource> |
| 131 | + <panes> |
| 132 | + <pane background="#ebedeb"> |
| 133 | + <chart-pane-title text="Value" ></chart-pane-title> |
| 134 | + </pane> |
| 135 | + <pane name="volume" height="150"> |
| 136 | + <chart-pane-title text="Volume"></chart-pane-title> |
| 137 | + </pane> |
| 138 | + </panes> |
| 139 | + <category-axis> |
| 140 | + <category-axis-item pane="volume"></category-axis-item> |
| 141 | + </category-axis> |
| 142 | + <value-axis> |
| 143 | + <value-axis-item type="numeric" name="valueAxis"></value-axis-item> |
| 144 | + <value-axis-item type="numeric" name="volumeAxis" pane="volume"></value-axis-item> |
| 145 | + </value-axis> |
| 146 | + <series> |
| 147 | + <series-item type="ChartSeriesType.Candlestick" aixs="valueAxis" open-field="Open" high-field="High" low-field="Low" close-field="Close"></series-item> |
| 148 | + <series-item type="ChartSeriesType.Column" axis="volumeAxis" field="Volume"> |
| 149 | + </series-item> |
| 150 | + </series> |
| 151 | + </kendo-stockchart> |
| 152 | +``` |
| 153 | +```HomeController |
| 154 | + public IActionResult _StockData() |
| 155 | + { |
| 156 | + using (var db = GetContext()) |
| 157 | + { |
| 158 | + // Return the data as JSON. |
| 159 | + return Json( |
| 160 | + (from s in db.Stocks |
| 161 | + where s.Symbol == "BA" |
| 162 | + select new StockDataPoint |
| 163 | + { |
| 164 | + Date = s.Date, |
| 165 | + Open = s.Open, |
| 166 | + High = s.High, |
| 167 | + Low = s.Low, |
| 168 | + Close = s.Close, |
| 169 | + Volume = s.Volume |
| 170 | + }).ToList() |
| 171 | + ); |
| 172 | + } |
| 173 | + } |
| 174 | +``` |
| 175 | +{% else %} |
| 176 | +```HomeController |
| 177 | + public ActionResult _StockData() |
| 178 | + { |
| 179 | + using (var db = GetContext()) |
| 180 | + { |
| 181 | + // Return the data as JSON. |
| 182 | + return Json( |
| 183 | + (from s in db.Stocks |
| 184 | + where s.Symbol == "BA" |
| 185 | + select new StockDataPoint |
| 186 | + { |
| 187 | + Date = s.Date, |
| 188 | + Open = s.Open, |
| 189 | + High = s.High, |
| 190 | + Low = s.Low, |
| 191 | + Close = s.Close, |
| 192 | + Volume = s.Volume |
| 193 | + }).ToList(), |
| 194 | + JsonRequestBehavior.AllowGet |
| 195 | + ); |
| 196 | + } |
| 197 | + } |
| 198 | +``` |
| 199 | +{% endif %} |
| 200 | +```Model |
| 201 | + public class StockDataPoint |
| 202 | + { |
| 203 | + public DateTime Date { get; set; } |
| 204 | + public decimal Close { get; set; } |
| 205 | + public long Volume { get; set; } |
| 206 | + public decimal Open { get; set; } |
| 207 | + public decimal High { get; set; } |
| 208 | + public decimal Low { get; set; } |
| 209 | + public string Symbol { get; set; } |
| 210 | + } |
| 211 | +``` |
| 212 | + |
| 213 | +## See Also |
| 214 | + |
| 215 | +* [Configuring Multiple Panes of the StockChart for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/financial/panes) |
| 216 | +* [Client-Side API of the StockChart](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/stock-chart) |
| 217 | +* [Server-Side API of the StockChart](/api/stockchart) |
0 commit comments