Custom drawing

[Jon]

I have a column chart that I am using to display percentage values.  There is some JS used to colour columns depending on their %, normally I have 70 or lower red, 70-90 amber and above 90 as green.  On occasion I want to drop the green tolerance down to 80.  I can do all this fine.  

What I need to do is display some form of indication for each column. I was thinking that perhaps I could display 3 plotbands behind each column as an indication of where the various tolerances are.  

Would this be possible?

Failing that is there a way to do custom drawing on the canvas behind the columns?

Regards

 Jon

[Danail Vasilev]

Hello Jon,

I can suggest that you utilize the kendo.drawing API in order to draw the threshold lines, as illustrated here - http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#methods-getAxis

For example:

<script>

    var valueSlots = [1.5, 3, 2.5];

    function OnLoad(args) {

        var chart = args.get_kendoWidget();
        var valueAxis = chart.getAxis("value");
        var categoryAxis = chart.getAxis("category");

        var catetgoriesCount = categoryAxis._axis.labelsCount();
        for (var i = 0; i < catetgoriesCount; i++) {

            var valueSlot = valueAxis.slot(valueSlots[i]);
            var categorySlot = categoryAxis.slot(i, i + 1);

            var path = new kendo.drawing.Path({
                stroke: {
                    color: "red",
                    width: 3
                }
            }).moveTo(categorySlot.origin.x, valueSlot.origin.y)
            .lineTo(categorySlot.bottomRight().x, valueSlot.origin.y);

            chart.surface.draw(path);
        }
    }
</script>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
    <ClientEvents OnLoad="OnLoad" />
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Product 1">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="2" />
                    <telerik:CategorySeriesItem Y="3" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
        <YAxis Name="value"></YAxis>
        <XAxis Name="category">
            <Items>
                <telerik:AxisItem LabelText="1" />
                <telerik:AxisItem LabelText="2" />
                <telerik:AxisItem LabelText="3" />
            </Items>
        </XAxis>
    </PlotArea>
    <ChartTitle Text="Product sales for 2011">
    </ChartTitle>
    <Legend>
        <Appearance Position="Bottom" />
    </Legend>
</telerik:RadHtmlChart>

The only thing you should modify is the valueSlots array where are defined the y points for the thresholds. You should also ensure names for the x and y axis in order to reference them.

Regards,
Danail Vasilev
Telerik

 

 

[Jon]

Hi Danail,

 Thanks for this.  I have it working - kind of.  I've had to muck around with it because I had the custom colouring on the series columns.  How would I go about getting the lines to go behind the series column bars,  at the moment they appear in front.

I've attached the code below.

Regards

Jon

function pageLoad() {
                //var chart = $find("uxRadHtmlChart");
                ////chart._chartObject.options.yAxis.majorGridLines.step = 5;
                //chart.get_kendoWidget().options.valueAxis.minorGridLines.step = 5;
                //chart.get_kendoWidget().options.valueAxis.majorGridLines.step = 10;
                //chart.repaint();

                if ($find("uxRadHtmlChart") !== null) {
                    //try {
                    var kendoWidget = $find("<%=uxRadHtmlChart.ClientID%>").get_kendoWidget();
                    kendoWidget.options.series[0].color = function (e) {
                        if (e.value < e.dataItem.RedValue) {
                            return "red";
                        } else {
                            if (e.value >= e.dataItem.GreenValue) {
                                return "green";
                            } else {
                                return "orange";
                            }
                        }
                    }
                    kendoWidget.redraw();

                    var valueAxis = kendoWidget.getAxis("value");
                    var categoryAxis = kendoWidget.getAxis("category");

                    var catetgoriesCount = categoryAxis._axis.labelsCount();
                    for (var i = 0; i < catetgoriesCount; i++) {

                        var categorySlot = categoryAxis.slot(i, i + 1);

                        var redValueSlot = valueAxis.slot(categoryAxis._axis.children[i].dataItem.RedValue);
                        var redPath = new kendo.drawing.Path({
                            stroke: {
                                color: "rgba(255, 0, 0, 0.3)",
                                width: 3
                            }
                        }).moveTo(categorySlot.origin.x, redValueSlot.origin.y)
                        .lineTo(categorySlot.bottomRight().x, redValueSlot.origin.y);
                        kendoWidget.surface.draw(redPath);

                        var amberValueSlot = valueAxis.slot(categoryAxis._axis.children[i].dataItem.GreenValue);
                        var amberPath = new kendo.drawing.Path({
                            stroke: {
                                color: "rgba(255, 115, 30, 0.3)",
                                width: 3
                            }
                        }).moveTo(categorySlot.origin.x, amberValueSlot.origin.y)
                        .lineTo(categorySlot.bottomRight().x, amberValueSlot.origin.y);
                        kendoWidget.surface.draw(amberPath);
                    }


                    //} catch (err) {
                    //    // do nothing
                    //}
                }
            };

[Danail Vasilev]

Hello Jon,

There isn't a public API for this yet. However, you can try to replace the following line of code:

kendoWidget.surface.draw(amberPath);

with this one:

kendoWidget._plotArea.panes[0].visual.insertAt(amberPath, 0);

Regards,
Danail Vasilev
Telerik

 

 

[Jon]

Hi Danail

 Ah that gets it closer - many thanks.

 I have noticed that if the line hits a grid line then the grid line appears above the custom line.  What is the structure of the kendoWidget._plotArea.panes[0].visual object?  If I understand that I can adjust where the lines get inserted.  I tried adjusting the insertion point and it worked for some columns but not others.

Regards

Jon

[Jon]

Hi Danail,

 

Not sure what happened to my first test but retrying I have found that using position 2 in the array allows for the perfect insertion, above the grid but below the columns.

 kendoWidget._plotArea.panes[0].visual.insertAt(redPath, 2);

Thanks for your help.

 Regards

Jon