or
var
chartData = [
{ X: 0, serie1: 12, serie2: 16, serie3: 11 },
{ X: 0, serie1: 32, serie2: 12, serie3: 15 },
{ X: 1, serie1: 15, serie2: 18, serie3: 9 },
{ X: 1, serie1: 8, serie2: 13, serie3: 17 }
];
$(
'#chartContainer'
).kendoChart({
dataSource: {
data: chartData
},
theme:
'default'
,
legend: {
position:
'bottom'
},
seriesDefaults: {
type:
'column'
,
stack:
true
},
series:
[
{ field:
'serie1'
, name:
'serie1'
},
{ field:
'serie2'
, name:
'serie2'
},
{ field:
'serie3'
, name:
'serie3'
}
],
categoryAxis: {
field:
'X'
},
tooltip: {
visible:
true
}
});
But I end up with a graph where categories are repeated on the x axis. Is there a way I could have them grouped? Something that would look like this:
http://peltiertech.com/Utility/pix/clusterstackchart.png
Thank you!
<
div
data-role
=
"view"
id
=
"dashView"
data-layout
=
"mobile-view"
>
<
div
data-role
=
"view"
id
=
"dataA"
>
<
a
data-role
=
"button"
href
=
"#dataB"
>A</
a
>
</
div
>
<
div
data-role
=
"view"
id
=
"dataB"
>
<
a
data-role
=
"button"
href
=
"#dataC"
>B</
a
>
</
div
>
<
div
data-role
=
"view"
id
=
"dataC"
>
<
a
data-role
=
"button"
href
=
"#dataA"
>C</
a
>
</
div
>
</
div
>
<
script
type
=
"text/x-kendo-template"
id
=
"someTemplate"
>
<
div
>
<
label
> ${firstName}</
label
>
<
label
>${lastName}</
label
>
</
div
>
</
script
>
<
div
data-role
=
"grid"
data-bind
=
"source: people"
data-columns='[
{"field": "firstName",
"title": "Full Name",
"template": "kendo.template($("#someTemplate"))"
}
]'></
div
>
@(Html.Kendo().Grid((IEnumerable<
MyModel
>)ViewBag.Model)
.Name("Grid")
.Columns(columns =>
{
..
removed for brevity
..
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditorTemplate"))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(m => m.recordID))
.Create(update => update.Action("Create", "Controller"))
.Update(update => update.Action("Update", "Controller"))
.Destroy(update => update.Action("Destroy", "Controller"))
)
)
@(Html.Kendo().DropDownListFor(m => m.StateId)
.Name("StateId")
.DataTextField("StateName")
.DataValueField("StateId")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetStatesList", "Controller");
})
.ServerFiltering(true);
})
.SelectedIndex(0)
.OptionLabel("Select a State")
)
public JsonResult GetStatesList()
{
var states = client.GetStates();
return Json(states, JsonRequestBehavior.AllowGet);
}