Add vertical lines at specific points in a stacked area chart

9 posts, 0 answers
  1. Geoffrey
    Geoffrey avatar
    1 posts
    Member since:
    Oct 2012

    Posted 30 Nov 2012 Link to this post

    Supposing I have a stacked area chart that the horizontal axis represents time and the vertical axis represents value. I need to place vertical lines at specific points on the chart.

    For example:

    Chart shows processor usage of a group of computers in 3 sections (High, Normal, and Low) over time. At a certain time (say 11:45) I changed a policy that affect how processors are used and therefore should see a change in my data. I would like to mark that point with a vertical line with either a clickable or hover tooltip that says "changed policy X". Assuming all this data is available to me, how do I add the line? I have tried adding a 2px div with absolute positioning, but I cannot guarantee the height and width of the chart (acceptance criteria of client) and must always put the line in the correct spot. You can see my code below (eventually this will not be hard coded, but pull from a JSON rest client, what I am accomplishing and what I would like to accomplish are attached.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta charset="utf-8">
            <title>My Kendo UI Application</title>
            <!-- CDN-based stylesheet reference for Kendo UI DataViz -->
        <!-- <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css"> -->
     
        </head>
        <body>
                <h1>Hark! A Widget!</h1>   
            <div role="main">
                <input id="datacenterSelect" />
                     
                 
                <div id="chart" style="width: 400px; height: 200px; border: solid 1px black; margin: 5px; position: relative;">
                         
                </div
            </div>
            <!-- CDN-based script reference for jQuery; utilizing a local reference if offline -->
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
     
            <!-- CDN-based script reference for Kendo UI DataViz; utilizing a local reference if offline -->
            <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
            <script>(window.kendo && window.kendo.dataviz) || document.write('<script src="js/kendo.dataviz.min.js"><\/script>')</script>
            <script>
            var seriesData = [
                { hour: new Date("2011/12/30 09:50"), highNodeCount: 60, mediumNodeCount: 50, lowNodeCount: 30 },
                { hour: new Date("2011/12/30 10:50"), highNodeCount: 60, mediumNodeCount: 50,lowNodeCount: 30 },
                { hour: new Date("2011/12/30 11:50"), highNodeCount: 60, mediumNodeCount: 50,lowNodeCount: 30, policyChange: 140 },
                { hour: new Date("2011/12/30 12:50"), highNodeCount: 60, mediumNodeCount: 50,lowNodeCount: 30 },
                { hour: new Date("2011/12/30 13:50"), highNodeCount: 10, mediumNodeCount: 120,lowNodeCount: 10, policyChange: 140 },
                { hour: new Date("2011/12/30 14:50"), highNodeCount: 60, mediumNodeCount: 50,lowNodeCount: 31 },
                  
     
                ];
            $("#chart").kendoChart({
                title: {
                    text: "Datacenter Utilization History",
                    color: "#000000",
                    align: "left",
                },
                dataSource: {
                    data: seriesData
                },
                categoryAxis: {
                    field: "hour",
                    line: {
                            visible: false
                        },
                        majorGridLines: {
                            visible: false
                        }
                },
                series: [
                    {
                        name: "Low Utilization",
                        field: "lowNodeCount",
                        color: "#D9BD9C",
     
                    },
                    {
                        name: "Medium Utilization",
                        field: "mediumNodeCount",
                        color: "#038C8C",  
                    },
                    {
                        name: "High Utilization",
                        field: "highNodeCount",
                        color: "#D91828",
     
                    }
     
                ],
                seriesDefaults: {
                    type: "area",
                    stack: true,
                    opacity: 0.4
                }      
            });
             
            drawPolicyChange("#chart", 28, 100, "122px", "My Policy");
             
            function drawPolicyChange(chart, yStart, xStart, height, policyName) {
                //strip policy name of spaces
                policyName = policyName.replace(/\s+/g, '');
                lineHTML = '<div id=\"' + policyName + '\" title=\"' + policyName + '\"><div>';
                 
                lineSelector = "#" + policyName;
     
                $(chart).append(lineHTML);
                $(lineSelector).css("background-color", "#000");
                $(lineSelector).css("width", "2px");
                $(lineSelector).css("height", height);
                $(lineSelector).css("position", "absolute");
                $(lineSelector).css("bottom", yStart);
                $(lineSelector).css("left", xStart);
            }
            $(document).ready(function() {     
                $("datacenterSelect").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                {text: "all", value: "0"},
                {text: "Center One", value: "1"}
                ]
            });
        });
     
            </script>
        </body>
    </html>
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 04 Dec 2012 Link to this post

    Hi Geoffrey,

    I am afraid setting vertical / horizontal line in Kendo UI Chart is currently not supported and there is no suitable workaround I can suggest. We realize this is limitation of the framework and will do our best to address it as soon as possible. Please excuse us for the inconvenience caused.
     
    Regards,
    Iliana Nikolova
    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. Abdullah
    Abdullah avatar
    3 posts
    Member since:
    Jan 2013

    Posted 13 Feb 2013 Link to this post

    Hi Geoffrey,

    Did you manage to get a work around for your requirement?
    if so please share. Thank you
  5. Michaël
    Michaël avatar
    44 posts
    Member since:
    Feb 2014

    Posted 23 Oct 2014 Link to this post

    Any news about this? It would indeed be very useful to be able to automatically highlights all the points using the same abscissa value and drawing a vertical line. Seems like a basic feature and multi axis charts!
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 27 Oct 2014 Link to this post

    Hi guys,

    I am glad to inform you that multi axis functionality is available in Kendo UI Chart (online demo).

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Michaël
    Michaël avatar
    44 posts
    Member since:
    Feb 2014

    Posted 27 Oct 2014 in reply to Iliana Nikolova Link to this post

    Hi,

    Unfortunately this is not what we were talking about. The feature we'd like is if you hover a point, all the points that has the same X coordinates are highlighted too, so we can show a unified tooltip
  8. Michaël
    Michaël avatar
    44 posts
    Member since:
    Feb 2014

    Posted 27 Oct 2014 in reply to Iliana Nikolova Link to this post

    You can see a demo of that here: http://www.highcharts.com/demo/combo-multi-axes
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 29 Oct 2014 Link to this post

    Hi Michaël,

    A similar functionality is available in Kendo UI Chart via shared tooltip. For working example take a look at this example.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. jerry
    jerry avatar
    2 posts
    Member since:
    Feb 2013

    Posted 02 Mar Link to this post

    I've put vertical lines on Kendo Charts.

    I did it by putting the line directly on the svg.

    Here's how.

    First I needed some code that allowed me to call the server and determine if I had any lines to draw.

        function buildFences() {
            $.ajax({
                type: "POST",
                url: "Home/ShowThresholds",
                data: "{ <args describing the view, It's a stateless web server, I need to tell it what I'm looking at.>}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (response) {
                        buildLeftFence();
                        buildRightFence();
                    }
                }
            });
        }

    Then if I needed to draw something I needed to know where.  I found out where by knowing the values in the axis that are on the left and right of my line.

        function buildLeftFence() {
            $.ajax({
                type: "POST",
                url: "Home/GetProductionFreezeFence",
                data: "{ <args describing the view, It's a stateless web server, I need to tell it what I'm looking at.>}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (response === null) { return; }
                    if (response) {
                        var responses = response.split(",", 2);
                        putLineOnChart(responses[0], responses[1]);
                    }
                }
            });
        }

    So response[0],response[1] would be: 05/28 and 06/04

    Then you need to draw the line ontop of the svg.

        function putLineOnChart(leftMarker, rightMarker) {

            //alert("putLineOnChart(" + leftMarker + "," + rightMarker + ")");

            var elBeforeProdFrzFnc = $("text:contains('" + leftMarker + "')").filter(function () { return $(this).text() === leftMarker; });
            var elAfterProdFrzFnc = $("text:contains('" + rightMarker + "')").filter(function () { return $(this).text() === rightMarker; });

            var elBeforeProdFrzFncX = elBeforeProdFrzFnc.attr("x");
            var elBeforeProdFrzFncY = elBeforeProdFrzFnc.attr("y");
            var elAfterProdFrzFncX = elAfterProdFrzFnc.attr("x");
            //var elAfterProdFrzFncY = elAfterProdFrzFnc.attr("y");
            var elBeforeProdFrzFncYhigh = parseInt(elBeforeProdFrzFncY, 10) / 5;

            var xAve = (parseInt(elBeforeProdFrzFncX, 10) + parseInt(elAfterProdFrzFncX, 10)) / 2 + 8;

            var elBeforeProdFrzFncParent = elBeforeProdFrzFnc.parent();

            //var pathElement = elBeforeProdFrzFncParent.createElement("path");
            var pathElement = document.createElementNS ? document.createElementNS('http://www.w3.org/2000/svg', 'path') : document.createElement('path');

            pathElement.setAttribute("d", "M" + xAve + " " + elBeforeProdFrzFncY + " " + xAve + " " + elBeforeProdFrzFncYhigh);
            pathElement.setAttribute("stroke", "#ffa01f");
            pathElement.setAttribute("stroke-width", "4");
            pathElement.setAttribute("stroke-linecap", "square");
            pathElement.setAttribute("stroke-linejoin", "round");
            pathElement.setAttribute("fill-opacity", "1");
            pathElement.setAttribute("stroke-opacity", "1");
            pathElement.setAttribute("fill", "none");

            elBeforeProdFrzFncParent.append(pathElement);
        }

     

    I must say, after the one month of time it took for me to get this working correctly.  I value my purchase of Telerik more than ever.

     

Back to Top
Kendo UI is VS 2017 Ready