2 DataSources in one chart

[Jamie]

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

[Iliana Dyankova]

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

[Jamie]

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

[Iliana Dyankova]

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

[Jamie]

Iliana,

Perfect! Thank you for your continued support.

Jamie.