Add vertical guideline

[Anthony]

Using Kendo Charts, is it possible to add vertical guidelines? For example, on a chart showing all the days of this month vs. amount of remaining budget, I'd like there to be a red vertical line the height of the entire chart to indicate the current date. Thank You. 

[EZ]

You could either use plotbands or draw on the chart surface.

 

For plotBands, have a look at categoryAxis.plotBands

 

$("#chart").kendoChart({
  theme: "Bootstrap",
  dataSource: data,
  series: [{
    type: "line",
    field: "value",
    categoryField: "day"
  }],
  valueAxis: {
    name: "value"
  },
  categoryAxis: {
    name: "category",
    plotBands: [
      { from: 15, to: 16, color: "red" }
    ]
  },
});

DEMO

 

For drawing, on render, you can get the axis objects and use slot and range to get the coordinates of the line to draw:

See Docs for ChartAxis and getAxis

 

$("#chart").kendoChart({
  theme: "Bootstrap",
  dataSource: data,
  series: [{
    type: "line",
    field: "value",
    categoryField: "day"
  }],
  valueAxis: {
    name: "value"
  },
  categoryAxis: {
    name: "category"
  },
  render: function(e){

    var chart = e.sender;
    var valueAxis = chart.getAxis("value");
    var categoryAxis = chart.getAxis("category");

    var catSlot = categoryAxis.slot(15,16);
    var valRange = valueAxis.range();
    var valSlot = valueAxis.slot(valRange.min, valRange.max);

    var path = new kendo.drawing.Path({
     stroke: {
      color: "red",
      width: 3
    }
    }).moveTo(catSlot.origin.x + catSlot.size.width/2, valSlot.origin.y)
      .lineTo(catSlot.origin.x + catSlot.size.width/2, valSlot.bottomRight().y);

    chart.surface.draw(path);

  }
});

 

DEMO

[Ryan]

This does not work right with panning and zooming capability enabled as below. How can I draw on the x-axis a vertical guideline based on an x-axis value? For me I have dates on the x-axis and I want to get the slot for that by date value and always have the vertical line drawn over that. Thank you.

pannable: {
      lock: "none"
    },
    zoomable: {
      mousewheel: {
        lock: "none",
      },
      selection: {
        lock: "none"
      }
    },

[Erik]

You can use the chart events for 'drag', 'dragEnd', 'zoom', 'zoomEnd' to catch user pans and zooms and then re-render the line in the correct place.

DEMO

For this, I am deleting the line and re-creating it each time:

  function RenderVerticalLine(chart) {
    //remove old line
    chart.wrapper.find("svg > path").remove();
    
    //calc new position based on pan and zoom
    var valueAxis = chart.getAxis("value");
    var categoryAxis = chart.getAxis("category");
     
    var catSlot = categoryAxis.slot(15,16);     
    var valRange = valueAxis.range();
    var valSlot = valueAxis.slot(valRange.min, valRange.max);
    var yRange = categoryAxis.range();
    var xRangeSlot = categoryAxis.slot(yRange.min, yRange.max);

    //check if line is still in zoomed/panned view
    if (catSlot.origin.x <= xRangeSlot.origin.x) return;
    if (catSlot.origin.x >= xRangeSlot.origin.x + xRangeSlot.size.width) return;
     
    var path = new kendo.drawing.Path({
     stroke: {
      color: "red",
      width: 3
    }
    }).moveTo(catSlot.origin.x + catSlot.size.width/2, valSlot.origin.y)
      .lineTo(catSlot.origin.x + catSlot.size.width/2, valSlot.bottomRight().y);
 
    chart.surface.draw(path);   
  }

 

$("#chart").kendoChart({
  theme: "Bootstrap",
  dataSource: data,
  series: [{
    type: "line",
    field: "value",
    categoryField: "day"
  }],
  valueAxis: {
    name: "value"
  },
  categoryAxis: {
    name: "category",
  },
  
  render: function(e){
    RenderVerticalLine(e.sender);
  },
  zoom: function(e) {
     RenderVerticalLine(e.sender);
  },
  zoomEnd: function(e) {
     RenderVerticalLine(e.sender);
  },
  drag: function(e) {
     RenderVerticalLine(e.sender);
  },
  dragEnd: function(e) {
     RenderVerticalLine(e.sender);
  },
  
  pannable: {
      lock: "none"
    },
    zoomable: {
      mousewheel: {
        lock: "none",
      },
      selection: {
        lock: "none"
      }
    },
  
});

 

