Observable parameter changes data source

4 posts, 0 answers
  1. rwb
    rwb avatar
    37 posts
    Member since:
    Aug 2015

    Posted 08 Dec 2017 Link to this post

    I want to make a simple example where dragging the slider updates the pie chart.

    How?

    I don't understand how to makethe graph data depend on the value of the slider.

     

            var viewModel = kendo.observable({
                turnips: 35,
                coconuts: function() {
                    data: [{
                        category: "Big",
                        value: this.get("turnips"),
                        color: "#9de219"
                    }, {
                        category: "Small",
                        value: 100 - 10 - this.get("turnips"),
                        color: "#90cc38"
                    }, {
                        category: "As big as your head",
                        value: 10,
                        color: "#068c35"
                    }]
                }
            });

            $(document).ready(function () {
                var slider = $("#slider").kendoSlider({
                    min: 30,
                    max: 60,
                    smallStep: 1,
                    largeStep: 5,
                    showButtons: false
                }).data("kendoSlider");

                $("#elt1").kendoChart({
                    title: {
                        position: "bottom",
                        text: "Coconuts"
                    },
                    legend: {
                        visible: false
                    },
                    chartArea: {
                        background: ""
                    },
                    seriesDefaults: {
                        labels: {
                            visible: true,
                            background: "transparent",
                            template: "#= category #: \n #= value#%"
                        }
                    },
                    series: [{
                        type: "pie",
                        startAngle: 90,
                        data: viewModel.coconuts
                    }],
                    tooltip: {
                        visible: true,
                        format: "{0}%"
                    }
                });


                kendo.bind($('#view'), viewModel);
            });

  2. rwb
    rwb avatar
    37 posts
    Member since:
    Aug 2015

    Posted 08 Dec 2017 in reply to rwb Link to this post

    https://dojo.telerik.com/oCuGug/3

     

    This ought to be so simple but it's absolutely bloody impossible.

  3. rwb
    rwb avatar
    37 posts
    Member since:
    Aug 2015

    Posted 10 Dec 2017 Link to this post

    https://dojo.telerik.com/EFigu
  4. Dimitar
    Admin
    Dimitar avatar
    459 posts

    Posted 12 Dec 2017 Link to this post

    Hello Richard,

    I am glad to see that you have managed to successfully resolve the issue that you were facing. 

    You have indeed figured out how to properly retrieve the "big" field value of the ViewModel by using the get() method.

    Thank you for sharing the solution.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top