Progressbar "like" chart

5 posts, 0 answers
  1. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 07 Oct 2011 Link to this post

    I want to use the chart to display a progress bar inside of a grid (the cool new start animations inspired me)

    So like I know the user is AT 33, 46 is the number to be completed...how can I display that in a horizontal bar?
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 10 Oct 2011 Link to this post

    Hi Steve,

    I suppose we could somehow make a progress bar out of the Chart, but this would be an overkill. I'm sure there are better progress bar solutions out there (e.g. this, that and that one).

    Unless there is a good reason to use the chart the 60kB of script that you'll save can surely be put to a better use.

    All the best,

    Tsvetomir Tsonev
    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. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 11 Oct 2011 Link to this post

    Well I'm already loading the .all (which includes the chart)...so another plugin is technically larger...and your loading animation is just soo slick

    So I have it "kind-of"

    The progress chart DIVs are in a RadGrid template column...and on document.ready I run this
    $(document).ready(function(){
                var results = [{
                    completed: 46
                }];
     
     
                $(".progress-chart").kendoChart({
                    dataSource:{
                        data: results
                    },
                    majorTickType: "none",
                    minorTickType: "none",
                    minorGridLines:{
                        visible: false
                    },
                    majorGridLines: {
                        visible: false
                    },
                    legend: {
                        visible: false
                    },
                    series: [{
                        type: "bar",
                        field: "completed",
                        margin: 0,
                        padding: 0
                    }],
                    categoryAxis: {
                        categories: [0]
                    }
                });
            });


    Problem is the result comes out like this...http://www.screencast.com/t/ZrrztXAL6

    Each chart just gets longer and longer
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 13 Oct 2011 Link to this post

    Hello Steve,

    Thank you for sharing the screencast. My best guess is that the table resizes dynamically while the chart is being created and it ends up being wider than necessary. 

    Setting a fixed size on the "progress-chart" container should resolve this.

    All the best,

    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Russ
    Russ avatar
    1 posts
    Member since:
    Oct 2012

    Posted 06 Apr 2012 Link to this post

    Here's a snippet from my UI helper 'class' that borrows from the Kendo Slider styles.  I s'pose you could tweak the "if (percent)" block to add an animation effect.  I haven't tried using it in a grid, however.

    Usage:
    UI.progressBar(".progressbar", 0.5);

    HTML:
    <div class="progressbar"></div>

    If it doesn't exist, it will be created.  If a percent is passed, it'll set the progress width.

    var UI = {
        progressBar: function(elementSelector, percent) {
     
            if (!$(elementSelector).hasClass("k-slider"))
            {
                $(elementSelector).addClass("k-widget k-slider-horizontal k-slider").width("100%");
                $(elementSelector).append("<div class='k-slider-track' />");
                $(elementSelector + " .k-slider-track").width("100%").append("<div class='k-slider-selection' />");
            }
             
            if (percent)
                $(elementSelector + " .k-slider-selection").width((percent * 100) + "%");
        }
    };


    Hope this helps as a simple alternative,
    - Russ
Back to Top
Kendo UI is VS 2017 Ready