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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DateTimeAxis with intervalType 'Hours' does not work

Thread ID:

Created:

Updated:

Platform:

Replies:

142848 Feb 21,2019 11:57 PM UTC Feb 25,2019 04:12 AM UTC Angular - EJ 2 3
loading
Tags: Chart
Aparna Pyla
Asked On February 21, 2019 11:57 PM UTC

I'm trying to generate a line chart for a 24hr data but couldn't see the graph in the chart. My data points look like below (printed to console and copied  from i)

public primaryXAxis: Object = {
valueType: 'DateTime',
labelFormat: 'hh:mm',
intervalType: 'Hours',
interval: 4,
majorGridLines: { width: 0 },
minimum: moment().subtract({ hours: 24 }).format(),
maximum: moment.now()
};

//Initializing Primary Y Axis
public primaryYAxis: Object = {
labelFormat: '{value}°F',
rangePadding: 'None',
minimum: 70,
maximum: 100,
interval: 5,
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
};
public chartArea: Object = {
border: {
width: 0
}
};

public width: string = '100%';

public marker: Object = {
visible: true,
height: 10,
width: 10
};

public tooltip: Object = {
enable: true
};

public load(args: ILoadedEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark");
};

public title: string = 'Device Data Chart';

<ejs-chart style='display:block; align-items:center' id='chartcontainer' [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
[tooltip]='tooltip' (load)='load($event)' [chartArea]='chartArea' [width]='width'>
<e-series-collection>
<e-series [dataSource]='chartData' type='Line' xName='x' yName='y' name='Datetime' width=2 [marker]='marker'> </e-series>
</e-series-collection>
</ejs-chart>

Kalaimathi Chellaiah [Syncfusion]
Replied On February 22, 2019 12:51 PM UTC

Hi Aparna, 
 
Greetings from Syncfusion. 
 
We have analyzed your query. We have prepared a sample using attached code snippet. In that snippet you have mentioned x axis value type as DateTime. But in attached data  x contains numeric value and y contains date time value. So kindly bind the xName as y and yName as x in series. Also check the minimum and maximum range in primaryxAxis.  
 
 
Screenshot: 
 
Kindly check that above sample and revert us back still issue will be exist. 
 
Regards, 
Kalai. 


Aparna Pyla
Replied On February 22, 2019 05:21 PM UTC

Thank you. It works now. Appreciate your quick response. 

Dharanidharan Dharmasivam [Syncfusion]
Replied On February 25, 2019 04:12 AM UTC

Hi Aparna, 
 
Most welcome. Kindly get in touch with us, if you need further assistance. We are always happy in assisting you. 
 
Thanks, 
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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

;