Kendo UI Multi-axis chart datasource-CodePudding

We would like to draw a multi-axis chart with remote data binding. But it does not work with non-inline data source. We tried it

with inline data: OK
with local data: NOK
with remote data: NOK

This works - inline

$("#pareto").kendoChart({
    title: {
        text: "Pareto chart"
    },
    legend: {
        position: "bottom"
    },
    series:[
       {"type":"column","axis":"qty","color":"#3CA84B","name":"Quantity","data":[43]},
       {"type":"line","axis":"ratio","color":"#3279FD","name":"Ratio","data":[100]}
    ],
    valueAxis: [
        {
            name: "qty",
            title: {text: "Quantity"},
            min: 0
        },
        {
            name: "ratio",
            min: 0,
            max: 100,
            title: {text: "Ratio"},
        }
    ],
    categoryAxis: {
        categories: ["Something"],
        axisCrossingValue: [0, 10]
    },
    tooltip: {
        visible: true,
        format: "N0"
    }
});

This does NOT work - local:

let seriesData = [
    {"type":"column","axis":"qty","color":"#3CA84B","name":"Quantity","data":[43]},
    {"type":"line","axis":"ratio","color":"#3279FD","name":"Ratio","data":[100]}
];

dataSource: {
    data: seriesData,
},

This does NOT work - remote: (The remote source would give back the same structure as in the local variable above.)

dataSource: {
    transport: {
        read: {
            url: "/order/paretochart/7",
            dataType: "json"
        }
    },
},

CodePudding user response：

At first you need the set the series like this (add field name to each serie):

series:[
    {"type":"column","axis":"qty","color":"#3CA84B","name":"Quantity","field":"qtyf"},
    {"type":"line","axis":"ratio","color":"#3279FD","name":"Ratio","field":"ratiof"}
],

This needs to be given back by the remote source or to be set in the local value (seriesData):

[
    {"qtyf": 56,"ratiof": 100}
]

As many objects as many categoryAxis categories there is. The keys (qtyf, ratiof) are the field names, identifing the value axes for each category on the categoryAxis.