This is a migrated thread and some comments may be shown as answers.

Specify the step between major gridlines in a DateTime series

6 Answers 516 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Iron
Iron
Andrew asked on 18 Nov 2012, 10:35 PM

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.


6 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 22 Nov 2012, 08:48 AM
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!
0
RamaKrishna P
Top achievements
Rank 1
answered on 19 Jul 2013, 05:22 AM
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.
0
Iliana Dyankova
Telerik team
answered on 22 Jul 2013, 11:54 AM
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!
0
RamaKrishna P
Top achievements
Rank 1
answered on 26 Aug 2013, 07:27 AM
So, can I set majorTicks and/or minorTicks fixed unit for catageryaxis..?

majorTicks: {
                      visible: true,
                      skip: 250
                  }
0
Iliana Dyankova
Telerik team
answered on 28 Aug 2013, 11:36 AM
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!
0
Andrew
Top achievements
Rank 1
Iron
Iron
answered on 04 Aug 2014, 10:06 PM
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
        }
    },
Tags
Charts
Asked by
Andrew
Top achievements
Rank 1
Iron
Iron
Answers by
Iliana Dyankova
Telerik team
RamaKrishna P
Top achievements
Rank 1
Andrew
Top achievements
Rank 1
Iron
Iron
Share this question
or