multi-axis series with remote data

[Kevin]

Hi,

How do you configure a kendo jquery line chart with remote data (json) to display multiple axis.

I have a Target series with Date and Value AND a Program seires with Date a Value and I want both of them to be display on the same chart.

I was not able to find this demo or help from stackoverflow.

regadrs

[Kevin]

Hi,

I would like to add this to the thread.

I am trying to add 2 series on 1 chart using 1 axis of date.

I got confuse with the multi-axis trying to achieve this feature.

So.. I have this Target Data

[{Date=2022-01-28,Value=220},{Date=2022-06-28,Value=200}]

And this program Data which will get data added weekly

[{Date=2022-02-04,Value=218},{Date=2022-02-11,Value=216},{Date=2022-02-18,Value=214},{Date=2022-02-25,Value=216},.....]

How do I chart those 2 series on the same chart?

thanks

[Kevin]

Hi Again,

I found an example of what I want to achieve at one of your competitor, Syncfusion.

Look at this demo https://js.syncfusion.com/demos/jquery/#!/bootstrap/chart/line

They use a range for the X and Y axis and the series as X and Y value.

Can I do this with the Kendo line chart?

[Kevin]

Hi,  After 2 days of trying and searching the forum and the support I found how to do this.

Here my code in case you want to add something.

var localUrl = window.location.href.substring(0, window.location.href.length - 1);
        var url = localUrl + '@Url.Action("ChartData_Read","Home")?programId=' + id;
        console.log(url);
        programId = id;
        console.log(id)

                $("#chart" + id).kendoChart({
                title: {
                    text: "Lost Weight Program"
                },
                dataSource: {
                    transport: {
                        read: {
                            url: url,
                            dataType: "json"
                        }
                    },
                    sort: {
                        field: "Date",
                        dir: "asc"
                    },
                    group: {
                        field: "Category"
                    },
                    schema: {
                        model: {
                            fields: {
                                Date: {
                                    type: "date"
                                }
                            }
                        }
                    }
                },
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "scatterLine"
                },
                series: [{
                    xField: "Date",
                    yField: "Value"
                }],
                xAxis: {
                    type: "date",
                    title: {
                        text: "Date"
                    }
                },
                yAxis: {
                    min: 0,
                    max: 350,
                    title: {
                        text: "Weight(lbs)"
                    }
                }
            });

[Nikolay]

Hello Kevin,

Thank you for sharing the solution you came up with.

I examined it and I can say it looks good. If you agree I can convert this to a forum thread so others can benefit from you. Please let me know.

Regards,
Nikolay
Progress Telerik

[Kevin]

Hi,

You can share this thread.

regards