This is a migrated thread and some comments may be shown as answers.

Multiple Points For a Category

3 Answers 100 Views

Charts

This is a migrated thread and some comments may be shown as answers.

Kieren asked on 06 Jul 2013, 11:20 AM

datechart.png

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"

}

});

3 Answers, 1 is accepted

answered on 08 Jul 2013, 11:41 AM

untitled.png

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: [

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/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/22/2013 01:00'),

],

majorTickType: "none"

}

});

Thanks,
Jayesh Goyani

answered on 08 Jul 2013, 11:56 AM

chart.png

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