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>8 Answers, 1 is accepted
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
Rank 1
Did you manage to get a work around for your requirement?
if so please share. Thank you
Rank 1
I am glad to inform you that multi axis functionality is available in Kendo UI Chart (online demo).
Regards,
Iliana Nikolova
Telerik
Rank 1
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
Rank 1
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
Rank 2
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.