gantt chart/24h timetable

[Michael]

Hi all,
maybe someone is having the same problem or can suggest a better solution:

I need to create a timetable view for bookings.

What I have now:
Class to hold up to 24 "bookings" with duration and some Text.
public class DayUsage
{
        public string Produkt { get; set; }
        public string T01 { get; set; }
        public string T02 { get; set; }
        public string T03 { get; set; }
        public string T04 { get; set; }
.
.
        public string T24 { get; set; }
}

in the view i've got something like:
            .Series(series => {
                    series.Bar(s => s.T01).Name("N01").Labels(label => label.Position(ChartBarLabelsPosition.Center).Visible(true));
        .
. 
           series.Bar(s => s.T24).Name("N24").Labels(label => label.Position(ChartBarLabelsPosition.Center).Visible(true));

i then fill up my T0x with something like T01="8|Mike", T02="4|empty", T03="3|Roman" etc...

the telerik.char.js i've slightly modified to eventually split the data value at "|" and extract value and name

            barChart.traverseDataPoints(function (value, categoryIx, series, seriesIx,myBarName) {
                var numValue;
                if (typeof value !== UNDEFINED) {
                    if (isStacked) {
                        var sums = numValue > 0 ? catMax : catMin;
                        sums[categoryIx] = sums[categoryIx] ? sums[categoryIx] + value : value;
                    } else {
                        barChart._seriesMin = Math.min(barChart._seriesMin, value);
                        barChart._seriesMax = Math.max(barChart._seriesMax, value);
                    }
                }


                barChart.addValue(value, categoryIx, series, seriesIx,myBarName);
            });


            if (isStacked) {
                barChart._seriesMin = sparseArrayMin(catMin.length ? catMin : catMax);
                barChart._seriesMax = sparseArrayMax(catMax.length ? catMax : catMin);
            }
        },


        addValue: function (value, categoryIx, series, seriesIx,myBarLabel) {


            var barChart = this,
                options = barChart.options,
                children = barChart.children,
                isStacked = barChart.options.isStacked,
                labelOptions = deepExtend({
                    isVertical: options.isVertical
                }, series.labels);


            if (isStacked) {
                if (labelOptions.position == "outsideEnd") {
                    labelOptions.position = "insideEnd";
                }
            }


            var bar = new Bar({
                color: series.color,
                opacity: series.opacity,
                border: series.border,
                isVertical: options.isVertical,
                overlay: series.overlay
            });


            if (labelOptions.visible && value) {
                var label = new BarLabel(myBarLabel, labelOptions);
                bar.children.push(label);
            }

and

 traverseDataPoints: function (callback) {
            var barChart = this,
                options = barChart.options,
                series = options.series,
                categoriesCount = barChart.categoriesCount();


            for (var categoryIx = 0; categoryIx < categoriesCount; categoryIx++) {
                for (var seriesIx = 0; seriesIx < series.length; seriesIx++) {
                    var currentSeries = series[seriesIx],
                        value = currentSeries.data[categoryIx];
                    valName = currentSeries.dataName[categoryIx];


                    // Valueupdate
                    if (value.toString().indexOf("|") > 0) {
                                             myBarLabel = value.toString().substr(value.toString().indexOf("|") + 1);
                                            value = parseFloat(value.toString().substr(0, value.toString().indexOf("|")));
                                            
                                        }
                                        else {
                                            myBarLabel = parseFloat(value);
                                            value = parseFloat(value);
                                        }
                    callback(value, categoryIx, currentSeries, seriesIx,myBarLabel);
                }
            }
        }

The code above might help anyone in the same situation, but what I'm looking for is a more effective way to do this and to also include "click"/"hover" functionality.

any ideas?

thanks,
all the best,
mike

[Caleb Sandfort]

This code looks really great exactly what I'm looking for.  Have you had a chance to update it for the recent Q3 release?

[Michael]

Hi,

To completely fullfill my needs it seemed to complicate to do this with telerik.

I'm now using RGraph.
http://www.rgraph.net/examples/gantt.html

maybe this helps..

kind regards,
mike