$("#mChart").kendoChart({
legend: {
position: "bottom",
orientation: "horizontal"
},
seriesDefaults: {
overlay: { gradient: "none" },
visual: function (e) {
return createColumn(e.rect, e.options.color);
}
},
series: [{
type: "column",
data: data1,
stack: true,
name: "on battery",
color: "#d2d2d2",
axis: "kWh"
},{
type: "line",
data: data2,
name: "mpg",
color: "#ec5e0a",
axis: "mpg"
}, {
type: "line",
data: data3,
name: "l/100 km",
color: "#4e4141",
axis: "l100km"
}],
valueAxes: [{
name: "kWh",
title: { text: "kWh" },
min: 0,
max: 161,
majorUnit: 32,
color: "#006ef0"
}, {
name: "mpg",
title: { text: "℃" },
color: "#ec5e0a"
}, {
name: "l100km",
title: { text: "%" },
color: "#4e4141"
}],
categoryAxis: {
categories: category,
// Align the first two value axes to the left
// and the last two to the right.
//
// Right alignment is done by specifying a
// crossing value greater than or equal to
// the number of categories.
axisCrossingValues: [0, 24, 24]
}
});
function createColumn(rect, color) {
var center = rect.center();
var origin = rect.origin;
var curveDistance = rect.size.width / 3;
var x = rect.origin.x;
var y = rect.origin.y;
var bottomRight = rect.bottomRight();
var bottomRightX = bottomRight.x;
var bottomRightY = bottomRight.y;
var gradient = new drawing.LinearGradient({
stops: [{
offset: 0,
color: color
}]
});
var path = new drawing.Path({
fill: gradient,
stroke: {
color: "none"
}
}).moveTo(bottomRightX - curveDistance, y)
.curveTo([bottomRightX, y], [bottomRightX, y], [bottomRightX, y + curveDistance])
.lineTo([bottomRightX, bottomRightY - curveDistance])
.curveTo(bottomRight, bottomRight, [bottomRightX - curveDistance, bottomRightY])
.lineTo([x + curveDistance, bottomRightY])
.curveTo([x, bottomRightY], [x, bottomRightY], [x, bottomRightY - curveDistance])
.lineTo(x, y + curveDistance)
.curveTo([x, y], [x, y], [x + curveDistance, y])
.close();
var topArcGeometry = new geometry.Arc([center.x, origin.y], {
/* startAngle: 0,
endAngle: 360,
radiusX: radiusX,
radiusY: radiusY */
});
var topArc = new drawing.Arc(topArcGeometry, {
fill: {
color: color
},
stroke: {
/*color: "#ebebeb"*/
}
});
var group = new drawing.Group();
// group.append(path, topArc);
group.append(path);
return group;
}
