Category Axis Labels Display Error

6 posts, 0 answers
  1. Dragos
    Dragos avatar
    44 posts
    Member since:
    Dec 2015

    Posted 21 Mar Link to this post

    I have run into a problem while trying to do some on the fly charts.

    I provided a dojo with the problem, what happens is that category axis doesn't scale the values so it goes like this 2015 - 2016 - 2015 -2016.

    I can't seem to figure out the problem.

    http://dojo.telerik.com/eWONO/11

     

    Any help is much appreciated,

    Thanks.

  2. Dragos
    Dragos avatar
    44 posts
    Member since:
    Dec 2015

    Posted 22 Mar in reply to Dragos Link to this post

    Can anyone help with this ???, i can reproduce this issue with a lot if examples, the x axis just divides like this..

     

  3. Kendo UI is VS 2017 Ready
  4. EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 22 Mar Link to this post

    I would transform the data into a grouped dataSource like this:

    var dataForChart = [];
    var grpDataSource;
     
    for ( var i = 0; i < data.length; i++) {         
      for ( var j = 0; j < data[i].Values.length; j++){
        var item = {};
        item.series = data[i].name;
        item.date = new Date(data[i].Values[j].data);
        item.value = data[i].Values[j].value;
        dataForChart.push(item);
      }
    }
     
    grpDataSource = new kendo.data.DataSource({
      data: dataForChart,
      group: {
        field: "series"
      },
      sort: {
        field: "date",
        dir: "asc"
      },
      schema: {
        model: {
          fields: {
            date: {
              type: "date"
            }
          }
        }
      }
    });

    function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Site Visitors Stats \n /thousands/"
            },
            legend: {
                visible: false
            },
            dataSource: grpDataSource,
            series: [{
                type: "column",
                field: "value",
                name: "#= group.value #"
            }],              
            categoryAxis: {
                field: "date",
                majorGridLines: {
                    visible: false
                },
              justified: true,
                labels: {
                font: "10px sans-serif",
                rotation: 70,
                step: 3,
                template: '#: kendo.toString(kendo.parseDate(value), "MM/dd/yyyy") #'
                },
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        });
    }

    Updated DOJO

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    353 posts

    Posted 23 Mar Link to this post

    Hi Erik,

    Your approach seems perfectly fine.

    Let us know if you have further questions about the Kendo UI widgets.

    Regards,
    Dimiter Topalov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Mike
    Mike avatar
    1 posts
    Member since:
    Apr 2015

    Posted 25 Mar in reply to Dimiter Topalov Link to this post

    So , if the chart does not have a datasource you can end up "sometimes" with a bad axis , but only sometimes , this feels like a bug 
  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 29 Mar Link to this post

    Hello,

    The problem here is that the Chart doesn't see the category values as dates. They're only being parsed in the label templates.

    Therefore it will plot them in the order that they appear from the data source.
    You can use a date axis, but that's somewhat different, as it will plot a continuous time line, not just the set of points you supply.

    I hope this makes sense.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready