or
"#= html #"
"html"
:
"<span>Hello world!</span>"
,
"instanceId"
:
"10A"
,
"data"
:
null
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
>