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

how can i set X-axis text interval as per database input ?

Thread ID:

Created:

Updated:

Platform:

Replies:

118652 Mar 30,2015 05:22 AM UTC Apr 1,2015 01:10 PM UTC JavaScript 4
loading
Tags: ejChart
kalpa serashiya
Asked On March 30, 2015 05:22 AM UTC

Hello,
I want X-axis label interval as per database input.
e.g. Suppose I have date like this '2014-02-01,2014-02-05,2014-02-09,2014-02-11,2014-02-17,2014-02-20'
 how can I set all these date as X-Axis text?

Jayavigneshwaran [Syncfusion]
Replied On March 31, 2015 05:11 AM UTC

Hi Kalpa,

Thanks for using Syncfusion product.

We have analyzed this. The below shows your x values

2014-02-01,

2014-02-05,

2014-02-09,

2014-02-11,

2014-02-17,

2014-02-20

Since these values have an irregular interval, we cannot use data time axis to display these exact values in chart.

This is because the data time axis is of linear type, it will be rendered such that axis range will be calculated based on minimum and maximum values of data points. The number of intervals in axis will be calculated based on range and axis size. Labels will be created for the intervals in specified format rather than data points. Refer Datetime Axis for more information about date time axis in Chart.

Hence If you use date time axis, labels are rendered based on the regular intervals.

To render labels with irregular interval you can use category axis. The below code snippet shows this.

[JS]

$("#container").ejChart(

{

//Initializing Primary X Axis

primaryXAxis:

{

labelFormat : "yyyy-MM-dd",

valueType: 'category'

},

//Initializing Series

series:

[

{

points: [{ x: new Date(2014, 02, 01), y: 10 }, { x: new Date(2014, 02, 05), y: 30 },

{ x: new Date(2014, 02, 09), y: 15 }, { x: new Date(2014, 02, 11), y: 65 },

{ x: new Date(2014, 02, 17), y: 90 }, { x: new Date(2014, 02, 20), y: 85 }],

}

]

});

And in addition you can also specify the values like this

[JS]

$("#container").ejChart(

{

//Initializing Primary X Axis

primaryXAxis:

{

valueType: 'category'

},

//Initializing Series

series:

[

{

points: [{ x: "2014-02-01", y: 10 }, { x: "2014-02-05", y: 30 },

{ x: "2014-02-09", y: 15 }, { x: "2014-02-11", y: 65 },

{ x: "2014-02-17", y: 90 }, { x: "2014-02-20", y: 85 }]

}

]

});

We have also made a sample to illustrate this. Find it from the below location
datetime.zip

The below shows the output of the attached sample

Please let us know if you have any concern.

Thanks,

Jayavigneshwaran


kalpa serashiya
Replied On March 31, 2015 07:49 AM UTC

Thanks for reply.
 please give the same example using range navigator.

kalpa serashiya
Replied On March 31, 2015 09:41 AM UTC

Thanks for reply.
 please give the same example using range navigator with multiline chart.

Jayavigneshwaran [Syncfusion]
Replied On April 1, 2015 01:10 PM UTC

Hi Kalpa,
Currently there is no support to use range navigator with chart which is of category type. We have logged this as a feature request in our database. We will implement this feature in any of our upcoming releases.

Please let us know if you have any concern.

Thanks,
Jayavigneshwaran



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.

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

;