categoryAxis.selectObject
The selected axis range. If configured, axis selection will be enabled.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 },
{ date: new Date("2012/01/04"), close: 330, volume: 55000 },
{ date: new Date("2012/01/05"), close: 340, volume: 60000 }
]
},
dateField: "date",
categoryAxis: {
select: {
from: new Date("2012/01/02"),
to: new Date("2012/01/04")
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.select.fromString|Date
The lower boundary of the selected range.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 },
{ date: new Date("2012/01/04"), close: 330, volume: 55000 },
{ date: new Date("2012/01/05"), close: 340, volume: 60000 }
]
},
dateField: "date",
categoryAxis: {
select: {
from: new Date("2012/01/02")
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.select.toString|Date
The upper boundary of the selected range.
Note: The category with the specified date is not included in the selected range unless the axis is justified. In order to select all categories specify a value larger than the last category date.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 },
{ date: new Date("2012/01/04"), close: 330, volume: 55000 },
{ date: new Date("2012/01/05"), close: 340, volume: 60000 }
]
},
dateField: "date",
categoryAxis: {
select: {
to: new Date("2012/01/04")
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.select.minObject
The minimum value that is selectable by the user.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 },
{ date: new Date("2012/01/04"), close: 330, volume: 55000 },
{ date: new Date("2012/01/05"), close: 340, volume: 60000 }
]
},
dateField: "date",
categoryAxis: {
select: {
min: new Date("2012/01/01")
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.select.maxObject
The maximum value that is selectable by the user.
Note: The category with the specified index (date) is not included in the selected range unless the axis is justified. In order to select all categories specify a value larger than the last category index (date).
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 },
{ date: new Date("2012/01/04"), close: 330, volume: 55000 },
{ date: new Date("2012/01/05"), close: 340, volume: 60000 }
]
},
dateField: "date",
categoryAxis: {
select: {
max: new Date("2012/01/05")
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.select.mousewheelObject
Mousewheel zoom settings for the selection.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 },
{ date: new Date("2012/01/04"), close: 330, volume: 55000 },
{ date: new Date("2012/01/05"), close: 340, volume: 60000 }
]
},
dateField: "date",
categoryAxis: {
select: {
mousewheel: {
reverse: false,
zoom: "both"
}
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.select.mousewheel.reverseBoolean(default: true)
Reverses the mousewheel zoom direction. Normal direction is down for "zoom out", up for "zoom in".
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 },
{ date: new Date("2012/01/04"), close: 330, volume: 55000 },
{ date: new Date("2012/01/05"), close: 340, volume: 60000 }
]
},
dateField: "date",
categoryAxis: {
select: {
mousewheel: {
reverse: false
}
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.select.mousewheel.zoomString(default: "both")
The zoom direction. Possible values:
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 },
{ date: new Date("2012/01/04"), close: 330, volume: 55000 },
{ date: new Date("2012/01/05"), close: 340, volume: 60000 }
]
},
dateField: "date",
categoryAxis: {
select: {
mousewheel: {
zoom: "left"
}
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>"both"
Zooming expands and contracts the selection both sides.
"left"
Zooming expands and contracts the selection left side only.
"right"
Zooming expands and contracts the selection right side only.
In this article