2 DataSources in one chart

5 posts, 0 answers
  1. Jamie
    Jamie avatar
    6 posts
    Member since:
    Jul 2013

    Posted 22 Jul 2013 Link to this post

    Kendo Devs,

    I am looking to display one line and one bar series upon the same set of axes, however each will pull from a different API URL, therefore does anyone know how to combine two DataSources into one chart?

    Below is my code so far; the bar series (dataseries1) successfully pulls data from the API  and plots it as a bar chart on the axes; I have manually extracted Y values for the line series and passed them in as a .data array as you will see in the code; in an ideal world, i would like to be able to add 'dataSource: dataseries1,'  into the  line series. The commented out data is what the API returns.

    // var dataseries1 = {"Id":4,"Legend":"Label","Description":"Description","DataSeries":{"Data":[{"X":"22","Y":[26000.0]},{"X":"79","Y":[24000.0]},{"X":"70","Y":[23400.0]},{"X":"34","Y":[22500.0]},{"X":"29","Y":[22050.0]},{"X":"10","Y":[21666.666666666668]},{"X":"42","Y":[20200.0]},{"X":"32","Y":[19500.0]},{"X":"59","Y":[19000.0]},{"X":"23","Y":[19000.0]},{"X":"80","Y":[18888.888888888891]},{"X":"19","Y":[18750.0]},{"X":"21","Y":[17399.909677419353]},{"X":"40","Y":[16227.272727272728]},{"X":"99","Y":[16028.571428571429]},{"X":"50","Y":[15000.0]},{"X":"11","Y":[14833.333333333334]},{"X":"60","Y":[14272.727272727272]},{"X":"61","Y":[13000.0]},{"X":"89","Y":[13000.0]},{"X":"82","Y":[12611.952380952382]},{"X":"33","Y":[12000.0]}]}};
                var dataseries1 = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "APIURL",
                            dataType: "json",
                        }
                    },
                    schema: { data: function(response) { return response.DataSeries.Data; } }
                });
                // var dataseries2 = {"Id":5,"Legend":"Label","Description":"Description","DataSeries":{"Data":[{"X":"22","Y":[2]},{"X":"79","Y":[3]},{"X":"70","Y":[5]},{"X":"34","Y":[2]},{"X":"29","Y":[20]},{"X":"10","Y":[3]},{"X":"42","Y":[5]},{"X":"32","Y":[2]},{"X":"59","Y":[3]},{"X":"23","Y":[1]},{"X":"80","Y":[9]},{"X":"19","Y":[4]},{"X":"21","Y":[155]},{"X":"40","Y":[22]},{"X":"99","Y":[420]},{"X":"50","Y":[10]},{"X":"11","Y":[6]},{"X":"60","Y":[11]},{"X":"61","Y":[1]},{"X":"89","Y":[1]},{"X":"82","Y":[21]},{"X":"33","Y":[1]}]}};
                var dataseries2 = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "APIURL",
                            dataType: "json",
                        }
                    },
                    schema: { data: function(response) { return response.DataSeries.Data; } }
                });
                $("#chart").kendoChart({
                    title: { text: "TITLE" },
                    dataSource: dataseries1,
                    series: [
                        { type: "column", field: "Y[0]", name: "NAME", axis: "LABEL", visibleInLegend: false },
                        { type: "line", name: "NAME", visibleInLegend: false, axis: "LABEL", data: [ 2, 3, 5, 2, 20, 3, 5, 2, 3, 1, 9, 4, 155, 22, 420, 10, 6, 11, 1, 1, 21, 1 ]  }
                    ],
                    categoryAxis: { field: "X", title: { text: "LABEL" }, axisCrossingValue: [0, 99999999] },
                    valueAxis: [
                        { name: "LABEL", title: { text: "UNITS" } },
                        { name: "LABEL", title: { text: "UNITS" } }
     
                    ],
                    tooltip: { visible: true }
                });


    Thanks in advance,
    Jamie
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 22 Jul 2013 Link to this post

    Hello Jamie,

    I am afraid what you would like to achieve is currently not supported - Kendo UI Chart can be bound to only one DataSource. We realize this is limitation of the framework and will do our best to provide an option for separate series' dataSources for future releases. Please excuse us for the inconvenience caused.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Jamie
    Jamie avatar
    6 posts
    Member since:
    Jul 2013

    Posted 22 Jul 2013 Link to this post

    Iliana,

    I somehow need to get the data from two API requests; therefore I'm assuming that it is possible to store a JSON response as a variable in JavaScript. Do you know how, bearing in mind I am required to pass the following header to the API along with the URL. The JSON responses are in my above post.

    'Authorization', 'aReallyLongKeyWhichTheApiRequires'

    Thanks,
    Jamie
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 24 Jul 2013 Link to this post

    Hi Jamie,

    I discussed your scenario with my colleagues and we can suggest you the following workaround: As dataSource fetch() method returns Promise you could use jQuery when() method to execute a callback function. Hence after all fetches end you could create Chart with the returned data. For your convenience here is a very basic example which demonstrates the suggested approach in action - please check it and let me know if this helps.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Jamie
    Jamie avatar
    6 posts
    Member since:
    Jul 2013

    Posted 24 Jul 2013 Link to this post

    Iliana,

    Perfect! Thank you for your continued support.

    Jamie.
Back to Top