Multiple Points For a Category

[Kieren]

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"
                    }
                });

[Jayesh Goyani]

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

[Kieren]

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

[Iliana Dyankova]

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