This is a migrated thread and some comments may be shown as answers.

Add vertical lines at specific points in a stacked area chart

8 Answers 465 Views

Charts

This is a migrated thread and some comments may be shown as answers.

Geoffrey asked on 30 Nov 2012, 07:21 PM

area-graph-no-line.png

area-graph-with-line.png

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>

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

<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>

<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>

8 Answers, 1 is accepted

answered on 02 Mar 2016, 03:33 PM

chart-show.png

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.

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.

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

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

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.