Weekly syncfusion chart using javascript

[kalpa serashiya]

how to custom format 'primaryXAxis' label weekly using javascript??

I want to show week 1,week2 ,,so on x-axis.

[Jayavigneshwaran]

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]

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]

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]

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]

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