Multiple Points For a Category

4 posts, 0 answers
  1. Kieren
    Kieren avatar
    6 posts
    Member since:
    Jun 2013

    Posted 06 Jul 2013 Link to this post

    Hi

    I am trying to render a series that has 2 points for a given interval (e.g. category axis times at 00:00:00). My Kendo implementation seems to "step" the line even though the value is for the same interval.

    I've attached a sample excel sample which renders my desired result, and my Kendo implementation. Is this possible - can you please provide a sample.

    Thanks
    Kieren
    $("#chart").kendoChart({
                        title: {
                            text: "Units sold"
                        },
                        seriesDefaults: {
                            width: 2,
                            markers: {
                                visible: false,
                            },
                            overlay: {
                                gradient: null
                            }
                        },
                        series: [{
                            type: "area",
                            transitions: false,
                            width: 2,
                            data: [
                                230, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 0,
                                10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 0,
                                10
                            ]
                        }, {
                            type: "line",
                            transitions: false,
                            width: 2,
                            data: [
                                250, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 250, null,
                                null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 250, null,
                                0
                            ],
                            missingValues: "interpolate"
                        }],
                            valueAxis: {
                            labels: {
                                visible: true
                            },
                            line: {
                                visible: false
                            }
                        },
                        categoryAxis: {
                            baseUnit: "hours",
                            baseUnitStep: 1,
                                majorGridLines: {
                                visible: false
                            },
                            labels: {
                                    visible: true,
                                    //format: "{0}",
                                    skip: 12,
                                    step: 24,
                                    rotation: 0,
                                    format: 'dd MM yyyy'
                                },
                            categories: [
    new Date('06/20/2013 00:00'), new Date('06/20/2013 00:00'), new Date('06/20/2013 01:00'), new Date('06/20/2013 02:00'), new Date('06/20/2013 03:00'), new Date('06/20/2013 04:00'), new Date('06/20/2013 05:00'),
    new Date('06/20/2013 06:00'), new Date('06/20/2013 07:00'), new Date('06/20/2013 08:00'), new Date('06/20/2013 09:00'), new Date('06/20/2013 10:00'), new Date('06/20/2013 11:00'), new Date('06/20/2013 12:00'),
    new Date('06/20/2013 13:00'), new Date('06/20/2013 14:00'), new Date('06/20/2013 15:00'), new Date('06/20/2013 16:00'), new Date('06/20/2013 17:00'), new Date('06/20/2013 18:00'), new Date('06/20/2013 19:00'),
    new Date('06/20/2013 20:00'), new Date('06/20/2013 21:00'), new Date('06/20/2013 22:00'), new Date('06/20/2013 23:00'), new Date('06/21/2013 00:00'), new Date('06/21/2013 00:00'),
     
    new Date('06/21/2013 01:00'), new Date('06/21/2013 02:00'), new Date('06/21/2013 03:00'), new Date('06/21/2013 04:00'), new Date('06/21/2013 05:00'),
    new Date('06/21/2013 06:00'), new Date('06/21/2013 07:00'), new Date('06/21/2013 08:00'), new Date('06/21/2013 09:00'), new Date('06/21/2013 10:00'), new Date('06/21/2013 11:00'), new Date('06/21/2013 12:00'),
    new Date('06/21/2013 13:00'), new Date('06/21/2013 14:00'), new Date('06/21/2013 15:00'), new Date('06/21/2013 16:00'), new Date('06/21/2013 17:00'), new Date('06/21/2013 18:00'), new Date('06/21/2013 19:00'),
    new Date('06/21/2013 20:00'), new Date('06/21/2013 21:00'), new Date('06/21/2013 22:00'), new Date('06/21/2013 23:00'), new Date('06/22/2013 00:00'), new Date('06/22/2013 00:00'),
     
    new Date('06/22/2013 01:00'),
                            ],
                            majorTickType: "none"
                        }
                    });
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 08 Jul 2013 Link to this post

    Hello,

    Please try with the below code snippet.

    <div id="chart"></div>
      $(document).ready(function () {
         
    $("#chart").kendoChart({
                        title: {
                            text: "Units sold"
                        },
                        seriesDefaults: {
                            width: 2,
                            markers: {
                                visible: false,
                            },
                            overlay: {
                                gradient: null
                            }
                        },
                        series: [{
                            type: "line",
                            transitions: false,
                            width: 2,
                            data: [
                                230, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 0,
                                10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 0,
                                10
                            ]
                        }, {
                            type: "line",
                            transitions: false,
                            width: 2,
                            data: [
                                250, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 250, null,
                                null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 250, null,
                                0
                            ],
                            missingValues: "interpolate"
                        }],
                            valueAxis: {
                            labels: {
                                visible: true
                            },
                            line: {
                                visible: false
                            }
                        },
                        categoryAxis: {
                            baseUnit: "hours",
                            labels: {
                                    visible: true,
                                    rotation: 90,
                                    format: 'M/d/yyyy HH:mm'
                                },
                            categories: [
    new Date('06/20/2013 00:00'), new Date('06/20/2013 00:00'), new Date('06/20/2013 01:00'), new Date('06/20/2013 02:00'), new Date('06/20/2013 03:00'), new Date('06/20/2013 04:00'), new Date('06/20/2013 05:00'),
    new Date('06/20/2013 06:00'), new Date('06/20/2013 07:00'), new Date('06/20/2013 08:00'), new Date('06/20/2013 09:00'), new Date('06/20/2013 10:00'), new Date('06/20/2013 11:00'), new Date('06/20/2013 12:00'),
    new Date('06/20/2013 13:00'), new Date('06/20/2013 14:00'), new Date('06/20/2013 15:00'), new Date('06/20/2013 16:00'), new Date('06/20/2013 17:00'), new Date('06/20/2013 18:00'), new Date('06/20/2013 19:00'),
    new Date('06/20/2013 20:00'), new Date('06/20/2013 21:00'), new Date('06/20/2013 22:00'), new Date('06/20/2013 23:00'), new Date('06/21/2013 00:00'), new Date('06/21/2013 00:00'),
      
    new Date('06/21/2013 01:00'), new Date('06/21/2013 02:00'), new Date('06/21/2013 03:00'), new Date('06/21/2013 04:00'), new Date('06/21/2013 05:00'),
    new Date('06/21/2013 06:00'), new Date('06/21/2013 07:00'), new Date('06/21/2013 08:00'), new Date('06/21/2013 09:00'), new Date('06/21/2013 10:00'), new Date('06/21/2013 11:00'), new Date('06/21/2013 12:00'),
    new Date('06/21/2013 13:00'), new Date('06/21/2013 14:00'), new Date('06/21/2013 15:00'), new Date('06/21/2013 16:00'), new Date('06/21/2013 17:00'), new Date('06/21/2013 18:00'), new Date('06/21/2013 19:00'),
    new Date('06/21/2013 20:00'), new Date('06/21/2013 21:00'), new Date('06/21/2013 22:00'), new Date('06/21/2013 23:00'), new Date('06/22/2013 00:00'), new Date('06/22/2013 00:00'),
      
    new Date('06/22/2013 01:00'),
                            ],
                            majorTickType: "none"
                        }
                    });
     
        });   



    Thanks,
    Jayesh Goyani
  3. Kieren
    Kieren avatar
    6 posts
    Member since:
    Jun 2013

    Posted 08 Jul 2013 Link to this post

    Hi

    My question isn't about axis labels.

    There are multiple points that refer to the same point in time:
    new Date('06/20/2013 00:00'), new Date('06/20/2013 00:00'),
    ...
    new Date('06/21/2013 00:00'), new Date('06/21/2013 00:00'),
    ...
    new Date('06/22/2013 00:00'), new Date('06/22/2013 00:00'),

    The chart always renders across 1 unit, even though these times should have the same X coordinate, and render a line 90 degree line for these times - as per the attached image. Is it possible to render 2 points for the same time interval?

    Thanks
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 08 Jul 2013 Link to this post

    Hello Kieren,

    I am afraid when using categorical chart (line, bar, column etc.) it is not possible to render more than one point per category, however you could achieve this using Scatter / ScatterLine Chart. For working examples take a look at the online demos.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top