Progressbar "like" chart

[sitefinitysteve]

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?

[T. Tsonev]

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

[sitefinitysteve]

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

[T. Tsonev]

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

[Russ]

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