Specify the step between major gridlines in a DateTime series

7 posts, 0 answers
  1. Andrew
    Andrew avatar
    34 posts
    Member since:
    Dec 2010

    Posted 18 Nov 2012 Link to this post

    I've created an area chart, illustrating the status of many media players throughout a single day. The data has a granularity of one minute.

    I want there to be a major gridline at every hour, and a minor gridline at every half hour. I cannot see where you can set the "step" of the grid line.

    Here's how I'm currently setting it up:

    $("#chart").kendoChart({
        theme: "blueOpal",
        title: {
            visible:false
        },
        chartArea: {
            height: 800
        },
        legend: {
            position: "bottom"
        },
        seriesDefaults: {
            type: "area",
            stack: true
        },
        series: [],
        valueAxis: {
            labels: {
                format: "{0}",
                visible: true
            }
        },
        categoryAxis: {
            categories: [],
            labels: {
                visible: true,
                step:60
            },
            minorGridLines: {
                visible: false
            },
            majorGridLines: {
                visible: true,
            },
            majorTicks: {
                visible: false,
                size: 2
            }
        },
        tooltip: {
            visible: true,
            format: "{0}"
        },
        seriesColors: [
                '#336699',
                '#EBAD60',
                '#FF0000',
                '#9582BB',
                '#028482'
        ]
    });
    

    And it looks like the attached image. In this image there are so many lines that they stop serving a purpose.


  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 22 Nov 2012 Link to this post

    Hello Andrew,

    I am afraid what you are trying to achieve is currently not supported in Kendo UI DataViz. 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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. RamaKrishna P
    RamaKrishna P avatar
    7 posts
    Member since:
    Jun 2010

    Posted 19 Jul 2013 Link to this post

    I am using Kendo UI  2012. In my app I need to plot approx 3500 points in a chart at a time, It plots data good but gridLines(major and miner)  and scaling on x-axis merged together. I had tried setting up step property in majorGridLines for grid lines.

     categoryAxis: {
                                            field: "timestamp",
                                            //axisCrossingValues: [0, 0, 10, 10],
                                            labels: {
                                                step: 250,       
                                                rotation: 0
                                            },
                                            majorGridLines: {
                                                step: 250,
                                                visible: true
                                            }
                                        },

    and where I need to skip scaling points.
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 22 Jul 2013 Link to this post

    Hello RamaKrishna,

    I am afraid at this point Kendo UI Chart does not support step / skip options for majorGidLines / minorGridLines. Please excuse us for the inconvenience caused.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. RamaKrishna P
    RamaKrishna P avatar
    7 posts
    Member since:
    Jun 2010

    Posted 26 Aug 2013 Link to this post

    So, can I set majorTicks and/or minorTicks fixed unit for catageryaxis..?

    majorTicks: {
                          visible: true,
                          skip: 250
                      }
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 28 Aug 2013 Link to this post

    Hello RamaKrishna,

    I am afraid setting step / skip options to the majorTicks / minorTicks is currently not supported too. Once again I apologize for the inconvenience caused.
     

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Andrew
    Andrew avatar
    34 posts
    Member since:
    Dec 2010

    Posted 04 Aug 2014 in reply to Andrew Link to this post

    Finally, In the 2014.1 release of Kendo UI, you can specify the frequency of vertical grid lines. This is done by the configuration properties categoryAxis.majorGridLines.step and categoryAxis.minorGridLines.step.

    categoryAxis: {
            categories: [],
            labels: {
                visible: true,
                step: 60
            },
            minorGridLines: {
                visible: true,
                step: 30
            },
            majorGridLines: {
                visible: true,
                step: 60
            },
            majorTicks: {
                visible: false,
                size: 2
            }
        },
Back to Top
Kendo UI is VS 2017 Ready