Scatter line with multi axis for grouped data

2 posts, 0 answers
  1. Kieren
    Kieren avatar
    6 posts
    Member since:
    Jun 2013

    Posted 09 Jul 2013 Link to this post

    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"}]
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 11 Jul 2013 Link to this post

    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!
Back to Top