This is a migrated thread and some comments may be shown as answers.

[Solved] MultiAxisChart

1 Answer 138 Views

Charts

This is a migrated thread and some comments may be shown as answers.

Brahadesh asked on 15 Oct 2014, 12:42 PM

I need to create a Multi-Axis chart ,

Double bar chart … Dual Axis
1st bar -> Sales 2nd bar -> Cost
Color coded by State
Line -> Sales Margin
By Month as X-Axis

I am using json web service to bind data.

I am not able to figure out. Please need a help

$("#Chart").kendoChart({
dataSource: {
data: result
},
legend: {
visible: false
},
series: [{
type:"column",
field: "Sales",
name: "Sales",
color: "#3A5ECF",
categoryField: "MonthName",
tooltip: {
visible: true,
template: "#= kendo.toString(value, 'c') # ",
}
}, {
type:"column",
field: "Cost",
name: "Cost",
categoryField: "MonthName",
color: "#87F5F3",
tooltip: {
visible: true,
template: "#= kendo.toString(value, 'c') # ",
}
}
, {
type: "line",
field: "ContributionMargin",
name: "ContributionMargin",
color: "#CCCCCC",
axis: "ContributionMargin",
tooltip: {
visible: true,
format: "{0}%",
}
}],
valueAxes: [
{
title: { text: "Sales" },
labels: {
format: "#= kendo.toString(value, 'c') # "
}
},
{
name: "ContributionMargin",
title: { text: "Contribution Margin" },
labels: {
format: "{0}%"
}
}],

categoryAxis: {
majorGridLines: {
visible: false
},
field: "State",
axisCrossingValues: [0, 200]
}

});

[Solved] MultiAxisChart

1 Answer, 1 is accepted