Linear Guage Databinding to WCF JSON Service from HTML

6 posts, 0 answers
  1. Renju Panicker
    Renju Panicker avatar
    23 posts
    Member since:
    Mar 2010

    Posted 04 Oct 2012 Link to this post

    Hi Kendo team,

    My scenario is as follows:

    I have an html page, where I want to put my Kendo Linear guage.

    I have a WCF running in my IIS, which returns a value in JSON like this  [{"unSrvd":12}]

    The WCF llink is as follows

    http://localhost/WCFSrv/Uns.svc/api/Unserved/-1/-1/-1

    Where -1/-1/-1 are the parameters that I have to pass to the WCF.

    How can I bind this to the Linear guage?

    Any help will be appreciated

    Thanks and Regards

    Renju J Panicker
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 09 Oct 2012 Link to this post

    Hello Renju,

    I am afraid that at present the Linear Gauge does not support remote data binding out of the box. As a workaround I can suggest to retrieve the data from the server via standard jQuery.ajax() request and build the scale.ranges array manually.
    Please note that the Ajax requests are asynchronous so it is recommended to build the ranges and create the gauge at the Ajax success event.

    Alternatively you may use the DataSource component and build the ranges at the change event.

    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. Kendo UI is VS 2017 Ready
  4. Renju Panicker
    Renju Panicker avatar
    23 posts
    Member since:
    Mar 2010

    Posted 09 Oct 2012 Link to this post

    Hi Alex,

    Thanks for the reply.

    I will be thankful, if you can provide me with a  sample to start with.
    Am totally a novice to jQuery and Kendo..

    Thanks and Regards
    Renju J Panicker
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 11 Oct 2012 Link to this post

    Hi Renju,

    Unfortunately we do not have examples that demonstrate the suggested workaround.
    If you are able to retrieve the data from the server through a standard Ajax request and still have problems to build the Gauge ranges, please open a support ticket with a small but runnable project attached and we will do our best to help.

    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!
  6. leblanc
    leblanc avatar
    56 posts
    Member since:
    Aug 2010

    Posted 25 Apr 2013 Link to this post

    I needed a remote datasource also -  not sure why it's not built in if the other charts can be sourced remotely.

    other missing common functionality: no ability to set trendmarkers, no ability to add multiple pointers, no ability to have tooltips!


    anyways here is what i've done.  Working although could be improved.


    <script type="text/javascript">
        jQuery(function () {
            jQuery.post('@Url.Action("_AjaxData","SalesTarget", Request.QueryString.ToRouteValues())',
                function (data) {
                    $('#caption').html(data.Title);
                    $('#subcaption').html(data.SubTitle);
     
                    var ctx = $("#chart@(uid)").getKendoRadialGauge();
                    ctx.value(data.ActualValue);
                     
                    var minArray = new Array();
                    var maxArray = new Array();
                    var r = new Array();
                    $.each(data.Ranges, function (idx, value) {
                        r.push({
                            from: value.MinValue,
                            to: value.MaxValue,
                            color: value.Color
                        });
                        minArray.push(value.MinValue);
                        maxArray.push(value.MaxValue);
                    });
                     
                    var min = Math.min.apply(null, minArray),
                        max = Math.max.apply(null, maxArray);
                     
                    ctx.setOptions({
                        scale: {
                                startAngle: 0,
                                endAngle: 180,
                                labels: {
                                    format: "C"
                                },
                                ranges: r,
                                min: min,
                                max: max
                            }
                        }
                    );
     
                    ctx.redraw();
                });
        });
    </script>

    I tried using: ctx.options.scale = ...   but it froze the chart from
    rendering so i had to redefine the chart with: ctx.setOptions.  Is there
    anyway to use $.extend( ..., ); with the existing options?

    Edit:
    Just found: http://www.kendoui.com/forums/dataviz/gauge/gauge---update-max-min-value.aspx
    To get me to specific values i wanted to change here.
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 29 Apr 2013 Link to this post

    Hello leblanc,

    Generally speaking, the options of the widget can be set only initially during the initialization. Extending them at a later point is not supported.

    If you would like to see the features which you listed in one of the future versions of the framework, I suggest you to submit each of them as a feature request in our feedback portal. We are using it to track user interest and prioritize the features based on the number of votes.

    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!
Back to Top
Kendo UI is VS 2017 Ready