We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

StackedColumn with DateTime XAxis

Thread ID:

Created:

Updated:

Platform:

Replies:

124916 Jul 8,2016 10:28 AM Jul 12,2016 08:48 AM JavaScript 3
loading
Tags: ejChart
Lukas Kubis
Asked On July 8, 2016 10:28 AM

Hi,

I'm having some troubles with Stacked Column Chart. The X axis contains date times from 12:00 AM to 12:00 AM (+1 day), but when the chart is rendered, the labels start from 11:45 PM to 11:45 PM (+1 day). When I change type to Line, or StackingArea the date time values are rendered correctly, from 12:00 AM to 12:00 AM (+1 day)

Sample code:

$("#container").ejChart(
{
  primaryXAxis:
{
 title: { text: 'DateTime' },
 range: { interval: 6},
 intervalType: 'hours',
 labelFormat: 'hh:mm tt',
 valueType: 'datetime'
},
//Initializing Common Properties for all the series
commonSeriesOptions: 
{
 type: 'stackingColumn' // line or stackingArea work fine
},
//Initializing Series
series: 
[
{
 points: [{ x: new Date('7/8/2016 12:00 AM'), y: 900 }, { x: new Date('7/8/2016 12:30 AM'), y: 820 }, { x: new Date('7/8/2016 01:00 AM'), y: 880 }, { x: new Date('7/8/2016 01:30 AM'), y: 725 },
  { x: new Date('7/8/2016 02:00 AM'), y: 765 }, { x: new Date('7/8/2016 02:30 AM'), y: 679 }, { x: new Date('7/8/2016 03:00 AM'), y: 770 }, { x: new Date('7/8/2016 03:30 AM'), y: 770 },
  { x: new Date('7/8/2016 04:00 AM'), y: 465 }, { x: new Date('7/8/2016 04:30 AM'), y: 679 }, { x: new Date('7/8/2016 05:00 AM'), y: 770 }, { x: new Date('7/8/2016 05:30 AM'), y: 770 },
  { x: new Date('7/8/2016 06:00 AM'), y: 565 }, { x: new Date('7/8/2016 06:30 AM'), y: 679 }, { x: new Date('7/8/2016 07:00 AM'), y: 770 }, { x: new Date('7/8/2016 07:30 AM'), y: 770 },
  { x: new Date('7/8/2016 08:00 AM'), y: 765 }, { x: new Date('7/8/2016 08:30 AM'), y: 649 }, { x: new Date('7/8/2016 09:00 AM'), y: 670 }, { x: new Date('7/8/2016 09:30 AM'), y: 270 },
  { x: new Date('7/8/2016 10:00 AM'), y: 765 }, { x: new Date('7/8/2016 10:30 AM'), y: 629 }, { x: new Date('7/8/2016 11:00 AM'), y: 170 }, { x: new Date('7/8/2016 11:30 AM'), y: 799 },
  { x: new Date('7/8/2016 12:00 PM'), y: 765 }, { x: new Date('7/8/2016 01:00 PM'), y: 880 }, { x: new Date('7/8/2016 01:30 PM'), y: 725 },
  { x: new Date('7/8/2016 02:00 PM'), y: 765 }, { x: new Date('7/8/2016 02:30 PM'), y: 679 }, { x: new Date('7/8/2016 03:00 PM'), y: 770 }, { x: new Date('7/8/2016 03:30 PM'), y: 770 },
  { x: new Date('7/8/2016 04:00 PM'), y: 465 }, { x: new Date('7/8/2016 04:30 PM'), y: 679 }, { x: new Date('7/8/2016 05:00 PM'), y: 770 }, { x: new Date('7/8/2016 05:30 PM'), y: 770 },
  { x: new Date('7/8/2016 06:00 PM'), y: 565 }, { x: new Date('7/8/2016 06:30 PM'), y: 679 }, { x: new Date('7/8/2016 07:00 PM'), y: 770 }, { x: new Date('7/8/2016 07:30 PM'), y: 770 },
  { x: new Date('7/8/2016 08:00 PM'), y: 765 }, { x: new Date('7/8/2016 08:30 PM'), y: 649 }, { x: new Date('7/8/2016 09:00 PM'), y: 670 }, { x: new Date('7/8/2016 09:30 PM'), y: 270 },
  { x: new Date('7/8/2016 10:00 PM'), y: 765 }, { x: new Date('7/8/2016 10:30 PM'), y: 629 }, { x: new Date('7/8/2016 11:00 PM'), y: 170 }, { x: new Date('7/8/2016 11:30 PM'), y: 799 },
  { x: new Date('7/9/2016 12:00 AM'), y: 400 }],
name: 'FakeData'
}
],
isResponsive: true,
load:"loadTheme",
title :{text: 'ChartType test'},
size: { height: "600" },
legend: { visible: true }
});

Can you tell me please what I'm doing wrong?

Thanks
Lukas

Dharanidharan Dharmasivam [Syncfusion]
Replied On July 11, 2016 02:10 AM

Hi Lukas, 

Thanks for using the Syncfusion product. 

In case of line chart, the starting point will be the tick position, but in case of column type charts (column, stacked column, stackingcolumn100) the tick position will be the midpoint and padding will be added with the start and end points,  so the x axis labels will not start from 12.00AM and ends with 12.00AM. If you need to start from 12.00AM and ends with 12.00AM, then min and max properties respectively have to be specified. But the first and last point will not be fully visible since the tick position is the midpoint. Code snippet for min and max properties are specified below with respect to your sample, 

Code Snippet: 

JS: 
primaryXAxis: 
              { 
                title: { text: 'DateTime' }, 
                range: { min: new Date('7/8/2016 12:00 AM'), max: new Date('7/9/2016 12:00 AM'), interval: 6}, 
                intervalType: 'hours', 
                labelFormat: 'hh:mm tt', 
                valueType: 'datetime', 
                edgeLabelPlacement: "shift" 
              }, 

Screenshot: 
 

Thanks,  
Dharani. 


Lukas Kubis
Replied On July 11, 2016 06:30 AM

Hi Dharani,

Thanks for the explanation. My charts are displayed correctly now.

Lukas

Dharanidharan Dharmasivam [Syncfusion]
Replied On July 12, 2016 08:48 AM

Hi Lukas, 

Thanks for your update, please let us know if you require any further assistance on this. 
 
Regards, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;