Scatter line with multi axis for grouped data

[Kieren]

Hi

I am attempting to build a scatter line for grouped data and multi-axis from a remote source. Each grouped series is rendering to each Y-axis. 

Group S1 should render to X & Y1 axis
Group S2 should render to X & Y2 axis

What is actually happening is:
Group S1 & S2 are rendering to X & Y1 axis
Group S2 & S2 are rendering to X & Y2 axis

Is it possible to render groups to specific axis?

var stocksDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: function () {
                return <%= url %>;
            },
            dataType: "json"
        }
    },

    group: {
        field: "GroupId"
    },

    sort: {
        field: "X1",
        dir: "asc"
    },

    schema: {
        model: {
            fields: {
                X1: {
                    type: "date"
                }
            }
        }
    }
});

function createChart() {
    $("#chart").kendoChart({
        title: { text: "Stock Prices" },
        dataSource: stocksDataSource,
        series: [{
            type: "scatterLine",
            xField: "X1",
            yField: "Y1",
            yAxis: "abc",
            name: "Y1",
            groupNameTemplate: "#= group.value # (#= series.name #)"
        },
        {
            type: "scatterLine",
            xField: "X1",
            yField: "Y2",
            yAxis: "torque",
            name: "Y2",
            groupNameTemplate: "#= group.value # (#= series.name #)"
        }],
        legend: {
            position: "bottom"
        },
        yAxes: [{
            name: "abc",
            title: {
                text: "Power (bhp)"
            }
        }, {
            name: "torque",
            title: {
                text: "Torque (lb-ft)"
            }
        }],
        xAxis: {
            labels: {
                format: "dd MMM yy"
            }
        }
    });
}

$(document).ready(function () {
    setTimeout(function () {
        // Initialize the chart with a delay to make sure
        // the initial animation is visible
        createChart();

        $("#example").bind("kendo:skinChange", function (e) {
            createChart();
        });
    }, 400);
});

Data:

[{"X1":"2012-01-20T00:00:00","Y1":100.0,"GroupId":"S1"},{"X1":"2013-01-02T00:00:00","Y1":110.0,"GroupId":"S1"},{"X1":"2013-01-03T00:00:00","Y1":110.0,"GroupId":"S1"},{"X1":"2013-01-03T00:00:00","Y1":110.0,"GroupId":"S1"},{"X1":"2013-01-03T00:00:00","Y1":110.0,"GroupId":"S1"},{"X1":"2013-01-04T00:00:00","Y1":120.0,"GroupId":"S1"},{"X1":"2013-01-05T00:00:00","Y1":130.0,"GroupId":"S1"},{"X1":"2013-01-06T00:00:00","Y1":140.0,"GroupId":"S1"},{"X1":"2013-01-10T00:00:00","Y1":150.0,"GroupId":"S1"},{"X1":"2013-01-01T00:00:00","Y2":1.0,"GroupId":"S2"},{"X1":"2013-01-02T00:00:00","Y2":2.0,"GroupId":"S2"},{"X1":"2013-01-03T00:00:00","Y2":3.0,"GroupId":"S2"},{"X1":"2013-01-03T00:00:00","Y2":4.0,"GroupId":"S2"},{"X1":"2013-01-03T00:00:00","Y2":5.0,"GroupId":"S2"},{"X1":"2013-01-04T00:00:00","Y2":6.0,"GroupId":"S2"},{"X1":"2013-01-05T00:00:00","Y2":7.0,"GroupId":"S2"},{"X1":"2013-01-06T00:00:00","Y2":8.0,"GroupId":"S2"},{"X1":"2013-01-07T00:00:00","Y2":9.0,"GroupId":"S2"}]

[Iliana Dyankova]

Hello Kieren,

Apologies for not getting back to you earlier.

I am afraid this is not supported out-of-the-box, however you could workaround it and set specific axis to each of the groups through the chart.options. I.e.: 

//get reference to the chart widget
var chart = $("#chart").data("kendoChart")
//get series
var chartSeries = chart.options.series;
//set axis to each of the series
chartSeries[0].yAxis = "abc"
chartSeries[1].yAxis = "torque"
chartSeries[2].yAxis = "abc"
chartSeries[3].yAxis = "torque"
//refresh the chart
chart.refresh();

Regards,
Iliana Nikolova
Telerik