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

Scatter line with multi axis for grouped data

1 Answer 122 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Kieren
Top achievements
Rank 1
Kieren asked on 09 Jul 2013, 05:47 AM
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"}]

1 Answer, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 11 Jul 2013, 06:47 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Kieren
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Share this question
or