Number of elements in the valueAxis

3 posts, 0 answers
  1. Ignacio
    Ignacio avatar
    4 posts
    Member since:
    Aug 2012

    Posted 12 Nov 2012 Link to this post

    Hi,

    I'm using a line graph with one serie:
    (piece of the json object)
    series:[
    {
    name:"Orange Tree",
    data:[0.981422,0.981422,0.981422,0.981422,0.981422]}],
    valueAxis:{labels:{format:{0}%}}

    As you can see the value of the data is constant; but when the chart is rendered in the screen I get a lot of labels in the valueAxis:
    1.2 1 0.8 0.6 0.4 0.2 0

    How can I control the number of labels in the value axis?

    Thank
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 12 Nov 2012 Link to this post

    Hi Ignacio,

    Generally speaking you can control the number of the labels on the valueAxis through the following properties:
    • skip -> sets number of labels to skip;
    • step -> sets label rendering step.
     
    Also, there is a majorUnit property, which sets the interval between major divisions;

    Kind 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. Ignacio
    Ignacio avatar
    4 posts
    Member since:
    Aug 2012

    Posted 13 Nov 2012 Link to this post

    Thanks for  your answer,

    I'm posting my code for future refernce :)

    I will calculate the maximum & minimum value of the series I get from the REST service and I will make adjustment accordingly

                        var minValue = 0;
                        var maxValue = 0;
                        var assignedFirstItem = false;
                        for (var minIndex = 0; minIndex < chartOptions.series.length; minIndex++) {
                            for (var minSeriaIndex = 0; minSeriaIndex < chartOptions.series[minIndex].data.length; minSeriaIndex++) {
                                if (!assignedFirstItem) {
                                    // First assignation
                                    minValue = chartOptions.series[minIndex].data[minSeriaIndex];
                                    maxValue = chartOptions.series[minIndex].data[minSeriaIndex];
                                    assignedFirstItem = true;
                                }
                                else
                                    // adjust the values as needed
                                    if (chartOptions.series[minIndex].data[minSeriaIndex] < minValue) {
                                        minValue = chartOptions.series[minIndex].data[minSeriaIndex];
                                    }else
                                        if (chartOptions.series[minIndex].data[minSeriaIndex] > maxValue) {
                                            maxValue = chartOptions.series[minIndex].data[minSeriaIndex];
                                        }
                            }
                        }

                        // we will display only 3 values
                                var steps = (maxValue - minValue) / 3;
                        // if steps == 0 all the values are the same
                        if (steps > 0) {
                            chartOptions.valueAxis.majorUnit = steps;
                            // make sure there is always a upper value in the axis, otherwise the line can be seen above the axis
                            chartOptions.valueAxis.max = maxValue + steps;
                            if (minValue != 0)
                                chartOptions.valueAxis.min = minValue - steps;
                        }
                        else {
                            // make sure that the min & max values are differents
                            if (maxValue > 0) {
                                chartOptions.valueAxis.max = maxValue + 1;
                                chartOptions.valueAxis.min = 0;
                            } else {
                                chartOptions.valueAxis.max = 0;
                                chartOptions.valueAxis.min = minValue - 1;
                            }
                        }
                        // Create the kendo control
                        control.kendoChart(chartOptions);
Back to Top