Change URL of Chart's DataSource

6 posts, 0 answers
  1. Pascal
    Pascal avatar
    8 posts
    Member since:
    Nov 2012

    Posted 18 Jan 2013 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2891 posts

    Posted 18 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Carel du Toit
    Carel du Toit avatar
    6 posts
    Member since:
    Feb 2006

    Posted 02 May 2013 Link to this post

    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, 
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 02 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Carel du Toit
    Carel du Toit avatar
    6 posts
    Member since:
    Feb 2006

    Posted 02 May 2013 Link to this post

    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,
  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 02 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top