Change URL of Chart's DataSource

[Pascal]

Hi everyone,

I have a Chart that receives data using a DataSource. Depending on a users selection in a drop down box the data should come from a different url. The structure of the data from those different url's is identically.

I tried to set the url in the drop downs change event using this syntax

$('#Chart').data('kendoChart').dataSource.transport.options.read.url = 'new url';

$('#Chart').data('kendoChart').dataSource.read();

Unfortunately this is not working and I hope you can help me.

Best regards,

Pascal

[Alexander Valchev]

Hello Pascal,

Please define the transport url as a function - it will be evaluated every time when the DataSource is read. In the respective documentation you can find example that demonstrates the syntax.

Regards,
Alexander Valchev
the Telerik team

[Carel du Toit]

Hi

I've tried to do the same with the data property of a data source, as per the code below:

var riskDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "TRiskProfiler/GetRiskAssessmentData",
                dataType: "json",
                data: {
                    period: GetPeriod(),
                    contribution: GetContribution(),
                    recurring: GetRecurring(),
                    riskProfile: GetRisk()
                }
            }
        }
    });

    function createChart() {
        
        $("#RiskProfilerGraph").kendoChart({
            dataSource: riskDataSource,
            title: {
                text: "Risk Profiler"
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                
            },
            seriesColors: ["#FBAB18", "White", "Red"],
            series: [{
                type: "area",
                field: "Best10",
                name: "Best 10%"
            }, {
                type: "area",
                field: "Low10",
                name: "Low 10%",
                opacity: 1
            }, {
                type: "line",
                field: "MostLikely",
                name: "Most Likely",
                opacity: 1
            }],
            categoryAxis: {
                field: "Label",
                labels: {
                    rotation: -90
                }
            },
            valueAxis: {
                labels: {
                    format: "N0"
                }
            },
            tooltip: {
                visible: true,
                format: "N0"
            }
        });
    }

    $(document).ready(function () {
        createChart();
    });

    function refresh() {
        var chart = $("#RiskProfilerGraph").data("kendoChart");
        chart.dataSource.read();
        chart.refresh();
    }


    function GetPeriod() {
        return $("input:radio[name=period]:checked").val();
    }

    function GetContribution() {
        return $("#Contribution").val();
    }

    function GetRecurring() {
        return $("input:radio[name=frequency]:checked").val();
    }

    function GetRisk() {
        return $("#slider").val();
    }

So the parameters needs to be refreshed every time I "refresh" the graph in order to fetch the new data from the server. The server call happens without the new parameters? The same parameters is sent from the creation of the data source.

Please help.
Regards, 

[Atanas Korchev]

Hi,

 The Kendo DataSource doesn't do anything to the data  option of the transport and passes it to $.ajax. The latter executes functions in the data option only the first time.

 I recommend instantiating a new instance of the data source and using the setDataSource method of the chart instead.

Greetings,
Atanas Korchev
the Telerik team

[Carel du Toit]

Hi

I've tried as you specified:

function refresh() {
        var chart = $("#RiskProfilerGraph").data("kendoChart");
        chart.setDataSource(getDataSource());
        chart.refresh();
      
    }

This is not doing anything?

Regards,

[Atanas Korchev]

Hello,

 The linked help article contains a working example for the setDataSource method. Does it work in your case? Can you prepare an example which doesn't work?

Regards,
Atanas Korchev
the Telerik team