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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Weekly syncfusion chart using javascript

Thread ID:

Created:

Updated:

Platform:

Replies:

118319 Feb 25,2015 05:40 AM UTC Mar 13,2015 06:58 AM UTC JavaScript 5
loading
Tags: ejChart
kalpa serashiya
Asked On February 25, 2015 05:40 AM UTC

how to custom format 'primaryXAxis' label weekly using javascript??
I want to show week 1,week2 ,,so on x-axis.

Jayavigneshwaran [Syncfusion]
Replied On February 26, 2015 10:14 AM UTC

Hi Kalpa,

Thanks for using Syncfusion product.

We have analyzed this. This can be achieved by following the below steps

·         Specify intervalType as “days”

·         Set interval to 7, so the it is like week calculation. 7 days are split as interval and forms a weekly view

·         Trigger axesLabelRendering event in chart

·         Code the below to display labels as week1, week2 and so on

[JS]

function axisLabels (sender){

                                if(sender.data.axis.orientation == "horizontal"){    // for x axis labels

                                    var value = new Date(sender.data.label.Value)    // changing to date format

                                      value = value.getWeek();                        // get week number

                                                sender.data.label.Text = "week"+ value;         // modify the text

                                   }

                                }

·         To get the weeks the below method should be mentioned

[JS] 

Date.prototype.getWeek = function() {

    var determinedate = new Date();

    determinedate.setFullYear(this.getFullYear(), this.getMonth(), this.getDate());

    var D = determinedate.getDay();

    if(D == 0) D = 7;

    determinedate.setDate(determinedate.getDate() + (4 - D));

    var YN = determinedate.getFullYear();

    var ZBDoCY = Math.floor((determinedate.getTime() - new Date(YN, 0, 1, -6)) / 86400000);

    var WN = 1 + Math.floor(ZBDoCY / 7);

    return WN;

}

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

And also kindly share the below details, so that we can provide you a sample closer to your exact scenario

·         Should your week start from Sunday or any other day ?

·         Should your labels start from week1, week2, so on.. which is not depending on week number?

·         Share your desired position of the labels either on the ticks or between the ticks in chart

Please let us know if you have any concern.

Thanks,

Jayavigneshwaran



kalpa serashiya
Replied On February 27, 2015 04:14 AM UTC

Thanks for your reply.
I want to set interval that depends upon calender week for e.g. Suppose I have  May 2014  records  and I want to display 2014-05-01-week1, 2014-05-04-week2, 2014-05-11-week3, 2014-05-18-week4 like this. in such a case how can I set interval type??

Jayavigneshwaran [Syncfusion]
Replied On March 2, 2015 04:47 AM UTC

Hi Kalpa,

Thanks for your revert.

We have analyzed this and replicated the scenario shown, in our sample.

This can be done by following the below steps

·         Specify intervalType as “days”

·         Set interval to 7, so the it is like week calculation. 7 days are split as interval and forms a weekly view

·         Trigger axesLabelRendering event in chart

[JS]

    $("#container").ejChart(

        {

axesLabelRendering : "axisLabels"

          });

·         Code the below to display labels as week1, week2 and so on

[JS]

     function axisLabels (sender){

if(sender.data.axis.orientation == "horizontal"){              // for x axis labels

                count++;                                                                            // to find the no of labels

                sender.data.label.Text += "-week"+ count;       // modify the text

   }

        }

The below screen shot shows the output of the above code

We have also made a sample for your reference. Find it from the below location
datetime.zip

Please let us know if you have any concern.

Thanks,

Jayavigneshwaran



kalpa serashiya
Replied On March 12, 2015 06:12 AM UTC

Hi,
Thanks for reply.
My week is not like a calculation of 7 days.it will depend upon calendar.
for e.g.:Let us see the May 2014 calendar,in that first week start from thrusday (2014-05-01), second week id from Sunday(2014-05-04), Third week is from
sunday(2014-05-11) like this

In above example,the difference between week1 and week 2 is 3days and in week 2 and week 3 is 7 days.
In such a case how can I set interval?




Jayavigneshwaran [Syncfusion]
Replied On March 13, 2015 06:58 AM UTC

Hi Kalpa,

Currently there is no support to divide the axis based on the weeks interval. This can be achieved only if the interval is calculated as weeks. 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

;