[Ryan]

Hi,

This is helpful thank you. My issue is with this line:

categoryAxis.slot(15,16);

I need to get a slot for an axis value that is a date. Imagine the x-axis being Jan-23, Feb-23, Mar-23, Apr-23, May-23 displayed as such. I need to draw the vertical line where x-axis is Apr-23 (today's date). How would I get the slot for that so the line is always just above that?

[Erik]

I updated the DOJO with a date axis:

DEMO

Just use the date in the slot() call:

var catSlot = categoryAxis.slot(new Date("2011/12/26"),new Date("2011/12/27"));  

My demo uses days, you can use months or any other base unit...

[Ryan]

Hi,

 

For the category axis I am using a label template like so:

categoryAxis: {
                color: 'white',
                labels: {
                    font: '4px',
                    rotation: 60,
                    template: "#= kendo.toString(new Date(value), 'MMM-yy') #"
                },
            },

I tried doing categoryAxis.slot(kendo.toString(new Date("2011/12/26"), "MMM-yy")); and categoryAxis.slot(new Date("2011/12/26")); and they did not work. I am still having to provide a number for the slot function to draw it in the right spot, but getting that number is difficult with panning/zooming. Without zoom/panning it is trivial to get the index.

[Erik]

The label formatting has no effect on actual underlying data... See updated DEMO

Is your dataSource/Schema actually using a date object? Can you create an example DOJO?

[Ryan]

data is bound from the DB in this format 2023-04-01T00:00:00

[Ryan]

Despite it coming back as a DateTime from the C# side

[Ryan]

categoryAxis.slot(dateField.toISOString().split('.')[0]); 
this seemed to work

[Erik]

Have you tried setting a Schema on the datasource just for the date column:

                schema: {
                    model: {
                        fields: {
                            Timestamp: {
                                type: "date"
                            }
                        }
                    }
                }

 

Change "Timestamp" to the actual key name for your date field

[Erik]

I also get data back from c# as a string like this: 

"2023-04-10T00:00:00"

I then use the dataSource schema to force the conversion to a date object.

 

[Erik]

Here is a new DOJO Demo with the schema and string date in the data:

http://dojo.telerik.com/@ezanker/oTetotog

[Ryan]

Hi,

I am drawing a line and a label with a kendo.drawing.group, how would I remove those from the chart?

[Ryan]

And I had to do this for some reason:
var catSlot = categoryAxis.slot(thisMonth.toISOString().split('.')[0], nextMonth.toISOString().split('.')[0]);

[Ryan]

Basically need to remove my drawn group instead of this and I should be good to go:

chart.wrapper.find("svg > path").remove();

thank you!

[Erik]

Telerik does not seem to have a way to set an ID for drawing elements (including groups) that would allow for easy selection. With the path, it was the only one at the top level of the svg, so I could just remove all paths found there. With groups, they use groups at the top level for the rest of the chart; so my hack is to create the group with opacity set to 0.99999:

var grp = new kendo.drawing.Group({opacity: 0.99999});

This does not affect display, and the Kendo automatically generated SVG groups are unlikely to have that exact opacity. Then to remove that group:

chart.wrapper.find("svg > g").each(function(idx){
  if ($(this).attr('opacity') && $(this).attr('opacity') == 0.99999){
    $(this).remove();
  }
});

Find all top level groups, and if opacity is 0.99999, remove tham.

Updated DEMO

I imagine someone at Telerik has a better way to do this, but this will get you going.

[Ryan]

I ended up storing the kendo drawing group into a variable, if it is initialized in the draw line/label function then I removed it's elements and set the visibility to false. Not sure if that technically still renders the element with visibility false on it but it worked visually. I may try your method out instead because the element actually gets removed from the stack. thanks again for all your efforts and time!