categoryAxis date Problem

2 posts, 0 answers
  1. bakmeon
    bakmeon avatar
    2 posts
    Member since:
    Nov 2015

    Posted 07 Jun Link to this post

    I test simple chart example with below data. it contains one DATE typed data and two NUMBER typed data. actually I make a chart with DATE category and NUMBER value :

    <DATA :  data_small.json>
    [
      {
        "START_DATE": "2011-11-02T00:00:00",
        "USE_PERCENTAGE": 38,
        "RESOURCE_ID": "RS_ASSEMBLER",
        "USE_TIME": 32400
      },
      {
        "START_DATE": "2011-11-03T00:00:00",
        "USE_PERCENTAGE": 75,
        "RESOURCE_ID": "RS_ASSEMBLER",
        "USE_TIME": 64800
      },
      {
        "START_DATE": "2011-11-04T00:00:00",
        "USE_PERCENTAGE": 71,
        "RESOURCE_ID": "RS_ASSEMBLER",
        "USE_TIME": 61200
      },
      {
        "START_DATE": "2011-11-05T00:00:00",
        "USE_PERCENTAGE": 72,
        "RESOURCE_ID": "RS_ASSEMBLER",
        "USE_TIME": 0
      },
      {
        "START_DATE": "2011-11-10T00:00:00",
        "USE_PERCENTAGE": 60,
        "RESOURCE_ID": "RS_ASSEMBLER",
        "USE_TIME": 0
      },
      {
        "START_DATE": "2011-11-15T00:00:00",
        "USE_PERCENTAGE": 90,
        "RESOURCE_ID": "RS_ASSEMBLER",
        "USE_TIME": 77400
      },
      {
        "START_DATE": "2011-11-20T00:00:00",
        "USE_PERCENTAGE": 61,
        "RESOURCE_ID": "RS_ASSEMBLER",
        "USE_TIME": 52200
      },
      {
        "START_DATE": "2011-11-02T00:00:00",
        "USE_PERCENTAGE": 49,
        "RESOURCE_ID": "RS_BOX_PACKER",
        "USE_TIME": 0
      },
      {
        "START_DATE": "2011-11-03T00:00:00",
        "USE_PERCENTAGE": 24,
        "RESOURCE_ID": "RS_BOX_PACKER",
        "USE_TIME": 20400
      },
      {
        "START_DATE": "2011-11-04T00:00:00",
        "USE_PERCENTAGE": 18,
        "RESOURCE_ID": "RS_BOX_PACKER",
        "USE_TIME": 15000
      },
      {
        "START_DATE": "2011-11-05T00:00:00",
        "USE_PERCENTAGE": 30,
        "RESOURCE_ID": "RS_BOX_PACKER",
        "USE_TIME": 0
      },
      {
        "START_DATE": "2011-11-10T00:00:00",
        "USE_PERCENTAGE": 85,
        "RESOURCE_ID": "RS_BOX_PACKER",
        "USE_TIME": 0
      },
      {
        "START_DATE": "2011-11-15T00:00:00",
        "USE_PERCENTAGE": 14,
        "RESOURCE_ID": "RS_BOX_PACKER",
        "USE_TIME": 12000
      },
      {
        "START_DATE": "2011-11-20T00:00:00",
        "USE_PERCENTAGE": 18,
        "RESOURCE_ID": "RS_BOX_PACKER",
        "USE_TIME": 15000
      }

    ]

    with codes below, I get the result like "reslut1". I didnt set categoryAxis.type. the result is : chart shows every DATE category data but without formatting it.

    actually I like it. because this is matchs with my indend. but I want DATE category should be formatted.

    <CODE1>

    <script>
            function makeBody() {
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    url: './data_small.json',
                    success: function (data) {
                        var chartData =  data;
                        var chart = $("#chart").data("kendoChart");
                        var chartDataSource = chart.dataSource;
                        chartDataSource.data(chartData);
                    },
                    error : function(a, b, c){
                        console.log("error a:" + a +" b:" + b + " c:"+ c);
                    }
                });
            }
            function makeChart() {
            
                var stocksDataSource = new kendo.data.DataSource({
                    group: {
                        field: "RESOURCE_ID"
                    },
        
                    sort: {
                        field: "START_DATE",
                        dir: "asc"
                    },
        
                    schema: {
                        model: {
                            fields: {
                                START_DATE: {
                                    type: "date"
                                }
                            }
                        }
                    }
                });
            
                function createChart() {
                    $("#chart").kendoChart({
                        title: { text: "Test chart" },
                        dataSource: stocksDataSource,
                        series: [{
                            type: "line",
                            field: "USE_PERCENTAGE"
                        }],
                        legend: {
                            position: "bottom"
                        },
                        categoryAxis: {
                            field: "START_DATE",
                            crosshair: {
                                visible: true
                            },
                            // type: "date",
                            labels: {
                                rotation: "auto",
                                format: "yyyy-MM-dd" // 날짜 형식
                            }
                        }
                    });
                }
                $(document).ready(createChart);
                $(document).bind("kendo:skinChange", createChart);
                
            }
            
            makeChart();
            makeBody();
            
        </script>

    after this, I tried with 'type: "date",' (which is commented in above code) .(result2) I hope I get the same result with the result1 but DATE category is formatted well. but I find there are some more data than my original data. I think kendo makes some additional data with 'type=date'. am I right?

    then how can I get the result like 'result1 with formatted DATE category'?

    thanks in advance.

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 10 Jun Link to this post

    Hi Bakmeon,

    When using date axis the data is aggregated for a particular period and this cannot be prevented (documentation link). In order to achieve the expected result you should set categoryAxis.type "category". For your convenience here is a dojo.

    Regards,
    Iliana Nikolova
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top