Formatting my chart

[Jeremy]

Hi everyone.  I just started using the Kendo UI, and so far it's awesome.

I was previously using highcharts, but kendo is great, because it's a combo of highcharts and jquery UI. So I only need to load one set of scripts! 

Anyway, I'm having some issues with formatting my charts. 

I'm trying to create a small thumbnail chart for several instances on one page. The chart is supposed to track progress as a percent over a period of a quarter. 

You can view what I've got so far here: 
http://jmillspaysbills.com/clients/radolo/rockhabits/daily-huddle.html

Obviously right now each chart is loading the same data. 

So, I'm having some problems with styling this chart. I have the category axis set up to have 65 points, wich would be the average business days in a quarter (it doesn't need to be exact). And I have the value axis as the points that will be recorded daily as a percentage. This works fine. 

First thing I can't get right is trying to skip the major grid lines by 10. Currently it has all 65 lines, but as you can see that looks terrible. 
Second, I have this huge padding on the top, left and bottom that I can't seem to get rid of. 

Here is my code: 

function createChart() {

                  $(".chart").kendoChart({

                      theme: $(document).data("kendoSkin") || "default",

                      

                      legend: {

                          position: "bottom",

                          visible: false,

                      },

                      chartArea: {

                          background: "",

                          margin: 0,

                           

                      },

                      plotArea: {

                          margin: 0,

                          border: {

                              width: 0

                          }

                           

                      },

                      seriesDefaults: {

                          type: "line" ,

                          border: {

                              width: 1   

                          },

                          margin: 0,

                          width: 1,

                          markers: {

                              visible: false,

                          }

                      },

                      series: [{

                          data: [0, 5, 5, 6, 8, 12, 16, 19, 20, 20, 23, 25, 28, 29, 29, 29, 32, 35, 35],

                      }],

                      valueAxis: {

                          majorUnit: 25,

                          max: 100,

                          min: 0,

                          majorGridLines: {

                              dashType: "dash",

                          }

                      },

                      categoryAxis: {

                          max: 65,

                          min: 0,

                          line: {

                               dashType: "dash" //or "dash", "longdash", "dashdot", "longdashdot" and "longdashdotdot"

                          },

                          majorGridLines: {

                              width: 1,

                          },

                          categories: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65 ],

                          majorUnit: 10,

                      },

                      tooltip: {

                          visible: true,

                          format: "{0}%",

                           

                      },

                      axisDefaults: {

                          labels: {

                              visible: false

                          },

                          majorTickType: "none",

                          majorGridLines: {

                              width: 1,

                          },

                           

                      }

                  });

              }

 

              $(document).ready(function() {

                  setTimeout(function() {

                      createChart();

 

                      // Initialize the chart with a delay to make sure

                      // the initial animation is visible

                  }, 400);

 

                  $(document).bind("kendo:skinChange", function(e) {

                      createChart();

                  });

              });

Regarding the Major Grid lines, I've tried majorunit: 10 with no luck. Any ideas what I'm doing wrong?

As for the padding issue, I've tried adding margin of 0 to the plotarea, but that didn't seem to do anything. 

Thanks in advance for any help you can give. I certainly appreciate it.

[Jeremy]

**EDIT** I realized I was using the 'rotation" completely wrong, so I've removed it from the code. I think what I'm looking for is the proper way to use "majorUnit" but I can only get that to work for the value axis not the category axis. 

Thanks guys/gals!

[Hristo Germanov]

Hello Joremy Miller,

Thank you for contacting us.

The Kendo UI chart does not support major unit for the category axis and unfortunately I can't offer you workaround.

Kind regards,
Hristo Germanov
the Telerik team

[Joshua]

Are there any plans to include the changes to remove addition vertical lines?

The charts are generally stunning, until you make them small. then they just look cluttered and hacky.

[Joshua]

Are there any plans to include the changes to remove addition vertical lines?

The charts are generally stunning, until you make them small. then they just look cluttered and hacky.

[T. Tsonev]

Hello,

We've added a "step" and "skip" properties to the categoryAxis label options. For example:
categoryAxis: {
    labels: {
        step: 10
    },
    majorTickType: "none"
}

I hope this helps.

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Jeremy]

Hi Tsvetomir. 

I'm trying out what you've provided and this is not working. I want to be able to show the vertical axis only every 20 nodes. I cannot get the dataViz code to show only the 20th vertical line.

I'm still getting what looks like the attached. But what I want to have is a vertical line every 20th node. 

This is the code I'm currently using. 

function createChart(chartIDSelector, series) {

    $(chartIDSelector).kendoChart({

        theme: "Metro",

        legend: {

            visible: false

        },

        chartArea: {

            background: "",

            margin: 15,

        },

        seriesDefaults: {

            type: "area"

        },

        series: [{

            data: series

        }],

        valueAxis: {

            visible: false,

            majorUnit:25,

            majorGridLines: {

                color: "#DADADA"

            },

            min: 00,

            max: 100,

            labels: {

                visible: false

            },

            minorTickType: "none",

            majorTickType: "none"

        },

        categoryAxis: {

            labels: {

                visible: false

            },

            min: 00,

            max: 65,

            majorUnit:20,

            majorTickType: "none",

            majorGridLines: {

                step: 20,

                color: "#C1E73D",

            },

            minorTickType: "none",

            majorTickType: "none"

        },

        tooltip: {

            visible: true,

            format: "{0}%"

        }

    });

}

I'm not sure I understand why the Category axis wouldn't have the same options available as the value axis. It seems to me they should offer the same options. It also seems to me that it would be very easy to have them offer the same options.

Thanks for your help.

[T. Tsonev]

Hello,

The step property is supported only for the labels. The major ticks and grid lines are always rendered for each category. We think this is the expected behavior for a categorical chart.

I think a scatter line chart will be more suitable for your scenario. In these charts the X and Y axes are continuous, just like the value axis in a line chart.

Please try it out to see how it works for you.

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Jeremy]

 Hi Tsvetomir, Thanks for the reply.

Unfortunately, I'm not looking for a scatter chart. What I want is an area chart, because that is what we've designed and that's what we are using.

I'm not exactly sure why you think not allowing steps in the category axis would be an expected behavior. Obviously, I'm expecting it, and I can't immagine I'm the only person that expects to find this option. 

I'm also not sure why you think no one that uses your DataViz plugin would ever need to skip lines in a category. Obviously, I've found a need that you didn't foresee, and to me, it seems an easy thing to enable. However, there is always that chance that I could be wrong.

As you can see in the screen shot that I've previously provided that not being able to skip major grid lines on the category axis when you've got 65 points (one for each day in the quarter) looks absolutely ridiculous. Do you not agree? Do you think that should be normal, expected behavior? I certainly don't. I think it would make perfect sense in that scenario to only show major grid lines every 20 days.

I was previously using High Charts, and that option has been there since the product launched. Unfortunately for me I'm kind of tied to using Kendo UI for everything, so I can't go back. However, I would like you to know that I am extremely disappointed that this isn't something I can change. I hope it finds it's way to future releases, because I'm sure others would find this very helpful.

[T. Tsonev]

Hi,

Fair enough. I see that this is a valid scenario thanks to your explanation. We'll get onto implementing step and skip properties for the grid lines as well.

Thanks for your time. As a token of gratitude for your involvement your Telerik points have been updated.

Regards,
Tsvetomir Tsonev
the Telerik team

[Raphael]

I am facing exactly the same problem. As the "step" and "skip" properties are in the documentation also for majorGridLines, I thought this would work now, but it seems like it does not.

Do you have an update regarding this issue?

Regards
Raphael

[Hristo Germanov]

Hello Raphael,

Could you please update to the latest version of Kendo UI in order to use step and skip functionality?

Regards,
Hristo Germanov
Telerik