Kendo Chart Smart Step Example

This article is an example of dynamically changing the step of the category labels in a Kendo Chart Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to show the category labels of the bar chart without overlapping.

If you have a lot of bars in a chart with long category labels, there is strong chance of the labels overlapping. There is already a Kendo Chart documentation on how to prevent the categoryAxis from overlapping. The three workarounds are:

• Rotating the labels through categoryAxis.labels.rotation.angle
• Using label templates through categoryAxis.labels.template
• Reducing the number of displayed labels through step and/or skip

The above workaround could work if we didn't need to zoom in and out of our chart. In order for our Kendo Chart to look pretty (lables not overlapping), we need to make the label step smart. In our solution, we calculate an initial step so that the labels don't overlap. When the chart is zoomed in or out, we recalculate the step and redraw tha chart. One thing to note here is that we need to have a name for our category axis so that we can get the min and max axis ranges.

Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

Without a smart step:

Kendo Chart - labels overlapping

 

Initial chart with smart step:

Kendo Chart - smart step

 

Chart mid zoom:

Kendo Chart - smart step (mid zoom)

 

Chart zoomed in:

 

Kendo Chart - smart step (zoomed in)

There you have it. A quick and simple example of how to have a smart step Kendo Chart.

Kendo Wizard Dynamic Customized Step Example

This article is an example of dynamically making a customized step on the Kendo Wizard Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to show a reminder during each step.

This article is based on an answer I made in Stack Overflow - how to customized Kendo Step. The idea is to catch it on the activate event. Handling it on the select event might also work. On the event handler, grab the wizard instance, wait for Kendo Wizard to do its work (update the HTML) - hence the setTimeout, then find the focused list item.

Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

 

Initial step:

Kendo Wizard Initial Step

 

Second step:

Kendo Wizard Second Step

 

Third step:

Kendo Wizard Final Step

 

There you have it. A quick and simple example of how to dynamically customized the step of Kendo Wizard.

Responsive Kendo Wizard Example

This article is an example of making the Kendo Wizard Component responsive. The framework used is the Kendo UI for jQuery. In this example, our requirement is to make the Kendo Wizard respond to the width of the browser. If the width is greater than 768, the Kendo Stepper is position on the left, otherwise it is on top.

This article is based on an answer I made in Stack Overflow - how to make Kendo Wizard responsive. I tried a couple of things. First, manipulating the Kendo Wizard CSS nearly works but the not quite. Tried setOptions but it had no effect. So I ended up destroying and recreating the Kendo Wizard widget on window resize.

Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

Here is how it looks like with width greater then 768:

Kendo Wizard - Stepper on the Left Side

With less than 768:

Kendo Wizard - Stepper at the Top

 

There you have it. A quick and simple example of how to make the Kendo Wizard responsive.