state Object
Specifies the state of the ChartWizard component. If a state object is provided, the ChartWizard will neglect the dataSource and the creation of an initial state and will use this state instance instead.
In order to work as expected, the CharWizard requires the
stateobject to have defined data and series fields.
Example - configure the initial state of the ChartWizard
<div id="chartwizard"></div>
<script>
$("#chartwizard").kendoChartWizard({
window: {
visible: true
},
state: {
columns: [
"Product Name",
"Quantity",
"Price",
"Tax",
"Total"
],
data: [
[{
field: "Product Name",
value: "Calzone"
},{
field: "Quantity",
value: 1
},{
field: "Price",
value: 12.39
},{
field: "Tax",
value: 2.48
},{
field: "Total",
value: 14.87
}],
[{
field: "Product Name",
value: "Neapolitana"
},{
field: "Quantity",
value: 2
},{
field: "Price",
value: 7.39
},{
field: "Tax",
value: 1.23
},{
field: "Total",
value: 8.62
}]
],
series: [
{
name: "Quantity",
type: "bar",
data: [
1
],
stack: false,
labels: {
visible: false
},
id: 0
},
{
name: "Price",
type: "bar",
data: [
12.39
],
stack: false,
labels: {
visible: false
},
id: 1
},
{
name: "Tax",
type: "bar",
data: [
2.48
],
stack: false,
labels: {
visible: false
},
id: 2
},
{
name: "Total",
type: "bar",
data: [
14.87
],
stack: false,
labels: {
visible: false
},
id: 3
}
],
initialSeries: [
{
name: "Quantity",
type: "bar",
data: [
1
],
stack: false,
labels: {
visible: false
},
id: 0
},
{
name: "Price",
type: "bar",
data: [
12.39
],
stack: false,
labels: {
visible: false
},
id: 1
},
{
name: "Tax",
type: "bar",
data: [
2.48
],
stack: false,
labels: {
visible: false
},
id: 2
},
{
name: "Total",
type: "bar",
data: [
14.87
],
stack: false,
labels: {
visible: false
},
id: 3
}
],
categoryAxis: [
{
categories: [
"Calzone"
],
labels: {
visible: true,
rotation: "auto"
}
}
],
valueAxis: [
{
labels: {
visible: true,
rotation: "auto"
}
}
],
area: {
margin: {}
},
title: {
text: ""
},
subtitle: {
text: ""
},
stack: false,
seriesType: "bar",
legend: {
visible: true,
position: "bottom"
},
categoryField: "Product Name",
chartArea: {
margin: {}
}
}
});
</script>Related Properties
- state.initialSeries.categoryField
- state.initialSeries.name
- state.initialSeries.color
- state.initialSeries.data
- state.initialSeries.field
- state.initialSeries.labels
- state.initialSeries.labels.visible
- state.initialSeries.stack
- state.initialSeries.stack.type
- state.initialSeries.type
- state.initialSeries.width
- state.series.categoryField
- state.series.name
- state.series.color
- state.series.data
- state.series.field
- state.series.labels
- state.series.labels.visible
- state.series.stack
- state.series.stack.type
- state.series.type
- state.series.width
- state.title.color
- state.title.font
- state.title.text
- state.subtitle.color
- state.subtitle.font
- state.subtitle.text
- state.area.background
- state.area.margin
- state.area.margin.bottom
- state.area.margin.left
- state.area.margin.right
- state.area.margin.top
- state.categoryAxis.labels
- state.categoryAxis.labels.color
- state.categoryAxis.labels.font
- state.categoryAxis.labels.format
- state.categoryAxis.labels.rotation
- state.categoryAxis.labels.visible
- state.categoryAxis.title
- state.categoryAxis.title.color
- state.categoryAxis.title.font
- state.categoryAxis.title.text
- state.categoryAxis.reverse
- state.categoryAxis.categories
- state.valueAxis.labels
- state.valueAxis.labels.color
- state.valueAxis.labels.font
- state.valueAxis.labels.format
- state.valueAxis.labels.rotation
- state.valueAxis.reverse
- state.valueAxis.title
- state.valueAxis.title.text
- state.valueAxis.title.color
- state.valueAxis.title.font
- state.legend.labels
- state.legend.labels.color
- state.legend.labels.font
- state.legend.position
- state.legend.visible
- state.stack.type