Custom drawing

6 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 14 Apr 2015 Link to this post

    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

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 16 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 21 Apr 2015 in reply to Danail Vasilev Link to this post

    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
                        //}
                    }
                };

  5. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 23 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 27 Apr 2015 in reply to Danail Vasilev Link to this post

    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

  7. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 27 Apr 2015 in reply to Jon Link to this post

    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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017